قسمت ششم آموزش جامع HTML : کار با فرم ها

فرم ها یکی از مهمترین عناصر به کار رفته در صفحات وب هستند و شاید می توان گفت که فرم ها راهی برای این هستند که کاربران وبسایت ها بتوانند خود اطلاعاتی را برای مدیر سایت ارسال کنند. از جمله فرم های به کار رفته در صفحات وب می توان به دکمه های رادیویی و کادر های یک خطی و … اشاره کرد که در زیر به توضیح این مشخصه در HTML می پردازیم:

کار با فرم ها

در واقع فرم ها بوسیله این تگ شکل می گیرند و البته یک تگ غیر تهی محسوب می شود و نیاز به بستن <form/> دارد . این نکته را نباید فراموش کرد که هیچگاه نمی توان بین این تگ یک فرم دیگر را باز کرد ولی می توان از هر گونه تگی مانند تگ <p> یا </br> یا <font> و…. به عنوان محتوای این تگ به کار برد و نکته دیگر هم اینکه ممکن است در یک صفحه HTML از چندین تگ فرم برای ایجاد نوع های مختلفی از امکانات مانند ایجاد کادر جست و جو  ویا صفحه تماس با ما و یا باکس خبرنامه از آن استفاده شود.

به طور معمول فرم ها دارای یک دکمه submit  برای ارسال یک سری اطلاعات فرم به سرور هستند (البته در صورت لزوم)

در زیر نمونه ای از استفاده این تگ و نتیجه را در مرورگر می بینید:

نتیجه در مرورگر:

اما باید با عناصر ایجاد فرم به طو کامل آشنا شویم:

تگ <form>

برای استارت کار و شروع ایجاد یک فرم از هر نوعی نیاز هست که از <form> </form> استفاده کنیم و بین این تگ مواردی را که نیاز به آن داریم قرار می دهیم انی تگ دارای صفاتی است که در زیر به آن ها اشاره می کنیم:

action   » زمانی که شما اطلاعاتی را در فرم خود نوشته باشید و قصد پردازش آن را داشته باشید باید این فرم توسط یک صفحه ای از صفحات وب شما که با یکی از زبان های سمت سرور php یا asp یا … نوشته شده است پردازش می گردد وسپس نتیجه مورد نظر اتفاق می افتد مقدار این صفت در واقع آدرس همان صفحه ایست که قرار است فرم برای پردازش به آن هدایت شود

Method  » برای اینکه یک فرم ارسال شود حتما باید روش و نوع ارسال را برایش تعیین کنیم که توسط این صفت اتفاق می افتد و دارای دو مقدار get , post  است حالا این دو با هم چه فرقی دارند ؟

در واقع باید گفت متد get از آدرس و url برای ارسال استفاده می کند و مقادیر را در نوار مرورگر آشکار می کند اما متد post  این کار را به صورت مخفی انجام می دهد بنا به همین دلیل و استفاده از روش رمزگذاری متد post از امنیت بالاتری برخوردار است.

برای اینکه از متد get استفاده کنیم دارای محدودیت های ارسالی حجمی هستیم ولی برای post هیچ محدودیت حجمی برای ارسال نداریم. اما تفاوت دیگر این است که سرعت ارسال از روش get مقداری بیشتر از post انجام می شود.

Enctype    » این صفت هم نوعی روش رمزگذاری برای داده ها می باشد و سه مقدار زیر را شامل می گردد:

application/x-www-form-URLencoded

این مقدار باعث می شود تا تمامی کاراکتر های space به + و کاراکترهای !?& و… به صورت هگزادسیمال در نوار آدرس مرورگر تبدیل شوند تا قابل تشخیص نباشند.

multipart/form-data

زمانی که در داخل تگ فرم از عنصر فایل آپلود استفاده می کنیم باید از این روش رمزگذاری استفاده کنیم

text/plain

این مورد هم زمانی کاربرد دارد که به جای اینکه بخواهیم اطلاعات خود را به یک صفحه برای پردازش ارسال کنیم از ارسال به ایمیل استفاده می کنیم که در این راه فقط کاراکتر space تبدیل به + می شود.

تگ <lable>

از این تگ برای نامگذاری کادر یا عنصر مورد نظر در تگ فرم استفاده می شود که بیان کننده نوع محتوای کادر است مثلا در مثال بالا در کنار یکی از کادر ها نوشته شده “نام” که کاربر متوجه می شود که باید نام خود را در این قسمت وارد کند این عبارت یک lable محسوب می شود .

صفات این تگ را در زیر مشاهده می کنیم:

For  » از این صفت برای نسبت دادن یک برچسب برای عنصر مورد نظر به کار می رود

نتیجه در مرورگر:

تگ <input>

