HTML značka <label>
Příklad
Tři přepínače se štítky:
<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>
Definice a použití
Značka <label>definuje štítek pro několik prvků:
- <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">
- <metr>
- <pokrok>
- <vybrat>
- <textarea>
Správné používání štítků s výše uvedenými prvky prospěje:
- Uživatelé čtečky obrazovky (když se uživatel soustředí na prvek, přečtou nahlas štítek)
- Uživatelé, kteří mají potíže s klikáním na velmi malé oblasti (jako jsou zaškrtávací políčka) – protože když uživatel klikne na text v
<label>prvku, přepne vstup (tím se zvětší oblast zásahu).
Tipy a poznámky
Tip: Atribut for <label>
musí být roven atributu id souvisejícího prvku, aby byly spojeny. Štítek lze také svázat s prvkem umístěním prvku dovnitř <label>prvku.
Podpora prohlížeče
| Element | |||||
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |
Atributy
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the id of the form element the label should be bound to |
| form | form_id | Specifies which form the label belongs to |
Globální atributy
Značka <label>také podporuje globální atributy v HTML .
Atributy události
Značka <label>také podporuje atributy událostí v HTML .
Související stránky
HTML DOM reference: Label Object
Výchozí nastavení CSS
Většina prohlížečů zobrazí <label>prvek s následujícími výchozími hodnotami:
Příklad
label {
cursor: default;
}