Formuláře slouží k získávání dat od uživatelů a jejich následné zpracování nebo odeslaní pomocí skriptů. V dnešní návodu si ukážeme základní prvky a nakonec vytvoříme celý formulář.
Formuláře slouží k získávání dat od uživatelů a jejich následné zpracování nebo odeslaní pomocí skriptů. V dnešní návodu si ukážeme základní prvky a nakonec vytvoříme celý formulář.
Formuláře jsou komplexní záležitost s velkým množstvím prvků a atributů. Základními prvky jsou tzv. vstupní prvky <input>. Mezi ně patří textová pole, zaškrtávací políčka a odesílací tlačítka. Dalšími prvky jsou víceřádková pole <textarea> a rozbalovací seznamy <select>.
Nejdůležitějším prvkem formuláře jsou textová pole. Definuje se tagem <input> s atributem type a hodnotou text. Slouží především k získávání textových dat od uživatelů. Dalším typem textového pole je <input> s atributem type a hodnotou password. Jak už název hodnoty napovídá, jedná se o textové pole s heslem. Text vepsaný do tohoto textové pole bude změněný na hvězdičky nebo tečky.
Pro pojmenování textových polí slouží atribut name a pro předvyplnění textových polí slouží atribut value.
<input type="text" name="textove-pole-prazdne"><input type="text" name="textove-pole" value="Textové pole"><input type="password" name="heslo" value="Textové pole s heslem">
Výsledek:
Dalšími často využívanými prvky jsou tzv. přepínače a zaškrtávací políčka.
Přepínače slouží ve formuláři k vybrání pouze jedné možnosti ze skupiny přepínačů. Přepínač do formuláře vložíme jako tag <input> s atributem type = "radio". Hodnota přepínače se uvede do atributu value. Důležitý je název uvedený v atributu name. Každá skupina přepínačů musí mít stejný název, jinak nebude fungovat vlastnost, kdy lze z této skupiny vybrat pouze jednu možnost.
Zaškrtávací políčko se vytváří pomoci tagu <input> a atributu type s hodnotou checkbox. Zaškrtávací políčko slouží k vybrání jedné a více možností z definovaných políček. Hodnota políčka se uvede také do atributu value. Atribut name musí být v tomto případě odlišný.
Pokud potřebujeme předdefinovat, aby byl některý přepínač nebo zaškrtávací políčko již označené, můžeme využít atribut checked. Uvézt jej můžete kdekoli do tagu <input>, ale dobrým zvykem je uvádět atribut checked jako poslední atribut.
<input type="radio" name="souhlas" value="ANO" checked><input type="radio" name="souhlas" value="NE"><input type="checkbox" name="CZK" value="Koruna" checked><input type="checkbox" name="EUR" value="Euro"><input type="checkbox" name="USD" value="Dolar">
Výsledek:
Vyplněný formulář lze odeslat nebo resetovat pomocí tlačítek.
Odesílací tlačítko vytvoříme pomocí tagu <input> s atributem type = "submit". Kliknutím na tlačítko odešleme formulář ke zpracování pomocí skriptu.
Resetovací tlačítko vytvoříme také pomocí tagu <input> s atributem type = "reset". Kliknutím na tlačítko se celý formulář obnoví do výchozího nastavení.
Název tlačítka vpíšeme jako hodnotu do atributu value a pro identifikaci tlačítek uvedeme název jako hodnotu atributu name.
<input type="submit" name="odeslat" value="Odeslat formulář"><input type="reset" name="resetovat" value="Resetovat formulář">
V případě, že potřebujeme od uživatelů získat větší množství textu, je vhodné využít víceřádkové textové pole. Do formuláře jej vložíme pomocí párového tagu <textarea>. Velikost víceřádkového textového pole se dá určit pomocí atributů rows a cols nebo pomocí CSS vlastností.
Rows definuje počet viditelný řádků v textovém poli. Výchozí hodnota je 2 řádky.
Cols definuje viditelnou šířku textového pole. Výchozí hodnota je 20.
Předdefinovaný text v textovém poli zadáme mezi tagy <textarea>.
<textarea rows="3" cols="25">Víceřádkovétextovépole</textarea>
Výsledek:
Rozbalovací seznam slouží k výběru předefinovaných hodnot ze seznamu položek. Seznam do fomuláře vložíme pomocí párového tagu <select> a hodnoty seznamu pomocí párového tagu <option>. Atribut value slouží k identifikaci položky a viditelný název, který se zobrazí ve formuláři se uvede mezi tagy <option>.
I v rozbalovacím seznamu, lze nastavit výchozí položku pomocí atributu selected v tagu <option>. V ukázce níže jsme nastavili pomocí tohoto atributu položku paprika jako výchozí.
<select name="zelenina"><option value="rajce">Rajče</option><option value="paprika" selected>Paprika</option><option value="okurka">Okurka</option><option value="salat">Salát</option></select>
Výsledek:
Ke každému prvku formuláře můžeme přidat popisek <label>. Popisek nejen zlepšuje orientaci ve formulářích, ale také díky propojení s konkrétním prvkem umožňuje po kliknutí na jeho název přesunout kurzor přímo do textového pole, automaticky zaškrtnout zaškrtávací políčko nebo označít přepínač. Párový tag <label> se píše před daný prvek, který budeme popisovat.
Samotné propojení popisku s prvkem formuláře provedeme pomocí dvou atributů. První atribut for rozšíří tag <label> a jeho hodnota musí být stejná jako atribut id, který uvedeme do tagu prvku formuláře.
<label for="textove-pole">Textové pole: </label><input type="text" id="textove-pole" name="nazev-pole"><label for="prepinac-ano">Ano: </label><input type="radio" id="prepinac-ano" name="souhlas"><label for="prepinac-ne">Ne: </label><input type="radio" id="prepinac-ne" name="souhlas"><label for="zaskrtavac">Zaškrtni:</label><input type="checkbox" id="zaskrtavac" name="zaskrtavaci-policko">
Výsledek:
Na závěr článku si vytvoříme funkční formulář. Abychom náš formulář oživili, musíme tag <form> rozšířit o tři atributy. Atribut action odkazuje na skript, který bude formulář zpracovávat. Atribut method určuje, jakým způsobem se budou data odesílat. V našem případě jsme zvolili jednodušší verzi, kdy odeslaná data z formuláře jsou přenesena v URL. Třetím atributem target="_blank" zajistíme, že výsledek odeslání se nám zobrazí na nové stránce.
<form action="/_sample/form.php" method="get" target="_blank"><label for="input-name">Jméno:</label><input type="text" id="input-name" name="jmeno"><br><label for="zena">Žena: </label><input type="radio" id="zena" name="pohlavi"><label for="muz">Muž: </label><input type="radio" id="muz" name="pohlavi"><br><label for="html">HTML: </label><input type="checkbox" id="html" name="znalost-html"><label for="CSS">CSS: </label><input type="checkbox" id="CSS" name="znalost-css"><label for="php">PHP: </label><input type="checkbox" id="php" name="znalost-php"><br><input type="reset" name="reset" value="Resetovat"><input type="submit" name="odeslat" value="Odeslat"></form>
Výsledek:
Pojďme si zopakovat hlavní tagy.
<form>Párový tag ohraničující prvky formuláře.
<input>Hlavní prvek formuláře. Pomocí atributu type upravujeme typ prvku. Mezi základní prvky patří textové pole, přepínače, zaškrtávací políčko a odesílací nebo resetovací tlačítko.
<textarea>Víceřádkové textové pole. Lze definovat různou výšku a šířku pole, buď pomocí atributů rows nebo cols, případně pomocí CSS vlastností.
<label>Popisek formulářových prvků. Díky propojení s daným prvkem umožňuje po kliknutí na název popisku přesunout kurzor do textového pole, případně označit přepínač nebo zaškrtávací políčko.
