Formuláře
| Tag | Význam | Párový | Výskyt |
|---|---|---|---|
| form | formulář | ano | |
| input | vstupní pole | ne | <form> |
| select | výběrové pole | ano | <form> |
| option | volba | ne | <select> |
| textarea | velké vstupní pole | ano | <form> |
| label | popis pole | ano | <form> |
| fieldset | skupina polí | ano | <form> |
| legend | popis pole | ano | <fieldset> |
| optgroup | skupina voleb | ano | <select> |
| button | tlačítko | ano | <form> |
form
Formulář. Párový tag. Uzavírá skupinu ovládacích polí do jednoho formuláře, který bude najednou odeslán.
| Atribut | Význam | Hodnoty |
|---|---|---|
| action | skript, který bude zpracovávat data | URL |
| method | způsob předávání dat | get | post |
| enctype | způsob zakódování dat | application/x-www-form-urlencoded | multipart/form-data | libovolná mime deklarace |
| target | cílové okno nebo rám | _self, _blank, _top, _parent, nebo jméno rámu nebo okna |
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.
Příklad nejjednoduššího formuláře odesílaného na skript.php,
s jedním textovým polem a potvrzovacím tlačítkem:
<form action="skript.php" method="get">
<input type="text" name="parametr" value="hodnota">
<input type="submit" value="odeslat">
</form>
input
Vstupní pole. Nepárový tag.
| Atribut | Význam | Hodnoty |
|---|---|---|
| type | druh vstupního pole | text | password | hidden | radio | checkbox | submit | reset | image | file | button |
| name | jméno pole, které se odesílá s daty | libovolné jméno |
| value | hodnota pole (původní hodnota pole nebo text zobrazovaný na tlačítku) | libovolná hodnota |
| disabled | políčko bude šedé a nepůjde měnit (jen v některých prohlížečích) v IE se neodesílá |
bez hodnoty |
| readonly | obsah pole nepůjde měnit (fachá jen v některých prohlížečích) |
bez hodnoty |
| align | zarovnání (jako u obrázku) | right, left + těch dalších x možností |
| Další atributy jsou přípustné na základě hodnoty atributu type. Mohou to být size, maxlength, checked, autocomplete, src a accept (vizte níže). | ||
Atribut type určuje typ políčka
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.
| type= | Druh vstupního pole | Další atributy |
|---|---|---|
| text | obyčejné textové pole | size= šířka ve znacích maxlength = nejvyšší možný počet zadaných znaků, autocomplete = doplňování známých hodnot (popis níže) |
| password | textové pole s hvězdičkami | size= šířka ve znacích maxlength- maximum znaků |
| hidden | skryté pole s předem nastavenou hodnotou | |
| radio | přepínač puntíků (několik tagů <input type=radio> stejného jména (name) s různými hodnotami tvoří skupinu možností) | checked -- atribut bez hodnoty způsobí stisknutí puntíku |
| checkbox | zatrhávací tlačítko | checked -- atribut bez hodnoty způsobí zatržení |
| submit | potvrzující tlačítko způsobující odeslání formuláře | |
| reset | tlačítko na smazání všech polí (na přednastavenou hodnotu) | |
| image | potvrzující tlačítko odesílající navíc souřadnice kliknutí (name.x a name.y (php je dostává jako name_x a name_y )) | src= URL obrázku (navíc nepoužitelné dynsrc, lowsrc jako u <img>) |
| file | umožní zadat soubor | accept = MIME typ nabízených souborů |
| button | tlačítko ovládané skriptovými atributy |
V některých popisech HTML se vyskytují ještě typy range, scribble a jot, které ale podle mých zkušeností nikde nefungují.
Příklady použití tagu input:
Obyčejné textové pole:
<input type="text" name="jmeno"> nebo <input name="jmeno">
Obyčejné textové pole dlouhé 10 znaků:
<input type="text" size="10" name="jmeno">
Textové pole s předvyplněnou hodnotou ahoj:
<input type="text" name="jmeno" value="ahoj">
Pole pro heslo:
<input type="password" name="heslo">
bude se hvězdičkovat.
Skryté pole pro předávání skrytých parametrů:
<input type="hidden" name="skryte" value="ahoj">
Tři přepínací tečky (radio buttony), první vybraná:
<input type="radio" name="stejne_jmeno" value="první" checked="checked">
<input type="radio" name="stejne_jmeno" value="druhá">
<input type="radio" name="stejne_jmeno" value="třetí">
Zaškrtávací čtvereček (zaškrtnutý):
<input type="checkbox" name="ctverecek" checked="checked">
Odesílací
tlačítko:
<input type="submit" value="Odeslat">
Input s type="reset" doporučuji nepoužívat, protože téměř nikdy není užitečný. Naopak uživatele často strašně naštve, protože je automaticky spojený se stisknutím klávesy escape -- každé zmáčknutí escape vymaže formulář.
<input type="text">
Type="text" znamená, že půjde o obyčejné vstupní pole. Text je defaultní hodnota, takže když se type vůbec nezadá, funguje to stejně.
| atribut | Význam | Hodnoty |
|---|---|---|
| size | délka pole | obyčejné číslo, vyjadřuje počet znaků. Pro přesné zadání rozměru se lépe hodí css vlastnost width, která má vyšší prioritu. |
| maxlength | maximální počet znaků |
obyčejné číslo, více znaků prostě nejde zadat. Bývá zvykem dávat vyšší hodnotu, než má size. |
| autocomplete | povolí nebo zakáže doplňování známých hodnot | on | off |
Zajímavě funguje u textového inputu atribut autocomplete="off". Zabrání tomu, aby se políčko vyplnilo nějakou dříve zadanou hodnotou v nějaké jiné stránce (shoda se myslím určuje podle atributu name).
Častá chyba u maxlength: stává se mi, že prohodím na konci písmenka t a h, maxlenght je špatně, maxlength je dobře.
select
Výběr. Zobrazí obdélníček s možnostmi nebo roletkové menu. Párový tag, jeho obsahem jsou jednotlivé volby -- tagy <option>.
| Atribut | Význam | Hodnoty |
|---|---|---|
| name | jméno pole odesílatné s daty | libovolné jméno |
| multiple | umožnění hromadného výběru (s Ctrl) | bez hodnoty |
| size | počet zobrazených řádků | číslo |
| disabled | políčko bude šedé a nepůjde měnit (jen v některých prohlížečích) |
bez hodnoty |
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, select například nejde dost dobře stylovat přes CSS (pouze tučnost, kurziva a barva pozadí přes <option>). 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.
Příklad:
<select name="ovoce">
<option value="jb">jablko</option>
<option value="hs">hruška</option>
</select>
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.
| Atribut | Význam | Hodnoty |
|---|---|---|
| value | řetězec odesílaný jako hodnota pole | řetězec |
| selected | položka je předem vybrána | bez hodnoty |
| disabled | položka je vidět, ale je zašedlá a nelze ji vybrat | disabled |
Obsah tagu, tedy 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.
Příklad viz u select.
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>.
| Atribut | Význam | Hodnoty |
|---|---|---|
| name | jméno odesílané s daty | jméno |
| cols | šířka pole ve znacích | číslo |
| rows | výška pole v řádcích | číslo |
| disabled | políčko bude šedé a nepůjde měnit (jen v některých prohlížečích, tehdy se neodesílá) |
bez hodnoty |
| readonly | obsah pole nepůjde měnit (fachá to jen v některých prohlížečích) |
bez hodnoty |
| wrap | zalamování slov a řádků | hard, soft, off |
Tag textarea nemá žádnou obdobu atributu maxlength pro maximální počet znaků, jako je tomu u tagu <input type="text">. Má-li být počet znaků omezený, je potřeba to složitěji skriptovat javascriptem (přes .value.length).
| wrap= | Význam |
|---|---|
| soft | řádky se smějí zalomit jenom v místě mezery. V praxi se zalamují i uprostřed slova, přesahuje-li slovo celý řádek. Odesílá se tak, jak je zapsáno. |
| hard | řádky se zalamují v místě mezery nebo kdekoliv v příliš dlouhém slově. Pokud se ale zalomí, je tento řádkový zlom také odeslán na server jako konec řádku. |
| off | řádek se nezalamuje vůbec nikde (Interet Explorer), popř. jen na konci slov (Mozilla). Objevuje se vodorovný scrollbar. Odesílá se tak, jak je zapsáno. |
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.
Příklad na textaera:
<textarea name="promenna" cols="40" rows="10">
Text, který bude v textovém poli předvyplněný
</textarea>
Následující tagy do HTML přibyly až ve verzi 4.0. Jejich implementace už nyní (2009) fungují v prohlížečích perfektně, ale z historických důvodů je držím na konci této stránky.
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é label 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ý.
| Atribut | Význam | Hodnoty |
|---|---|---|
| for | svázání s polem stejného identifikátoru | hodnota atributu id u svázaného pole |
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í. Příklad vidíte níže u tagu legend.
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í.
| Atribut | Význam | Hodnoty |
|---|---|---|
| align | zarovnání popisku | left | right | center |
Příklad:
<fieldset>
<legend>Milá zvířátka</legend>
Kočičky: <input name="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 buttonu oproti tagu <input> 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. Je to prostě tag párový.
Příklad:
<button name="cokoliv" value="cokoliv">tlačítko s <b>tučným textem</b></button>
| Atribut | Význam | Hodnoty |
|---|---|---|
| type | druh vstupního pole | submit | reset | button |
| name | jméno pole, které se odesílá s daty | libovolné jméno |
| value | hodnota, která by se měla odesílat (nefunguje v Exploreru, ten odesílá obsah tagu) | libovolná hodnota |
V praxi se button chová hodně podobně jako <input> se stejným type.
Při odesílání formuláře by se normálně měly spárovat hodnoty name a value. Implementace tagu button v Internet Exploreru ale obsahuje chybu, kdy se namísto value odesílá text z obsahu buttonu (tedy to, co je vidět na tlačítku, přesněji řečeno vlastnost innerText). Kvůli této chybě se ale button v praxi moc nepoužívá.
| type= | Význam |
|---|---|
| submit | odeslání formuláře |
| reset | vymazání formuláře |
| button | nic nedělá, pokud na něj není navázán skript (nejčastěji přes onclick) |
Důležitý atribut type, podobný atributu type u tagu <input>. Nastavení type="submit" způsobí, že tlačítko bude odesílat formulář. Výchozí hodnota atributu type (tedy když se type nezadá) je submit (odesílací tlačítko formuláře), ale Explorer chápe výchozí hodnotu type jako button. V praxi tedy vždycky, když chcete použít button, musíte type zadat, jinak se to bude v každém prohlížeči chovat jinak.
Úplně nejlepší je asi <button> pokud možno nepoužívat a zůstat u <input>.
Reklama
