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

حالا دقیقا همین فرمها با همین هدف تو محیط وب اومدن و اسمون شده وب فرم (Web form).

وب فرم ها مخلوطی از دکمه ها ، Check box ها و  Input field ها و… هستند که همگی یک هدف دارن: اطلاعاتی از کاربر بگیرن و برای پردازش اطلاعات دریافت شده اونها رو به سرور بفرستن.

ایجاد فرم در HTML

برای ساخت فرم در HTML از تگ <form> استفاده میکینم و المنت های که نیاز داریم رو داخل این المنت قرار میدیم و در نهایت دکمه submit رو به فرم اضافه میکنیم تا اطلاعات فرستاده بشن.

المنت Input

یکی از مهمترین المنتهای فرم این المنت هست چون انواع مختلفی داره و با استفاده مشخصه type میشه نوع اون از جمله button،text،password،checkbox،hidden و… رو تعریف کرد که تقریبا تمام چیزهایی که ما نیاز داریم رو داره. در ادامه انواع input ها رو معرفی میکنیم.

Text fields

این نوع ، یک کادر متن تک خطی برای ورود رشته ها ایجاد میکنه. برای اینکار باید مقدار مشخصه type رو برابر text قرار بدید.

مثال

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

خروجی:

Password fields

این نوع ، یک کادر متن تک خطی برای ورود پسورد ایجاد میکنه. برای اینکار باید مقدار مشخصه type رو برابر password قرار بدید. وقتی از این نوع input استفاده میکنید بجای پسورد وارد شده نقطه نمایش داده میشه.

مثال

<form>
Password: <input type="password" name="pwd" value="123456" />
</form>

خروجی:

Radio Buttons

این نوع ، یک دکمه رادیویی ایجاد میکنه. برای اینکار باید مقدار مشخصه type رو برابر radio قرار بدید.

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

 مثال

<form>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female
</form>

خروجی:

Checkboxes

این نوع ، یک چک باکس ایجاد میکنه. برای اینکار باید مقدار مشخصه type رو برابر checkbox قرار بدید. وقتی از این استفاده میکنیم کاربر میتونه همه یا هیچ کدوم از چک باکسها رو انتخاب کنه.

مثال

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

خروجی:

Submit Button

این نوع ، یک دکمه submit ایجاد میکنه. برای اینکار باید مقدار مشخصه type رو برابر submit قرار بدید.

از این دکمه برای شروع ارسال اطلاعات فرم به سرور استفاده میشه. وقتی دکمه زده شد اطلاعات به فایل و با متدی که از قبل تو تگ <form> تعیین شده ارسال میشه.

مثال

<form name="mainform" action="process.php" method="post">
Username: <input type="text" name="user" /><br/>
Password: <input type="password" name="pwd" />
<input type="submit" value="Submit">
</form>

خروجی: