آموزش تگ label در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ label در HTML با من همراه باشید.
Free-Learn
تگ Label در HTML
تگ label تگی است که معمولا درون تگ <form> جهت ایجاد یک (لیبل) یا (Label) یا برچسب برای یک تگ مورد استفاده قرار میگیرد.
بطور کلی این تگ ظاهری ندارد ( یعنی در مرورگرها هیچ حالت ظاهری یا بصری ندارد ) ولی از نظر ارتباط عناصر با همدیگر میتواند استفاده مفیدی داشته باشد.
در تگ Label یک صفت بنام For قرار میگیرد که مقدار این صفت یک ID یا یک شناسه می باشد که این شناسه دقیقا باید با ID عنصر مرتبط با تگ Label یکسان باشد.
Free-Learn
مثال از تگ label در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <form action="files/test.php"> <label for="male">Male</label> <input type="radio" name="jensiyat" id="male" value="مرد"><br> <label for="female">Female</label> <input type="radio" name="jensiyat" id="female" value="زن"><br><br> <input type="submit" value="ارسال"> </form> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ label در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ label در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
(علامت 
یعنی در HTML5 اضافه شده است)
| نام صفت | مقدار | توضیح |
|---|---|---|
| for | element_id | مشخص میکند که یک برچسب متعلق به کدام عنصر (تگ) می باشد. |
| form | form_id | نام (id) تگی ، که میگوید این برچسب متعلق به آن می باشد. () |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ label از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
توجه داشته باشید که حتما باید ID که درون یک عنصر می باشد با ID که درون صفت FOR می باشد یکسان باشد. (همانند دستورات زیر)
|
1 2 |
<label for="male">مرد</label> <input type="radio" id="male"> |
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ label را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
label { cursor: default; } |
