فرم ها (Forms)
فرم HTML برای گرفتن ورودی کاربر است. «فرم (Form)» یعنی جعبه ای با فیلدها که داده ها را به سرور می فرستد. مثل برگه ثبت نام مدرسه؛ فقط آنلاین.
عنصر فرم <form>
تگ <form> ظرف همه کنترل هاست. کنترل یعنی المان ورودی مثل text، radio، checkbox و دکمه ارسال.
<form>
<!-- form elements -->
</form>
فیلد متنی (Text)
نوع text یک خط ورودی می دهد. برای نام ها عالی است.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
دکمه رادیویی (Radio)
radio یعنی انتخاب فقط یکی از چند گزینه. مثل انتخاب زبان برتر.
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
چک باکس ها (Checkbox)
checkbox یعنی انتخاب چندتایی. مثل وسایل نقلیه ای که داری.
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3">I have a boat</label>
</form>
دکمه ارسال (Submit)
submit داده ها را به «پردازشگر فرم (Form-handler)» در آدرس action می فرستد.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
ویژگی name برای <input>
بدون name هیچ مقداری ارسال نمی شود. همیشه name را تنظیم کن.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
نکته: برچسب <label> با ویژگی for به id ورودی وصل می شود. این کار دسترسی پذیری را بهتر می کند.
جمع بندی سریع
- <form> ظرف همه ورودی هاست.
- text برای متن یک خطی است.
- radio یکی را انتخاب می کند.
- checkbox چندتا را انتخاب می کند.
- submit داده را به action می فرستد.