فرم (form)
تگ «فرم (Form)» برای گرفتن ورودی کاربر است. فرم یعنی جایی که کاربر نام، ایمیل یا گزینه ها را می فرستد. سپس سرور آن را دریافت می کند و پاسخ می دهد. این تگ ظرف ورودی هاست؛ مثل جعبه پرسش نامه در مدرسه.
تعریف ساده و کاربرد اصلی
تگ فرم (form) یک فرم HTML می سازد. سپس داخلش ورودی ها می آیند؛ مثل input، textarea و button. همچنین با ویژگی ها می گوییم داده ها کجا و چگونه ارسال شوند.
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
ورودی ها داخل فرم
فرم می تواند ورودی های مختلف داشته باشد. سپس هرکدام نام دارند و مقدار می گیرند. در پایان با دکمه ارسال، داده ها فرستاده می شوند.
<form action="/action_page.php" method="get">
<input type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1">I have a bike</label><br>
<input type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label><br>
<input type="checkbox" name="vehicle3" value="Boat" checked>
<label for="vehicle3">I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
نمونه دکمه های رادیویی
دکمه رادیویی یک انتخاب از چند گزینه است. سپس فقط یکی فعال می شود.
<form action="/action_page.php" method="get">
<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" checked="checked">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
رفتار پیش فرض در مرورگرها
مرورگرها فرم را بلاک نشان می دهند. سپس بالایش فاصله اضافی ندارند. این پیش فرض را می توان با CSS تغییر داد.
form {
display: block;
margin-top: 0em;
}
گام های عملی ساخت فرم
- ابتدا تگ فرم را بساز.
- سپس method و action را تعیین کن.
- بعد ورودی ها و labelها را اضافه کن.
- در پایان دکمه ارسال را بگذار.
نکته: برای گروه بندی بخش ها از fieldset و عنوان آن از figcaption استفاده کن. برای لینک های پایین صفحه هم پاورقی (footer) مفید است.
برای تمرکز روی «فرم (form)»، این صفحه فرم (form) را نشانه گذاری کن تا همیشه دم دست باشد.
جمع بندی سریع
- فرم ظرف ورودی هاست.
- method و action مسیر ارسال اند.
- checkbox چند انتخاب می دهد.
- radio فقط یک انتخاب می دهد.
- CSS ظاهر فرم را می سازد.