Předvánoční slevová akce PHP týden
Další šance dokončit svůj projekt a získat ceny v hodnotě 10.000 Kč! Pokračování úspěšné letní soutěže - ITnetwork winter
Využij předvánočních slev a získej od nás 20 % bodů navíc zdarma! Zároveň také probíhá PHP týden se slevou na e-learning až 80 %

Select - Český HTML 5 manuál

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

<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ě:

HTML formulář s elementy select a option

Atributy

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

<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í:

HTML formulář s elementy select a option s nastavenou velikostí 3
  • 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:

HTML formulář s elementy select a option, sdružených do optgroup

 

 

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Všechny články v sekci
Formuláře - Český HTML 5 manuál
Aktivity (1)

 

 

Komentáře

Avatar
Petr
Redaktor
Avatar
Petr:30.7.2012 16:23

To selected bych zapsal spíš jako selected="selec­ted". Vím, že to prohlížeče berou i takhle, ale není to XML validní.

 
Odpovědět
30.7.2012 16:23
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Petr
David Čápka:30.7.2012 16:29

Jo, máš pravdu, opravím :)

Odpovědět
30.7.2012 16:29
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
HeroX
Člen
Avatar
HeroX:14.1.2017 10:15

Ahoj, můžu se prosím zeptat, jestli je možné tento select naplnit hodnotami z databáze? Případně jestli mi můžete poradit jak na to? Díky

 
Odpovědět
14.1.2017 10:15
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na HeroX
Jan Lupčík:14.1.2017 11:23

Ano, samozřejmě. Bylo by dobré, pokud ještě neumíš, se začít učit databáze (počítám s tím, že PHP umíš). Pokud už umíš vybrat data z databáze, stačí tyto data vypsat pomocí funkce foreach nějak takto:

<select name="days">
        <?php foreach ($values as $value) : ?>
                <option value="<?= $value['day_id'] ?>"><?= $value['name'] ?></option>
        <?php endforeach ?>
</select>
Odpovědět
14.1.2017 11:23
TruckersMP vývojář
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Petr Vocel
Redaktor
Avatar
Petr Vocel:21.7.2017 9:41

Pokud máme víceúrovňový výběr pomocí více "selektů" potřebujeme dosáhnout automatického submitu formuláře, při změně vybrané hodnoty některého selektu, abychom mohli opravit navazující hodnoty ve zbývajících selektech. Možná by chtělo naznačit (v lekci) jak lze takovou akci vyvolat. Já jsem to dost dlouho hledal na internetu než se mi podařilo položit správnou otázku.
Ted vím, že to lze vyvoláním javascriptu pomocí parametrů onchange="this­.form.submit()". Je ještě nějaký jiný způsob ?

 
Odpovědět
21.7.2017 9:41
Avatar
Jiří Veselý:1.5.2018 14:12

Ahoj, je možné nějak pomoci vice selectů vybrat určitý obrázek ?

 
Odpovědět
1.5.2018 14:12
Avatar
Odpovídá na Jan Lupčík
Josef Naňák:26. dubna 17:51

A jak lze tuto možnost zapsat v TypeScriptu? Děkuji.

 
Odpovědět
26. dubna 17:51
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.