Select - Český HTML 5 manuál

<select>

<select> je elementem formuláře, který (jak již nazev napovídá) umožňuje vybrat 1 nebo více možností z nabídnutých hodnot. Může mít podobu vyjížděcího comboboxu nebo může být určitý počet možností stále zobrazen.

Jednotlivé možnosti vkládáme pomocí tagu <option>.

Ukázka použití

Jednoduchý <select> by mohl vypadat např. takto (samozřejmě musí být vložen v elementu <form>):

<select name="den">
    <option value="1">Pondělí</option>
    <option value="2">Úterý</option>
    <option value="3" selected="selected">Středa</option>
    <option value="4">Čtvrtek</option>
    <option value="5">Pátek</option>
    <option value="6">Sobota</option>
    <option value="7">Neděle</option>
</select>

V prohlížeči se HTML kód výše zobrazí následovně:

Atributy

<select> má následující atributy:

• autofocus - Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
• disabled - Atribut je typu boolean. Pokud je uveden, nelze měnit hodnotu elementu a je často zobrazen jako zašedlý.
• multiple - Atribut je typu boolean. Pokud je uveden, je možno zaškrtnout více možností.
• size - Určuje počet zobrazených možností. Pokud má hodnotu 1 nebo není uveden, je zobrazen jako vyjížděcí combobox (viz. výše). Pokud je uvedeno vyšší číslo, je zobrazen jako rozbalený seznam možností. Když je možností více než udává size, zobrazí prohlížeč posuvník.

Přidejme výše uvedené ukázce atribut size s hodnotou 3. Výsledek bude následující:

• form - Element může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit více formulářům.
• name - Definuje jméno elementu. Jméno musí být unikátní vzhledem k formuláři a je po odeslání použito jako klíč v dvojici klíč-hodnota, která se na server odešle.

<option>

Element <option> je součástí <select> nebo <datalist> a reprezentuje jednu z možností, které může uživatel vybrat.

Atributy

Element má následující atributy:

• disabled - Atribut je typu boolean. Pokud je uveden, možnost nelze vybrat.
• label - Udává zkrácený popisek možnosti, který se zobrazí v seznamu.
• selected - Atribut je typu boolean. Pokud je uveden, je daná možnost předem vybrána.
• value - Udává hodnotu, která se má poslat serveru. V ukázce výše vidíme, že se pro zjednodušení po odeslání formuláře odešle v klíči den jeho číselná hodnota.

<optgroup>

Možnosti v elementech <select> nebo <datalist> můžeme seskupovat tagem <optgroup>.

Atributy

<optgroup> může obsahovat atributy:

• label - Popisek skupiny možností.
• disabled - Atribut je typu boolean. Pokud je uveden, nelze možnosti v dané skupině vybrat.

Ukázka použití

Uveďme si ukázku:

<select name="den">
    <optgroup label="Pracovní dny">
        <option value="1">Pondělí</option>
        <option value="2">Úterý</option>
        <option value="3" selected="selected">Středa</option>
        <option value="4">Čtvrtek</option>
        <option value="5">Pátek</option>
    </optgroup>
    <optgroup label="Víkend">
        <option value="6">Sobota</option>
        <option value="7">Neděle</option>
    </optgroup>
</select>

A výsledek: