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ů:
autofocus – boolean atribut. Je-li nastaven na true, bude prvek po načtení stránky aktivní. Logicky tedy tento atribut může mít nastaven na true jen jeden prvek na stránce.
disabled – boolean atribut. Je-li nastaven na true, znepřístupní prvek.
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:
ikonka lupy, která po kliknutí zobrazí rolovací menu s řetězci vyhledávanými v minulosti;
na konci textového pole je křížek, který smaže zadávaný řetězec;
…
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 typeemail, 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
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.
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 typenumber, 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ů:
number, range – číslo;
date – datum ve tvaru rok-měsíc-den, např. 1996-12-19;
datetime – datum-čas-časový_posun ve tvaru rok-měsíc-denTčas±časový_posun
např. 2002-10-02T15:00:00-08:00 (časový posun -8 hodin),
2002-10-02T15:00:00Z („Z“ na konci = bez časového posunu);
datetime-local – datum-čas ve tvaru rok-měsíc-denTčas, např. 2010-01-02T15:49:02;
month – tvar rok-měsíc, např. 2005-07;
time – čas ve tvaru hodiny-minuty-sekundy, např. 12:51:03;
week – tvar rok-Wčíslo_týdne, např. 2005-W17.
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:
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ý atributsrc, jehož hodnotou je cesta k obrázku:
Mezi jeho další atributy patří:
alt – hodnotou je textový řetězec, který se zobrazí místo obrázku, pokud se obrázek nenačte;
height, width – hodnotou je nezáporné číslo, určující výšku nebo šířku obrázku (v CSS pixelech);
a nepřekvapivě též formaction, formenctype, formmethod, formnovalidate, formtarget se stejnou funkcí jako výše.
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 atributuname!
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:
checkbox – musí být zaškrtnut;
Určitě jste někdy zaškrtávali, že souhlasíte se smlouvou, jinak by Vás to nepustilo dál ;)
radio – musí být zaškrtnut alespoň jeden radio button z jedné množiny možností.
Tudíž stačí tento atribut navěsit na jeden z radio buttonů ze stejné množiny možností.
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ů:
accept – hodnotou je seznam MIME typů, oddělených čárkou („,“). Jen tyto typy souborů bude moci uživatel zvolit (= jsou přijímány serverem). Příklady:
image/* – všechny obrázkové soubory
video/* – všechny video soubory
audio/* – všechny audio soubory
.exe,image/* – všechny soubory s příponou „.exe“ a všechny obrázkové soubory
Tohle nefunguje ve Firefoxu.
multiple – boolean atribut. Je-li nastaven na true, může uživatel vybrat více souborů najednou.
required – boolean atribut. Je-li nastaven na true, musí uživatel vybrat alespoň jeden soubor.
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: