HTML5 Jiří Novotný Formuláře 2014-01-xx

Jak už víme, je element <input> největším balíčkem ovládacích prvků. Nyní se podíváme na jeho nejdůležitější atributy.

Jelikož některé z nich fungují jen pro určité hodnoty type (= jen pro určité typy prvků), uvedeme si teď jen ty všeobecné a na specifické atributy se podíváme až u jednotlivých prvků:

Jedná se o následující hodnoty atributu type:

text – nejjednodušší prvek, prosté jednořádkové textové pole:

email – kontroluje, zda je zadaný řetězec v „e-mailovém“ tvaru:

password – zakrývá psaný text:

search – v podstatě to samé jako text. Některé prohlížeče však pro tento prvek nabízejí rozšířené možnosti:

Navíc máte možnost doplnit atribut autosave – hodnotou je název nějaké kategorie, pod kterou se budou ukládat vyhledávané řetězce, které se pak ukazují při psaní v rolovacím menu (které všichni určitě dobře známe :).

Doporučuje se používat aktuální doménu jako kategorii (např. google).

tel – textové pole pro zadání telefonního čísla:

Jak se zdá, tak nekontroluje vstup a zatím se chová stejně jako text.

url – textové pole pro zadání adresy URL, s kontrolou vstupu:

Je nutné psát adresu i s příslušným protokolem (http://, ftp://, ...).

Následující atributy elementu <input> jsou platné pro všechny výše uvedené textové prvky (tedy pro hodnoty atributu type email, password, search, tel, text, url):

list – hodnotou je id příslušného <datalist>, což je vlastně jednoduchá datová struktura, kde máme předdefinované nějaké řetězce. Ty se pak zobrazují v rolovacím menu při psaní v textovém poli prvku (podobně jako historie hledání u search prvku).

maxlength – hodnotou je číslo, určující maximální počet znaků, které uživatel může zadat do textového pole prvku. Hodnota může být jiná než kterou má atribut size.

Zde omezení na 5 znaků.

pattern – hodnotou je regulérní výraz (regexp), vůči kterému se bude kontrolovat zadaný řetězec.

Jelikož se zřejmě při prázdném textovém poli přeskakuje kontrola regulérního výrazu, je nutné použít atribut required. V této ukázce ošetření vstupu jdou odeslat pouze třípísmenné řetězce.

PS: Jelikož u <input> chybí atribut minlength, můžeme si pomoci regulérním výrazem ;)

placeholder – hodnotou je řetězec, který se ukazuje v textovém poli prvku předtím, než uživatel začne psát:

readonly – boolean atribut. Je-li nastaven na true, uživatel nemůže měnit hodnotu atributu value, tzn. do textového pole prvku nejde psát:

required – boolean atribut. Je-li nastaven na true, nemůže být odeslán formulář, pokud má prvek prázdné příslušné textové pole:

size – hodnotou je číslo, určující viditelnou délku textového pole prvku:

Zde je viditelná délka textového pole 5 znaků, ale ono je to ve skutečnosti víc :-D

Jedná se o následující hodnoty atributu type:

number – v podporovaných prohlížečích jsou u tohoto pole malé šipky na zvětšování/zmenšování čísla a funguje zde ověření vstupu, tj. jestli uživatel zadal skutečně číslo:

Nefunguje v Internet Exploreru a Firefoxu – interpretují number jako text.

range – jednoduché číselné „šoupátko“:

Výchozí hodnoty: min="0", max="100", value="min+(max-min)/2", step="1".

date – prvek pro vkládání data, bez času:

Nefunguje v IE a Firefoxu.

datetime – prvek pro vkládání data a času včetně časového posunu:

Nefunguje v IE, Firefoxu ani Chrome.

datetime-local – prvek pro vkládání data a času bez časového posunu:

Nefunguje v IE a Firefoxu.

month – prvek pro vkládání měsíce a roku:

Nefunguje v IE a Firefoxu.

time – prvek pro vkládání času:

Nefunguje v IE a Firefoxu.

week – prvek pro vkládání čísla týdne a roku:

Nefunguje v IE a Firefoxu.

Následující atributy elementu <input> jsou platné pro všechny výše uvedené číselné a časové prvky (tedy pro hodnoty atributu type number, range, date, datetime, datetime-local, month, time, week):

min, max – minimální a maximální hodnota, kterou může prvek nabývat. Tvary hodnot se liší u jednotlivých prvků:

required – pravdivostní atribut (ne)vyžadující vyplnění uvedeného formulářového prvku. Jelikož jsou číselná a datová pole v principu vlastně textová, chová se úplně stejně jako u textových prvků.

step – určuje, po jakých „kouscích“ se má zvětšovat/zmenšovat číslo:

U časových prvků zřejmě nemá význam.

Jedná se o následující hodnoty atributu type:

button – prosté tlačítko, které nemá žádnou výchozí funkci (je tedy nutné mu vymyslet nějakou činnost třeba pomocí Javascriptu :-):

reset – obnoví formulář do původní podoby:

submit – odešle formulář:

Zde na adresu neexistujícího PHP skriptu.

„Submitovací“ tlačítko vzhledem ke své funkci může obsahovat řadu dalších atributů. Konkrétně jde o atributy formaction, formenctype, formmethod, formnovalidate, formtarget, které při svém použití přepíší atributy action, enctype, method, novalidate, target u elementu <form> (viz. slajd „Element <form>“).

Hodně neobvyklý typ image vyrobí grafický (obrázkový) submit button. Má povinný atribut src, jehož hodnotou je cesta k obrázku:

Mezi jeho další atributy patří:

Jedná se o následující hodnoty atributu type:

V případě klasického formuláře je samozřejmě nezbytné mít u těchto prvků vyplněný atribut value!

checkbox – zaškrtávací políčko:

radio – přepínač možností. Jelikož z určité množiny možností může být zaškrtlá jen jedna, je nezbytné, aby radio buttony patřící do stejné množiny možností měly stejnou hodnotu atributu name!

Atributy <input> platné pro checkbox a radio:

checked – boolean atribut. Je-li nastaven na true, bude tento prvek automaticky zaškrtlý po načtení stránky:

V případě radio buttonů může mít tento atribut nastaven na true logicky jen jeden radio button z jedné množiny možností (= ze skupiny radio buttonů se stejnou hodnotou atributu name). V opačném případě „poslední vyhrává“ ;)

required – boolean atribut. Je-li nastaven na true, mají checkbox a radio odlišné vlastnosti:

color – slouží k výběru barvy:

Nefunguje v IE a Firefoxu.

Atribut value, který reprezentuje vybranou barvu, slouží také k výběru výchozí barvy. Jeho hodnotou je barva zapsaná v hexadecimálním formátu, např. #ffffff.

Názvy barev (red, green, ...) zde nefungují!

file – slouží k výběru a následnému nahrání souboru na server:

Vzhledem ke své poměrně složité funkci akceptuje řadu dalších pomocných atributů:

Velmi důležitý a používaný typ atributu hidden označuje (textový) prvek, který se sice nezobrazuje, ale hodnota jeho atributu value je odeslána ke zpracování při odeslání formuláře: