Űrlapok - Címkék. A <label> tag
Az <input> tagot bemutató oldalon szereplő példákban csak a rádió gombok illetve a jelölő négyzetek területe kattintható, a mellettük szereplő szöveg nem. A <label> tag segítségével egy logikai egységgé rendelhető össze az űrlap elem és a hozzá tartozó tájékoztató szöveg. A </label> zárótag használata is kötelező.
A következő példában látható kód olyan rádió gombokat hoz létre, amelyek a címke szövegére kattintva is kapcsolhatóak. Ebben az esetben a beviteli mezőt és a hozzá tartozó szöveget egy label elem tartalmazza.
Legmagasabb iskolai végzettség:<br>
<label>alapfokú<input type="radio" name="education"
value="elementary"></label><br>
<label>középfokú<input type="radio" name="education"
value="secondary" checked></label><br>
<label>felsőfokú<input type="radio" name="education"
value="higher"></label><br>
Ez így jelenik meg:
A <label> tag legfontosabb attribútuma a for, amelynek értéke annak az űrlap elemnek az azonosítója, amelyikhez a címke tartozik. Ezt használva a label elem csak a szöveget tartalmazza, ezért annak nem kell közvetlenül az űrlap elem előtt vagy után állnia, más HTML kódrészlet is lehet közöttük. Egy táblázatos űrlap elrendezés esetén, amennyiben az űrlap elem és a címke külön cellában helyezkedik el, csak ezzel a módszerrel rendelhető hozzá a szöveg a beviteli mezőhöz.
Példa:
Legmagasabb iskolai végzettség:<br>
<table>
<tr><td><label for="edu1">alapfokú</label></td>
<td><input type="radio" name="edu" id="edu1"
value="elementary"></td>
</tr>
<tr><td><label for="edu2">középfokú</label></td>
<td><input type="radio" name="edu" id="edu2"
value="secondary" checked></td>
</tr>
<tr><td><label for="edu3">felsőfokú</label></td>
<td><input type="radio" name="edu" id="edu3"
value="higher"></td>
</tr>
</table>
Ami a böngészőben a következőképpen néz ki: