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

فرم ها می توانند شامل فیلد های ورودی متنی، دکمه ها، دکمه های قابل انتخاب، دکمه های چند انتخابی یا رادیو و… باشد.

ابتدا به توضیح فرم و سپس اجزای آن می پردازیم:

فرم ها:

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

 

همان طور که می بینید این عنصر شامل دو ویژگی مهم است:

Action:

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

در زیر مثالی از مقداردهی این عنصر می بینید:

 

Method:

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

get: با تنظیم ویژگی method بر روی این مقدار اطلاعات دریافت شده در محل آدرس – URL – مرورگر نمایش داده می شود. کاربران می توانند مقادیر فیلدها را در محل آدرس مرورگر به صورت دستی آن را تایپ کنند. در شکل زیر نمونه ای از آن را می بینید:

کار با فرم ها در HTML

استفاده از مقدار get برای ویژگی method

همچنین شما می توانید مقادیر را فارسی وارد کنید. Html در هیچ جا با زبان فارسی مشکل ندارد:

استفاده از مقادیر فارسی در url ها

استفاده از مقادیر فارسی در url ها

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

Post: اما این مقدار، اطلاعات دریافتی را از دیدگاه کاربر مخفی می کند. همچنین کاربر نمی تواند مقادیر فیلدها را در مرورگر به صورت دستی وارد کند. اگر تصویر زیر را با تصویر بالا مقایسه کنید می توانید تغییر را درک کنید:

استفاده از مقدار post برای ویژگی method

استفاده از مقدار post برای ویژگی method

ورودی ها (Input):

آشنایی با تگ <input>:

تمام فیلدهای ورودی که در خروجی نمایش داده می شود و می خواهند به سرور ارسال شوند به این تگ مربوط هستند. شکل کلی آن به صورت زیر است:

 

توجه کنید که عناصر input باید در بین تگ های فرم قرار گیرند؛ در غیر این صورت اطلاعات به سرور ارسال نخواهند شد. همچنین ممکن است شما در صفحه ی خود بیش از یک فرم داشته باشید. برای مثال می توان برای ورود کاربران و مدیران سایت دو فرم جدا مشخص کرد.

Type:

به طور مفصل درباره ی آن صحبت خواهد شد.

Name: نام ورودی را مشخص می کند:
آشنایی با ویژگی name در input ها

آشنایی با ویژگی name در input ها

در این تصویر دو ورودی وجود دارد با نام های first_name و last_name که مقادیر مختلفی دارند. در سرور مقادیر با اسنفاده از نام آن ها واکشی می شوند. نام ورودی ها در خروجی نمایش داده نمی شوند.

Value:

مقادیری که کاربر وارد می کند را برای نام ورودی مشخص می کند:

دو ورودی first_name و last_name دارای مقادیر مشخص شده در بالا هستند که کاربر وارد کرده است. این ویژگی می تواند به طور پیشفرض مقداردهی شود.

Dir:

این ویژگی پیش تر توضیح داده شده است و راست به چپ بودن یا چپ به راست بودن را تنظیم می کند. اگر شما می خواهید سایتی فارسی داشته باشید همیشه این مقدار را روی rtl تنظیم کنید.

Maxlength:

برای عناصر متنی مانند ایمیل، نام و نام خانوادگی، وب سایت، فیلد جست و جو و… می توانید حداکثر تعداد حروف مقدار ورودی را تنظیم کنید تا از مقدار خاصی بیشتر نشود و آن را استاندارد سازی کنید. ورودی این مقدار یک عدد طبیعی است.

Autocomplete:

حتما تا به حال برای شما پیش آمده که هنگام ورود اطلاعات در سایتی فیلد متنی شما هنگام وارد کردن ابتدای عبارت برای انتخاب مقادیری که قبلا وارد کرده اید به شما پیشنهاد می دهد. این امکان در html5 افزوده شده است. ورودی های ممکن در زیر آمده است:

On: روشن

Off: خاموش

همچنین مثالی از آن را در زیر مشاهده می کنید:

مثالی از کاربرد ویژگی autocomplete در input ها

مثالی از کاربرد ویژگی autocomplete در input ها

 

Placeholder:

این ویژگی نیز جزء امکانات html5 است. این متن خیلی از اوقات می تواند نقش عبارت کناری فیلد متنی شما را داشته باشد. به شکل زیر دقت کنید:

استفاده از ویژگی placeholder در input ها

استفاده از ویژگی placeholder در input ها

این تصویر را با تصویر ابتدایی این صفحه مقایسه کنید. مشاهده می کنید که کار ما را بسیار ساده کرده است. این متن هنگام ورود اولین کاراکتر ناپدید می شود.

Disabled:

این ویژگی دسترسی به عنصر را قطع می کند و کاربر قادر به وارد کردن اطلاعات و یا انتخاب عنصر نمی باشد:

استفاده از ویژگی disabled در input ها

استفاده از ویژگی disabled در input ها

در تصویر بالا فیلد دوم که برای دریافت نام خانوادگی است غیر قابل دسترس برای کاربران است و دارای ویژگی disabled می باشد. مقدار این عنصر تنها می تواند شامل مفدار disabled باشد و فقط هنگامی که این عنصر باشد فیلد در خروجی غیر فعال می باشد. در زیر کد تصویر فوق را می بینید:

 

ورودی های Type:

ممکن است برخی صفات برای عنصر <input> تنها برای برخی type های مختلف وجود داشته باشد که در بالا به آن اشاره نشده است. صفات مخصوص هر مقدار type در ادامه توضیح داده می شود.

Submit:

این مقدار از ویژگی type برای ارسال اطلاعات فرم به آدرس ویژگی action می باشد. مقدار ویژگی name آن برای تشخیص ارسال و یا عدم ارسال فرم در سرور استفاده می شود. ویژگی value متن جهت نمایش در خروجی را تنظیم می کند.

 

که خروجی آن به شکل زیر است:

استفاده از submit ها در فرم ها

مثالی از ورودی های با نوع submit

مقادیر فرم ها با استفاده از عناصر زیر به سرور ارسال می شوند. عناصری که برای دریافت نام، ایمیل، رمز عبور و … استفاده می شود. در ادامه به توضح هریک می پردازیم.

Text:

این مقدار برای دریافت ورودی های متنی مانند نام افراد یا هرچیز دیگری که جزء مقادیر دیگر ویژگی type نباشد، می باشد.

در مثال های بالا برای دریافت نام و نام خانوادگی از این فیلد استفاده شده است.

Password:

از این مقدار type در سایت ها زیاد استفاده می شود. این مقدار برای دریافت رمز عبور استفاده می شود و کاراکتر های ورودی را با علامت ستاره (*) نشان می دهد:

استفاده از ورودی های password در فرم ها

استفاده از ورودی های password در فرم ها

کد تصویر بالا به صورت زیر است:

 

Checkbox:

برای انتخاب و یا عدم انتخاب یک مقدار می باشد. این مقدار برای کاربر فقط دو حالت دارد. انتخاب و عدم انتخاب:

مثالی از استفاده checkbox در فرم ها

مثالی از استفاده checkbox ها در فرم ها

که کد آن به شکل زیر است:

 

همانطور که می بینید عنصر input ویژگیی برای انتخاب متن خروجی ندارد و این متن باید جدا از عنصر input باشد. در بالا این متن در عنصر span، به شکلی که می بینید قرار گرفته است. اما بطور معمول برای ckeckbox ها و radio button ها از label برای ایجاد توضیحات استفاده می کنند.

اگر این عنصرانتخاب نشود هیچ مقداری در فرم ارسال نمی شود. تفاوت انتخاب و عدم انتخاب را در زیر می بینید:

انتخاب عنصر:

انتخاب checkbox ها

مثالی از انتخاب checkbox موردنظر

عدم انتخاب:

مثالی از عدم انتخاب checkbox در فرم

مثالی از عدم انتخاب checkbox در فرم

توجه: هیچ گاه فرمی که دارای فیلدی برای رمز عبور می باشد را با مقدار get برای ویژگی method در عنصر form ارسال نکنید زیرا همانطور که می بینید در قسمت آدرس مرورگر رمز عبور نمایش داده می شود :D. در این جا این عمل تنها نقش آموزشی دارد!!!!!!!!! =))

