برچسب (label)
تگ «برچسب (label)» متن توضیح برای ورودی هاست. «ورودی (Input)» یعنی جایی که کاربر می نویسد یا انتخاب می کند. با برچسب، دسترسی بهتر می شود و کلیک روی متن هم ورودی را فعال می کند.
تعریف برچسب فرم
طبق منبع، <label> برای توصیف ورودی های فرم است. این تگ برای checkbox، radio، text، select، textarea و موارد مشابه کاربرد دارد.
مثال: سه گزینه رادیویی با برچسب
<form action="/action_page.php">
<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>
<br />
<br />
<input type="submit" value="Submit" />
</form>
بستن برچسب به ورودی
برای اتصال، مقدار ویژگی «for» باید برابر id ورودی باشد. همچنین می توان ورودی را داخل خود <label> قرار داد.
<label for="email">ایمیل</label>
<input id="email" type="email" />
<br />
<label>
نام کاربری
<input type="text" />
</label>
دسترسی و تجربه کاربری
برچسب فرم برای خواندن توسط صفحه خوان ها ضروری است. همچنین ناحیه کلیک را بزرگ تر می کند و استفاده آسان تر می شود.
نمای پیش فرض و CSS
مرورگرها معمولاً نشانگر پیش فرض برای برچسب می گذارند.
<style>
label {
cursor: default;
}
</style>
گام های تمرینی برچسب فرم
- برای هر ورودی، یک برچسب بنویس.
- id یکتا برای ورودی بگذار.
- ویژگی for را برابر همان id کن.
لینک های تکمیلی داخلی
درباره برچسب فرم کنار ورودی ها بیشتر بخوان. همچنین صفحات textarea و select را ببین.
جمع بندی سریع
- برچسب فرم فهم ورودی را آسان می کند.
- ویژگی for با id باید برابر باشد.
- می توان ورودی را داخل label گذاشت.
- برچسب به دسترسی بسیار کمک می کند.