فرم ها در HTML

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

تگ form

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

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

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

خروجی :

تگ input

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

<input type="نوع ورودی" name="نام عامل"  value="مقدار عامل"/>

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

۱- button
۲- checkbox
۳- color
۴- date
۵- email
۶- file
۷- hidden
۸- image
۹- month
۱۰- number
۱۱- password
۱۲- radio
۱۳- reset
۱۴- range
۱۵- submit
۱۶- time
۱۷- url
۱۸- week
۱۹- tel
۲۰- datetime-local

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

صفت action در تگ form

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

صفت method در تگ form

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

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

<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">

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

<input type="range" name="points" min="1" max="10">

جستجوی گوگل: <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>

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

Loading...