Formuláře

form

Formulář. Párový tag. Uzavírá skupinu ovládacích polí do jednoho formuláře, který bude najednou odeslán.

Action obvykle míří na nějaký CGI skript nebo PHP nebo ASP. Není-li uvedeno, odešlou se data téže stránce.

Výchozí metoda atributu method je get. Říká, že se data budou předávat jako součást URL, tedy v řádku adresy. Method=post zabalí odesílaná data a odesílá je nezávisle, takže nejsou vidět. Post je dobré nastavit u delších formulářů.

Atributem enctype se nemusíte zabývat, pokud vám nepůjde o posílání souborů nebo o přesný výstup českých znaků (pak nastavte multipart/form-data). Pro posílání jednoduché pošty doporučuji enctype="text/plain".

Následuje popis vstupních polí formuláře. Dělají se pomocí tagů <input>, <select> a <textarea>. Tyto musejí být umístěny v elementu <form>, ale navíc mohou být třeba i v tabulce. Popisky vstupních polí se dělají normálním textem kolem nich.

input

Vstupní pole. Nepárový tag. 

 Input v sobě zahrnuje celou škálu různých kolonek, tlačítek a přepínačů -- to všechno závisí na atributu type.

V některých popisech HTML se vyskytují ještě typy range, scribble a jot, které ale podle mých zkušeností nefungují. 

select

Výběr. Zobrazí obdélníček s možnostmi nebo roletkové menu. Párový tag, jeho obsahem jsou jednotlivé volby -- tagy <option>.

Pokud je size 1, bude to roletkové menu. Při size 2 a vyšší se <select> zobrazí jako obdélníček s rolovací lištou. Bude-li hodnot stejně nebo méně než size, nebudou tam ani rolovací lišty.

Šířka selectu, jak se vykreslí na stránce, se odvozuje od nejširší option. Vzhled šedivé šipky s nabídkou nelze v Internet Exploreru nijak změnit.

Zev všech HTML tagů jsou s vykreslováním tagu select jsou asi největší problémy. Je to tím, že tento ovládací prvek přebírají prohlížeče (zejm. Internet Explorer) z grafického prostředí operačního systému.

option

Položka výběru. Nepárový tag (třebaže se může zadávat párově), obsahem elementu je text za tagem až do dalšího tagu.

Text za tagem <option> se zobrazí ve výběru.

Pomocí kaskádových stylů (CSS) se v IE 6 dají položky option formátovat pouze omezeně. Dá se jim nastavit jen barva písma (color) a barva pozadí (background-color). Uvnitř tagu <option> jsou ignorovány všechny html tagy.

textarea

Rozsáhlé vstupní pole (textarea = angl. prostor pro text). Zobrazuje rámeček s lištou.. Párový tag. Nemá atribut value, za implicitní hodnotu se považuje obsah elementu. Jinak řečeno, tag <textarea> obklopuje text, který se zpočátku zobrazí uvnitř </textarea>. 

Prohlížeče se liší v tom, jakou hodnotu mají nastavenu jako výchozí. Zatímco v IE a v Mozille je to soft, v Netscape je to pravděpodobně off. Doporučuji vždy zadávat wrap="off".

Existují ještě starší hodnoty physical (odpovídá hard) a virtual (odpovídá soft), ale jejich podporu jsem netestoval.

Následující tagy do HTML přibyly až ve verzi 4.0, takže jejich implementace není v pětkových verzích prohlížečů úplná.

label

Štítek, popisek pole. Vyskytuje se nejlépe před políčkem, ke kterému se vztahuje, aby to i v prohlížečích, které to nepodporují, dávalo smysl. Výhodou je aktivace pole formuláře, pokud se klikne na štítek, a lepší automatizace (accesskey, css). Vlastní text štítku se zadává jako obsah elementu -- jde o tag párový.

Příklad: <label for="drak">Zadej jméno draka:</label> <input type="text" id="drak">

fieldset

Skupina polí. Párový tag, který opticky sdruží několik prvků formuláře a vykreslí kolem nich slabý rámeček. Čáru rámečku může přerušit text tagu <legend>. <fieldset> nemá žádné atributy kromě obecných. Vzhled se dá upravovat pomocí CSS. Starší prohlížeče tento tag ignorují.

 legend

Popisek skupiny polí (tagu <fieldset>). Zobrazuje se nad skupinou polí přes horní čáru fieldsetu. Musí být zapsána hned za značkou <fieldset>. Obsahem tagu <legend> může být libovolné HTML (rozumné). Čtyřkové prohlížeče tag nepodporují.

Příklad: 
<fieldset>
<legend>Milá zvířátka</legend>
Kočičky: <input mane="kocky"><br>
Dráčci: <input name="draci">
</fieldset>

optgroup

Skupina voleb ve výběrovém prvku <select>. Párový tag, kterým se obklopí skupinky tagů <option>. V šestkových verzích prohlížečů se potom takové skupinky zobrazí odsazené a budou mít nadpis tučnou kurzívou. Ten nadpis se zadává jako atribut label tagu <optgroup>. Pětkové a nižší verze prohlížečů tento tag ignorují a zobrazují volby normálně pod sebou.

Příklad: 
<select>
<optgroup label="nadpis skupinky">
<option>první</option>
<option>druhá</option>
</optgroup>
</select>

button

Tlačítko. Jedinou a hlavní výhodou je, že se do něj dá vložit libovolný HTML kód, který se na tlačítku zobrazí. Takže se mezi <button> a </button> dají vkládat obrázky, nadpisy, prostě cokoliv. Důležitý atribut je pouze type, podobný atributu type u tagu <input>.