در واقع از این تگ برای ایجاد عنصر مورد نظر استفاده می کنیم مانند ایجاد کادر و دکمه رادیویی و… این تگ از صفت هایی تشکیل شده است که در زیر می بینیم:

Name » این صفت برای نام گذاری برای عنصر به کار می رود که حتما هم باید منحصر به فرد و یکتا باشد.

Type » این صفت برای تعیین نوع عنصر است که مقادیر زیر را به خود اختصاص می دهد:

Text  » برای ایجاد یک فیلد متنی ساده استفاده می شود:

</”input type=”text” name=”name>

نتیجه در مرورگر:

Password » برای بوجود آمدن یک فیلد متنی مناسب پسوورد استفاده می شود.

نتیجه در مرورگر:

Radio » برای ایجاد دکمه های رادیویی استفاده می شود و این نکته را باید بدانید که د راستفاده گروهی از این مقدار باید نام ها یکسان و مقادیر متفاوت باشد.

نتیجه در مرورگر:

checkbox»  از این مورد برای ایجاد چک باکس ها ایجاد می گردد.

نتیجه در مرورگر:

Submit » این دکمه هم وظیفه ارسال فرم را به صفحه پردازشگر دارد.

</”input type=”submit” value=”Submit >

نتیجه در مرورگر:

Reset  و button »   اولی برای پاک کردن محتویات نوشته شده است و دومی برای ایجاد دکمه هاییست که رفتار پیشفرضی از خود ندارند.

File » برای زمانی است که بخواهیم امکان آپلود فایلی را در صفحه خود بوجود آوریم که باعث بوجود آمدن یک باکس برای آپلود فایل می شود.

</”input type=”file>

hidden »  گاهی اوقات مدیر سایت می خواهد یک فرم را بدون مشاهده کاربران پردازش کند برای اینکه از دیده ها ناپدید شود از این مقدار استفاده می شود.

image » زمانی است که می خواهیم یک تصویر را به عنوان دکمه submit خود در نظر بگیریم که در این صورت کاربر با کلیک بر روی آن باعث پردازش فرم می شود و به یاد داشته باشید که اگر از این مورد استفاده کردیم می توانیم از تمام صفت های تگ image  در این مورد هم بهره ببریم:

</”input type=”image” src=”submit.png” alt=”Submit>

Email » در این فیلد باید یک آدرس ایمیل معتبر وارد گردد که اگر چنانچه آدرس ایمیل معتبری وارد نشود خود مرورگر یک پیغامی می دهد که فرمت وارد شده درست نیست و باید یک آدرس ایمیل وعتبر وارد نمایید.

</”E-mail: <input type=”email” name=”user_email

نتیجه در مرورگر :

URL » مقدار این فیلد قبل از ارسال خطایابی شده و چنانچه در کادر وارد شده یک آدرس سایت معتبر مطابق فرمت وارد نشده باشد باز پیغام خطایی را مشاهده می کنید.

</”Homepage: <input type=”url” name=”user_url

نتیجه در مرورگر:

Number » زمانی که بخواهیم از یک عدد در فیلد خود به کار ببریم از این خاصیت اتوماتیک استفاده می کنیم.

“Points: <input type=”number” name=”points” min=”1″ max=”5″ step=”3

</”value=”۴ 

نتیجه در مرورگر:

Range » این مقدار در وقع سبب پدیدار شدن یک اسکرول حرکتی می شود که به صورت افقی می توانید در یک بازه دلخواه تغییرش دهید و میزان را تعیین کنید البته صفت های min و max و step و value به ترتیب برای کمترین و بیشترین و فاصله بین هر عدد و مقدار پیش فرض به کار برده می شود.

</”number: <input type=”range” name=”points” min=”1″ max=”5

</”input type=”submit>

ونتیجه :

Color » این مقدار هم برای تعیین رنگ در نظر گرفته می شود.

</”Color: <input type=”color” name=”color

</”input type=”submit>

نتیجه:

Date » واضح است که برای انتخاب یک تاریخ تعیین شده است که البته این قابلیت ها در html5 به چشم می خورد:

</”Date: <input type=”date” name=”date

</”input type=”submit>

Searche » این مقدار هم برای ایجاد یک فیلد جست و جو تعیین می شود این نوع فیلد ها مانند کادرهای متنی یک خطی نمایش داده می شود:

</”Search  yor name: <input type=”search” name=”search 

نتیجه:

بسیار خوب تا همینجا این پست رو نگه می داریم و ادامه را در جلسه آینده دنبال می کنیم در پست بعدی به ادامه مقادیری که برای صفت type در تگ input می پردازیم.

با تشکر از جزوات سودمند استاد احمد بادپی

تا پست بعدی خدا نگهدار