HTML <label> etikett
Definition och användning
<label>
Etiketten definierar en etikett (märkning) för input-elementet.
label-elementet visar inte några speciella effekter för användare. Det förbättrar emellertid användbarheten för musanvändare. Om du klickar på texten inom label-elementet, aktiveras detta kontroll. Det innebär att när användaren väljer denna etikett, flyttar webbläsaren automatiskt fokus till den relaterade formulärkontrollen.
<label>
Etikettens for-attribut Den bör vara samma som relaterade elements id-attribut.
<label>
Etiketten kan definiera etiketter (märken) för flera element:
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <meter>
- <progress>
- <select>
- <textarea>
Att använda elementen och etiketterna på rätt sätt kommer att vara till nytta för följande användare:
- Skärmsläpparanvändare (när användaren fokuserar på ett element, läser upp etiketten)
- Användare som har svårt att klicka på mycket små områden (t.ex. kryssrutor) - eftersom när användaren klickar
<label>
När texten i elementet byts ut, aktiveras inmatningen (detta ökar klickområdet)
Se också:
HTML DOM-referenshandbok:Label-objekt
Exempel
Tre enskilda radioalternativ med label:
<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="Skicka"> </form>
Tips och kommentarer
Tips:<label>
For-attributet måste vara lika med id-attributet på det relaterade elementet för att kunna binda dem samman. Det är också möjligt att placera elementet i <label>
Elementet länkar etiketten till elementet inuti.
Egenskap
Egenskap | Värde | Beskrivning |
---|---|---|
for | Element id | Definierar till vilket formulärelement label är bunden. |
form | Formulär id | Definierar vilken formulär som label-fältet tillhör. |
Globala egenskaper
<label>
Etiketten stöder också Globala egenskaper i HTML。
evenementegenskaper
<label>
Etiketten stöder också Evenementegenskaper i HTML。
Standard CSS-inställningar
De flesta webbläsare kommer att använda följande standardvärden för att visa <label>
Element:
label { cursor: default; }
Webbläsarstöd
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Stöd | Stöd | Stöd | Stöd | Stöd |