Formuláře jsou pro mnoho stránek nepostradatelný element.Slouží především k jednodušší komunikaci mezi návštěvníkem a administrátorem (či někým odpovědným), tvoření výzkumů a anket. Formulář tedy v praxi potkáváme běžně u návštěvních knih, fór, komentářů u článků apod.
Motor formuláře
Každý formulář v HTML musí mít své uvozovací značky, aby mohl být dále
zpracováván:
Atribut method
Atribut method složí k určení metody, jak jste již jistě poznali. V našem příkladu jsem použil hodnotu "post", dále pak můžu formulář předat pomocí metody "get". Rozdíl je v tom, že metoda get vypíše do adresní řádký prohlížeče všechny parametry formuláře ve stylu:
&jmeno=Alois%Novak&mesto=Praha
Osobně raději používám metodu post.
Atribut action
Funguje jako spojka mezi formulářem a skriptem, který ho zpracuje a vyhodnotí (např. pošle na mail). Pokud je atribut action prázdný, bude formulář odkázán na aktuální stránku.
Opakující se atributy
Atribut name
Každému prvku formuláře, co chceme předat skriptu, musíme předat jeho jasnou identifikaci, toho docílíme pomocí atributu name. Je vhodné pro name volit nějaký charakteristický název, ať se to lépe pamatuje.
Atribut value
Atribut určující hodnotu daného prvku. U textových prvků formulářů (= lze zde vkládat text, s výjimkou elementu textarea) se zobrazí Vámi předdefinovaný text. U zaškrtávacích prvků dostane prvek hodnotu pro skript.
Input
Značka input zastupuje velkou část formulářových prvků v HTML. Co lze přes input vytvořit a jak to zapsat lze vidět na následujících řádcích.
<input type="definice typu">
type="text"
Vytvoří textové jednořádkové pole.
Atributy:
- size - určuje šířku na počet znaků (zde je lepší použít CSS)
- maxlength - maximální počet znaků
type="password"
Vytvoří textové jednořádkové pole, které skrývá svůj obsah (obvykle) tečkami či hvězdičkami.
Atributy:
- size - určuje šířku na počet znaků (zde je lepší použít CSS)
- maxlength - maximální počet znaků
Příklad:
Kód:
<input type="password" name="identifikace">
Výsledek:
type="radio"
Při použití dvou a více inputů, které jsou typem radio vytvoříte přepínač, kdy lze najednou vybrat právě pouze jednu volbu.
Pozor! Atribut name volíme stejný pro inputy, které chceme mít sloučené (tedy půjde z nich vybrat pouze jedna volba, můžeme též říct, že to je jedna skupina radio inputů). Atribut value naopak volíme rozdílný, a jeho hodnota bude předána skriptu.
Atributem checked (v HTML bez hodnoty) lze dosáhnout defaultního zaškrtnutí.
Příklad:
Kód:
type="checkbox"
Podobný jako type="radio", s tou změnou, že u checkboxu lze zvolit více možností najednou a zobrazí se jako čtvereček (radio se zobrazí jako kroužek). Atributy jsou stejné jako u radia.
Příklad:
Kód:
type="submit"
Vytvoří tlačítko na zpracování formuláře. Obvykle jej lze
aktivovat u formuláře klávesou Enter. Hodnota v atributu value
se zobrazí na "povrchu" tlačítka. Není nutné mu předávat
atribut name.
Příklad:
Kód:
<input type="submit" value="Odeslat">
Výsledek:
type="reset"
Opak type="submit" - resetuje všechny údaje vložené
do formuláře. Tributy jsou stejné jako u
type="submit".
Příklad:
Kód:
Výsledek:
Vepište zde nějaké slovo:
Pozor! Resetovací tlačítko není příliš vhodné používat,
uživatel se může ukliknout a vymazat formulář, což nakonec
může vést k odchodu ze stránek. Proto toto tlačítko volte
opatrně a s rozmyslem.
type="button"
Vytvoří tlačítko vzhledově stejné jako odesílací či
resetovací tlačítko. Je určeno pro napojení na skripty (např.
vhodné pro JavaScript).
Příklad:
Kód:
<input type="button" value="Button">
Výsledek:
type="file"
Vytvoří jedno textové pole a jedno tlačítko např. pro nahrání
souboru na server.
Atribut accept určuje MIME typ vkládaného souboru.
type="image"
Funkčně podobné tlačítku submit. Rozdíl je ten, že tlačítku
lze nastavit pozadí pomocí atributu lowsrc a dále také předává
souřadnice, kam uživatel klikl (souřadnice x, y) přes metodu
get. Takže se výsledné souřadnice zobrazí jako
"URL?x=292&y=23".
Select
Vytvoří rozbalovací nabídku, ze které je možno vybrat právě
jednu možnost. Vhodné zvláště pro obsáhlé otázky do
formuláře.
K prvku select se váže element option, který určí jednu položku
seznamu. Při předávání skriptu formuláři musíme dát
atribut name do prvku select a atribut value do prvku option.
Příklad:
Kód:
