Lekce 15 - Formuláře v HTML IV. část

V minulé lekci, Formuláře v HTML III. část, jsme se naučili nové typy inputů. Byly to například typy email, url, tel, number, range a file.

Dnes si ukážeme tagy k tvorbě formulářů, budou to tagy:

• <output>,
• <keygen>,
• <option>,
• <select>,
• <fieldset>,
• <optgroup>,
• <legend>,
• <textarea> a
• <button>.

<output>

Element <output> se v HTML 5 používá k označení výsledku nějaké početní operace. Může se jednat např. o výstup JavaScriptu.

Atributy

Pro tento element si uvedeme 3 atributy:

• for - ID elementu, ke kterému <output> patří, tedy elementu, který se týká výsledku. Atribut není povinný.
• form - Pokud element patří do formuláře a není v něm přímo vložen, můžeme ho formuláři přiřadit zadáním ID formuláře do tohoto atributu.
• name - Jméno elementu.

Ukázka

Ukážeme si, jak zobrazit výsledek v <output> pomocí 2 inputů, které využívají JavaScript:

<form oninput="c.value=parseInt(a.value) * 16;">
    <label for="a">Šestnáctinásobek čísla</label>
    <input type="number" name="a" /> je
    <output name="c" for="a"></output>
</form>

Využíváme zde event oninput na formuláři. Ta po zadání nějaké hodnoty do formuláře spustí obsah v tomto atributu (eventu). Obsah atributu může být funkce JavaScriptu a nebo třeba jednoduchý JavaScriptový kód. Výsledek si můžeme rovnou vyzkoušet:

<keygen>

Element <keygen> se v HTML 5 používá k bezpečnému odeslání formuláře pomocí certifikátu. Po odeslání formuláře je vygenerován pár klíčů. Privátní klíč je uložen lokálně a veřejný je odeslán na server.

Atributy

K tomuto elementu nám poslouží následující atributy:

• autofocus - Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
• challenge - Umožňuje nastavit challenge string, pokud není uveden, nastaví se prázdný string.
• disabled - Atribut je typu boolean. Pokud je uveden, je element neaktivní. Prohlížeče často vykreslí element jako zašedlý.
• form - Pokud element není ve formuláři přímo vložen, můžeme ho formuláři přiřadit zadáním id formuláře do tohoto atributu.
• keytype - Algoritmus ke generování klíče. Můžeme zadat algoritmy rsa, dsa a ec.
• name - Jméno elementu.

Ukázka

V této ukázce si ukážeme, jak použít element <keygen>:

<form>
    Vaše rodné číslo:<br />
    <input type="text" name="rc" />
    <keygen name="key" challenge="78bfgnhmjng678">
    <input type="submit" />
</form>

Výsledek:

Tento tag není mnoha prohlížeči podporován a příliš se ani nevyužívá, znovu odkáži na stránku caniuse.com.

<option>

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

Atributy

Atributy, které je možné specifikovat:

• 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 níže uvidíme, že se pro zjednodušení po odeslání formuláře odešle v klíči den jeho číselná hodnota.

<select>

Tag <select> je elementem formuláře, který (jak již název napovídá) umožňuje vybrat jednu nebo více možností z nabídnutých hodnot. Může mít podobu vyjíždějí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>, o kterým jsme si řekli výše.

Atributy

Tag <select> mohou ovlivnit tyto atributy:

• autofocus - Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
• disabled - Atribut je taktéž typu boolean. Pokud je uveden, nelze měnit hodnotu elementu a je často zobrazen jako zašedlý.
• multiple - 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ějí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.

Ukázka

Jednoduchý příklad s tagem <select> a tagy <option> by mohl vypadat takto:

<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>
</form>

Dnu v týdnu "Středa" jsme přiřadili atribut selected. Proto bude Středa vybrána automaticky:

Hodí se to, pokud chceme například vybrat dnešní den v týdnu a automaticky uživateli předvybereme tento den.

Přidejme výše uvedené ukázce atribut size s hodnotou 3 na tag <select>:

Můžeme uvést ještě atributy:

• 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 pouze jednomu formuláři.
• name - Definuje jméno elementu. Jméno musí být unikátní vzhledem k formuláři a je po odeslání použit jako klíč v dvojici klíč=hodnota, která se na server odešle.

<optgroup>

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

Atributy

Tag <optgroup> má pouze 2 atributy:

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

Ukázka

Nyní si pojďme ukázat, jak tento tag použít:

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

Výběr námi zvoleného dne je přehlednější:

<fieldset>

Tag <fieldset> slouží k seskupení souvisejících polí ve formuláři. Díky němu může vypadat formulář přehledněji.

Atributy

Tento element má tyto atributy:

• disabled - Atribut je typu boolean. Pokud je uveden, nelze měnit hodnotu elementů obsažených ve fieldsetu a ty je často zobrazeny jako zašedlé.
• 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 - Specifikuje jméno fieldsetu. Význam může mít např. při parsování stránky JavaScriptem.

Do fieldsetu můžeme kromě formulářových polí vložit i element <legend>.

<legend>

Tag označuje nadpis pro tag <fieldset>:

<form>
    <fieldset>
        <legend>Fakturační adresa:</legend>
        Jméno: <input type="text" /><br />
        Ulice: <input type="text" /><br />
        Město: <input type="text" /><br />
        PSČ: <input type="text" /><br />
    </fieldset>
    <fieldset>
        <legend>Dodací adresa:</legend>
        Jméno: <input type="text" /><br />
        Ulice: <input type="text" /><br />
        Město: <input type="text" /><br />
        PSČ: <input type="text" /><br />
    </fieldset>
    <input type="submit" />
</form>

Můžeme se přesvědčit, že je formulář přehledný:

K popisu formulářových polí by bylo vhodnější použít element <label>. Zde byl opomenut pouze pro zjednodušení.

<textarea>

Element <textarea> slouží pro zadání libovolně dlouhého textu s více řádky do formuláře. Můžete do něj zadat např. poštovní adresu, nebo třeba i delší článek. Jako výchozí je k vykreslení vloženého textu použito neproporcionální písmo.

Atributy

Tento tag je párový a má následující atributy:

• autofocus - Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
• cols - Počet sloupců (znaků na řádek). Obvykle se šířka nastavuje spíše přes CSS vlastnost width.
• rows - Počet řádků pole. Většinou se výška nastavuje spíše přes CSS vlastnost height.
• disabled - Atribut je typu boolean. Pokud je uveden, nelze do pole vkládat text a je obvykle vykresleno jako zašedlé.
• 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.
• maxlength - Udává maximální počet znaků, jež mohou být do pole vloženy.
• 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.
• placeholder - Definuje text, který se zobrazí v případě, že je pole prázdné. Obvykle je vykreslen zašedle a slouží jako nápověda.
• readonly - Atribut je typu boolean. Pokud je uveden, nelze text uvnitř pole editovat.
• required - Atribut je typu boolean. Pokud je uveden, znamená to, že pole musí být pro odeslání formuláře vyplněné.
• wrap - Udává, jak se má text v poli zalamovat. Hodnota hard zalomí text tak, že je zalomený i po odeslání. Hodnota soft udává, že se má text zalomit pouze pro zobrazení a odešle se jako nezalomený.

Ukázka

Ukázka tohoto párového tagu bude vypadat následovně:

<textarea name="komentar" rows="5" cols="40" placeholder="Zde nám prosím napište připomínky k našemu programu"></textarea>

Pokud chceme dané pole zvětšit, můžeme tak učinit pomocí zvětšovací pomůcky, kterou najdeme v právem dolním rohu našeho pole:

<button>

Tag <button> umožňuje vložit tlačítko, které nemusí být bezprostředně součástí formuláře. Tag je párový a může obsahovat další elementy jako text a obrázky. Tím se odlišuje od elementu <input>.

Atributy

Můžeme specifikovat 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 na tlačítko kliknout a je často zobrazeno jako zašedlé.
• 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.
• formaction - Změní atribut action formuláře.
• formenctype - Změna enctype.
• formmethod - Změna method.
• formnovalidate - Změna validate.
• formtarget - Změna target.
• name - Definuje jméno elementu.
• type - Specifikuje typ tlačítka. Hodnota button (je výchozí pouze v některých prohlížečích) označuje obyčejné tlačítko. Jeho kliknutí zpracujeme např. JavaScriptem. Dále můžeme uvést typy submit a reset. Ty se používají v případě, když je element <button> součástí formuláře. Submit odešle hodnoty, reset vyčistí formulář.
• value - Hodnota tlačítka, která se po kliknutí odešle.

Ukázka

Toto tlačítko je velmi využíváno pro dynamické reaktivní weby, které využívají JavaScript:

<button type="button">Tlačítko</button>

Výsledek pro zobrazení námi vytvořeného tlačítka:

V následujícím kvízu, Kvíz - Formuláře v HTML5, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.