اگر می خواهید فیلد شما به طور پیشفرض انتخاب شده باشد می توانید ویژگی checked با مقدارchecked را تنظیم کنید به صورتی که کد بالا به شکل زیر تغییر کند:

 

Radio:

همانطور که مشاهده کردید در checkbox تنها می توان 2 انتخاب داشت اما مقدار دیگری برای type وجود دارد که امکان انتخاب چند مورد را دارد. این radio است که به شما این امکان را می دهد:

استفاده از radio ها در فرم

استفاده از radio ها در فرم

کد تصویر فوق به صورت زیر است:

 

این عنصر نیز دارای ویژگی checked است که تنها یکی از موارد موجود را انتخاب می کند:

استفاده از radio ها انتخاب شده در فرم ها

استفاده از radio ها انتخاب شده در فرم ها

و کد بالا به صورت زیر تغییر می کند:

 

اما اگر این ویژگی را به چند عنصر نسبت دهید آخرین مورد انتخاب می شود.

همانطور که در بالا مشاهده کردید، ویژگی name از این عناصر یکی است و تنها مقدار (value) آن ها متفاوت است. با استفاده از این کار می توان مقدار ارسالی توسط فرم را در سرور تشخیص داد.

Select:

اگر موارد مورد نظر برای انتخاب بیش از 4 – 5 مورد باشد می توان از این عنصر استفاده نمود اما این استاندار خاصی نیست و کاملا سلیقه ای است. البته این مورد جزء مقادیر ویژگی type و در عنصر input قرار ندارد و یک عنصر جداست. اما جا دارد که در این قسمت به آن بپردازیم. برای شروع باید از تگ <select> استفاده کرد و هر گزینه را با یک تگ <option> تعریف می کنیم. در زیر شکل کلی آن را می بینید:

 

همچنین مثالی از آن را هم در این جا می بینید:

 

که خروجی آن به شکل زیر است:

استفاده از عنصر select در فرم ها

استفاده از عنصر select در فرم ها

همچنین می توان برای هر چند گزینه یک سرگروه انتخاب کرد که خود سرگروه قابل انتخاب نیست. سرگروه ها با تگ <optgroup> نوشته می شوند و متن خروجی سرگروه با ویژگی label نام گذاری می شود:

 

خروجی کد بالا به شکل زیر است:

 

استفاده از optgroup در select ها

استفاده از optgroup در select ها

Hidden:

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

Textarea:

گاهی اوقات نیز نیاز است تا چندین خط نوشته را ارسال کرد. مثلا در فرم نظر دهی یک سایت یا نوشتن یک پیغام. در این زمان textarea به کمک ما می آید. این عنصر نیز جزء مقادیر input نیست و به تنهایی یک عنصر است اما مانند فیلد های input با فرم ارسال می شود. این عنصر شامل دو ویژگی cols و rows است که به ترتیب تعداد ستون ها و ردیف های این عنصر را تعیین می کند. منظور از ستون ها تعداد حروفی است که در یک خط می تواند جای گیرد.

ویژگی مهم دیگری که در textarea زیاد استفاده می شود و اهمیت زیادی دارد dir است که پیش از این توضیحات داده شده است. شکل کلی این عنصر به شکل زیر است:

 

و مثالی از آن به این صورت است:

 

و خروجی آن به شکل زیر است:

استفاده از textarea در فرم ها

استفاده از textarea در فرم ها

همچنین می توان مقدار پیشفرضی را برای textarea تنظیم کرد که باید بین دو تگ شروع و پایان آن را نوشت.

File:

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

 

خروجی:

انتخاب و ارسال فایل به سرور توسط file input

انتخاب و ارسال فایل به سرور توسط file input

Button:

این مقدار نیز یک دکمه مانند submit تعریف می کند اما فرم را ارسال نمی کند.

Reset:

این مقدار نیز یک دکمه تعریف می کند که تمام محتویات و اطلاعات و مقادیر وارد شده توسط کاربر را به حالت پیشفرض بر می گرداند و اگر هیچ مقداری برای عناصر فرم از پیش تعیین نشده باشد، تمام اطلاعات وارد شده پاک می شود.

Email:

در سایت ها معمولا در مواقع زیادی لازم به دریافت ایمیل کاربران است. این مقدار برای ویژگی type از عنصر input تنها ایمیل را دریافت می کند و اگر کاربر ایمیل نامعتبری وارد کند اجازه ارسال فرم داده نمی شود:

مثالی از استفاده email در ورودی ها

مثالی از استفاده email در ورودی ها

که کد آن به شکل زیر است:

 

تشخیص ایمیل معتبر با استفاده از کاراکتر @ می باشد.

url:

برای ورود نام آدرس های اینترنتی مثلا ورود نام وب سایت در فرم نظرخواهی سایت. اگر در نام url کلمه ی http یافت نشود، مانند ایمیل اجازه ی ارسال فرم داده نمی شود:

استفاده از url در input ها

استفاده از url در input ها

کد:

 

Search:

استفاده برای ورودی های جست و جو در سایت

Date:

دریافت ورودی های تاریخ مانند تاریخ تولد کاربران:

استفاده از date input در فرم ها

استفاده از date input در فرم ها

می بینید که به دو صورت دستی و انتخاب از تقویم می توان مقدار را وارد کرد. در بالا باید سه مقدار را وارد کرد:

mm: ماه (month) – از 01 تا 12

dd: روز (day) – از 01 تا 31

yyyy: سال (year)

کد تصویر بالا به صورت زیر است:

 

Time:

این مقدار نیز برای دریافت زمان است:

استفاده از time input در فرم ها

استفاده از time input در فرم ها

کد:

 

که شامل سه قسمت است: am یا pm – دقیقه : ساعت

datetime-local:

شامل هر دو مقدار date و time است که به شکل زیر می باشد:

دریافت ساعت و تاریخ توسط datetime-local

دریافت ساعت و تاریخ توسط datetime-local

Month:

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

دریافت ماه موردنظر توسط مقدار month

دریافت ماه موردنظر توسط مقدار month

Week:

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

دریافت یک هفته خاص توسط مقدار week

دریافت یک هفته خاص توسط مقدار week

Color:

برای انتخاب رنگ استفاده می شود که با انتخاب رنگ شماره آن برگردانده می شود:

دریافت یک رنگ توسط مقدار color در input ها

دریافت یک رنگ توسط مقدار color در input ها

کد:

 

number:

برای انتخاب محدوده ای از اعداد استفاده می شود. مثلا برای وارد کردن سن کاربر می توان از آن استفاده کرد. برای این مقدار از type در عنصر input می توان دو ویژگی min و max را برای عنصر input اعمال کرد که به ترتیب کم ترین و بیش ترین مقداری است که می تواند کاربر وارد کند. همچنین ویژگی step را می توان تعریف کرد که فاصله میان بالا یا پایین کردن مقدار توسط فلش های کنار فیلد را تنظیم می کند. شکل کلی آن به شکل زیر است:

 

که اگر کد مثال فوق را بنویسیم کد آن به این شکل می شود:

 

عنصر step برای سهول در استفاده از این فیلد است چرا که مثلا در همین مثال تفاوت میان 18 و 100 زیاد است و اگر کاربر بخواهد با فلش های کنار فیلد مقدار عددی را تغییر دهد زمان زیادی را نیاز دارد اما با تنظیم مقدار step روی 3 این عمل راحت تر خواهد بود و اگر مثلا عدد بر روی 50 باشد با یک بار زدن قلش بالا این عدد به 53 تغییر می کند.

خروجی کد فوق به شکل زیر است که مقداری کم تر از 18 و بیش تر از 100 را نمی توان وارد کرد:

استفاده از range در input ها

استفاده از range در input ها

Range:

این مقدار نیز همچون number است با تفاوت در شکل ظاهری آن. خروجی آن به شکل زیر است:

استفاده از range در input ها

استفاده از range در input ها

که کد آن هم به این شکل است:

 

Tel:

برای دریافت ورودی های شماره تلفن