فرم ها در html

در سلسله آموزشهای طراحی سایت آنلاینر به لیست های تودرتو به همراه لینکها و تصاویر پرداختیم.

در این مقاله قصد بررسی فرم ها در html را داریم.

مطمئنا گاهی نیاز پیدا می کنید که صفحه ای حاوی فرمی را طراحی کنید، حال این فرم ممکن است فرم تماس یا فرم استخدام با 15 فیلد ورودی مختلف باشد. در این مقاله قصد داریم نحوه ایجاد فرم ها را در صفحه وب آموزش دهیم.

تگ form

این تگ نشان دهنده یک فرم است ، بدین معنی که هر دکمه یا فیلد ورودی که مربوط به یکدیگر هستند و اطلاعات آنها به یکدیگر مربوط می شود را در یک تگ فرم قرار می دهیم.

بعنوان مثال می خواهیم فرمی شامل نام ، نام خانوادگی و ایمیل را ایجاد نماییم. به ذستور زیر دقت کنید :

[html]
<form action="#" method="get">
<label>نام :</label><br />
<input type="text" name="first" /><br />
<label>نام خانوادگی :</label><br />
<input type="text" name="last" /><br />
<label>ایمیل :</label><br />
<input type="text" name="Email" /><br />
<input type="submit" value="ارسال" />
</form>
[/html]

خروجی این تکه کد بصورت زیر خواهد بود :

تگ input

برای درج یک عامل ورودی اعم از تکست باکس، دکمه رادیویی، چک باکس, دکمه و غیره در فرم مورد نظرتان از تگ input استفاده می کنیم.

قالب کلی تگ input  بصورت زیر می باشد:

[html]
<form action="#">
<input type="نوع ورودی" name="نام عامل" value="مقدار عامل" />
</form>
[/html]

نوع ورودی بسته به نیاز  شما می تواند یکی از ورودی های زیر باشد :

1. button
2. checkbox
3. color
4. date
5. email
6. file
7. hidden
8. image
9. month
10. number
11. password
12. radio
13. reset
14. range
15. submit
16. time
17. url
18. week
19. tel
20. datetime-local

نکته: دقت داشته باشید که در نام گذاری های ورودی ها، نام آنها باید یکتا باشد. در غیر این صورت ممکن است نتیجه درست را از صفحه وبتان دریافت نکنید.

صفتی با نام action در تگ form آدرس صفحه مقصد را تعیین می کند. آدرس صفحه مقصد آدرسی است که می خواهید اطلاعات فرم شما به آن صفحه وب ارسال شود.

صفت method نحوه ارسال اطلاعات فرم به صفحه وب دیگر را مشخص می کند. این صفت دارای دو مقدار post و get است که نحوه ارسال اطلاعات در این دو حالت کمی با  یکدیگر متفاوت است. در روش ارسال get مقادیر ارسالی به صفحه دیگر از طریق url منتقل می شود. با توجه به مسیر انتقالی اطلاعات، این روش امنیت بسیار پایینی در انتقال اطلاعات دارد ولی در روش post انتقال اطلاعات از طریق url انجام نمی شود به همین دلیل امنیت آن نسبت به روش get بالاتر است. این روشی مناسب برای ارسال اطلاعاتی نظیر کلمه کاربری و یا رمز عبور می باشد.

مثال زیر نحوه استفاده از تمام انواع ورودی را در یک فرم نشان می دهد:

[html]
<form action="#">رنگ مورد علاقه خود را انتخاب نمایید: <input type="color" name="favcolor" />

تاریخ تولد: <input type="date" name="bday" />

تاریخ تولد(تاریخ و زمان): <input type="datetime" name="bdaytime" />

تاریخ تولد(تاریخ و زمان): <input type="datetime-local" name="bdaytime" />

ایمیل: <input type="email" name="email" />

تاریخ تولد(ماه و سال): <input type="month" name="bdaymonth" />

ظرفیت (بین 1 تا 5): <input type="number" name="quantity" />

<input type="range" name="points" />

جستجوی گوگل: <input type="search" name="googlesearch" />

تلفن: <input type="tel" name="usrtel" />

انتخاب زمان: <input type="time" name="usr_time" />

آدرس صفحه را وارد کنید: <input type="url" name="homepage" />

انتخاب هفته: <input type="week" name="week_year" /></form>
[/html]

در آموزش بعد به معرفی کامل Checkbox, radio, select-option, textarea می پردازیم.

با آنلاینر همراه شوید …