این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ label در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ label در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Label در HTML
تگ label همونطور که از اسمش هم مشخصه، با استفاده از اون میتونیم برای اینپوت هامون یک برچسب یا لیبل ( یا یه متن برای عنوان یا شناسایی ) مشخص نماییم.
وقتی برای یک Input میخوایم Label تعریف کنیم، باید اول یه ID برای Input مون مشخص کنیم بعدش همون id رو داخل تگ Label قرار بدیم تا بهمدیگه وصل بشن.
Free-Learn
مثال از تگ label در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از صفت for در تگ label
|
1 2 3 4 5 6 7 8 9 |
<body> <form action="files/get_data.php" method="POST"> <label for="UserName">نام شما : </label> <input type="text" name="myname" id="UserName"> <input type="submit" value="ارسال"> </form> </body> |
مثال شماره ۲ : استفاده از صفت form در تگ label
|
1 2 3 4 5 |
<form action="#" method="POST" id="MyForm"> <input type="radio" name="gender" id="male"><br> </form> <label for="male" form="MyForm">مرد</label> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ label در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ label در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| for | Tag_ID | مشخص کردن یک ID برای وصل کردن Input به Label |
| form | Form_ID | مشخص میکند که Label متعلق به کدام فرم می باشد |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ label از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- یادتون باشه باید ID که درون Input می باشد با ID که درون صفت For هست یکی باشه. (همانند دستورات زیر)
|
1 2 |
<label for="Mard">مرد</label> <input type="radio" id="Mard"> |
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ label را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
label { cursor: default; } |
