Od provozovatele projektu Rychlost.CZ

Základy formulářů - Formuláře

vydáno: 22.02.2016, seriál: Formuláře | komentářů: 0

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>.

Textové pole

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.

Ukázka:
HTML
<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">
Použité tagy: <input>

Výsledek:

Přepínače a zaškrtávače

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.

Ukázka:
HTML
<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">
Použité tagy: <input>

Výsledek:

Tlačítka

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.

Ukázka:
HTML
<input type="submit" name="odeslat" value="Odeslat formulář">
<input type="reset" name="resetovat" value="Resetovat formulář">
Použité tagy: <input>

Víceřádkové textové pole

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>

Ukázka:
HTML
<textarea rows="3" cols="25">
Víceřádkové
textové
pole
</textarea>
Použité tagy: <textarea>

Výsledek:

Rozbalovací seznam

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í.

Ukázka:
HTML
<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>
Použité tagy: <select>, <option>

Výsledek:

Popisy formulářů

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.

Ukázka:
HTML
<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">
Použité tagy: <label>, <input>

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.

Ukázka:
HTML
<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>
Použité tagy: <form>, <label>, <input>, <br>

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.

<select>

Rozbalovací seznam sloužící k výběrů předdefinovaných možností. Dané možnosti se uvádějí mezi tagy <option>.

<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.

HTML: návody jak psát html tagy