آموزش تگ label در HTML

7 شهریور 1401
ارسال شده توسط
آموزش html css

آموزش تگ label در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ label در HTML به صورت کامل آشنا بشید.

تگ label در HTML

تگ label تگی است که میتوانیم در صورت استفاده از آن یک برچسب برای تگ اینپوت خود قرار دهیم. کاربرد این تگ بدین شکل است که در صورت قراردادن آن مشخص میکنیم که کاربر در بخش اینپوت چه چیزی را باید وارد کند. برای اینکه برای تگ Input خود یه تگ label قرار دهیم ابتدا باید یک آیدی برای تگ اینپوت مان قرار دهیم و بعد همان آیدی را در تگ لیبل فراخوانی کنیم تا در نتیجه ی راین کار این دو تگ به هم دیگر متصل گردند. در صورت عدم انجام این کار تگ های input , label هم دیگه رو نمیتوانند شناسایی کنند.

دو مثال برای تگ label در HTML

در ادامه دوره آموزشی HTML CSS پروژه محور به چند تا مثال های تگ label توجه فرمایید.

مثال اول : استفاده کردن از صفت for در تگ label

<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

<body>
    <form action="#" method="POST" id="MyForm">
      <input type="radio" name="gender" id="male"><br>
    </form> 
    <label for="male" form="MyForm">مرد</label>
</body>

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید

پشتیبانی مرورگرها از تگ label

در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ label در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…

پشتیبانی مرورگر هار از تگ table

جدول صفات تگ label در HTML

جدول زیر به شما کمک میکند تا صفات تگ label را به همراه مقادیری را که میتوانیم در این تگ استفاده کنیم را مشاهده نمایید.

جدول صفات تگ <code class=

پشتیبانی تگ label از صفات و رویدادهای عمومی

تگ label قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

نکات و توضیحات

  • حتما به این نکته دقت داشته باشید که باید ID درون تگ Input با ID که درون صفت For وجود دارد همانند دستورات زیر یکسان باشند. 
        <label for="Mard">مرد</label>
    <input type="radio" id="Mard">

دستورات CSS پیش فرض

اغلب مرورگر ها تگ label را با کد هایی CSS بصورت زیر نمایش میدهند که این کد ها حالت پیش فرض این تگ میباشد.

label {
  cursor: default;
}
برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید