Tag label

Tag label definuje štítek pro vstupní pole typu input, textarea, select a tak dále.

Štítek je připojen k určitému vstupnímu poli pomocí atributu for. V něm by měla být uvedena hodnota atributu id vstupního pole, ke kterému je štítek připojen. Také je štítek připojen k elementu, pokud je tento element umístěn uvnitř tagu label. V tomto případě není nutné uvádět atribut for. Podívejte se na příklady pro lepší pochopení.

Kliknutím na štítek se připojená zaškrtávací políčka nebo přepínače změní svůj stav z zaškrtnutého na nezaškrtnuté a naopak. Štítek je v tomto případě určen pro pohodlí: do malých prvků formuláře je těžké trefit kurzorem, zatímco do dlouhého štítku s textem - mnohem snadněji.

Připojené textové vstupní pole typu input a textarea získá vstupní fokus. Fokus - je když kurzor bliká ve vstupním poli, v tomto případě, pokud budete něco psát na klávesnici - text se dostane do tohoto pole (viz. pseudotřída focus pro pokročilé pochopení fokusu).

Štítek label lze použít pro imitu zaškrtávacího políčka nebo přepínače. To je potřeba, aby bylo možné vytvořit checkbox nebo radio s vlastním designem (což v CSS není povoleno, ale pomocí chytrých triků je to možné).

Atributy

Atribut	Popis
for	V tomto atributu by měla být uvedena hodnota atributu id toho vstupního pole, ke kterému je připojen štítek label.
accesskey	Nastavuje klávesovou zkratku, pomocí které lze přejít k prvku formuláře připojenému ke štítku (pomocí atributu for). Více viz. atribut accesskey.

Příklad . Zaškrtávací políčko

Připojme k zaškrtávacímu políčku checkbox štítek pomocí atributu for. Klikněte na štítek a uvidíte změnu stavu zaškrtávacího políčka z zaškrtnutého na nezaškrtnuté a naopak:

:

Příklad . Uvnitř label

A nyní nepřipojíme štítek přes atribut for, ale vložíme prvky přímo do tagu label, v tomto případě kliknutím na text label také aktivujeme prvek:

:

Příklad . Textové vstupní pole

Připojme k tagu input štítek pomocí atributu for. Kliknutí na štítek povede k získání fokusu vstupním polem. Přitom obsažený text v poli (přidáme pomocí atributu value) bude zvýrazněn. Pokud začnete něco psát na klávesnici - tento text se smaže. Zbavit se zvýraznění, aniž byste přitom smazali text, lze kliknutím myší na vstupní pole: fokus při tom nezmizí, ale zvýraznění zmizí:

:

Viz také