#1 Prvky pro formulář
Prvek <input>
Nejpoužívanější prvek, prvek <input>, je určený pro příjem uživatelova vstupu v podobě text, data, souborů nebo i barvy. Mění svou podobu na základě atributu type. Více o prvku <input> v jeho samostatném článku.
<form>
<label for="jmeno">Jméno a přijímení</label>
<input type="text" id="jmeno">
</form>
Štítky <label>
Pomocí prvku <label> je možné připínat k vstupům od uživatele štítky, které daný vstup vysvětlují. Výhodou štítků je, že pro vstupy typu radio a checkbox fungují jako prodlužovací prvek, a pokud klikne uživatel na štítek, označí se vstup, ke kterému daný štítek patří.
Pro přiřazení štítku ke vstupu se používá atribut for, který by měl obsahovat stejnou hodnotu, jako atribut id u vstupu. Například takto:
<form>
<label for="jmeno">Jméno a příjmení</label>
<br />
<input type="text" id="jmeno">
</form>
Velké textové pole <textarea>
Funguje podobně jako <input type="text">, ale na rozdíl od něj, může uživatel do prvku <textarea> zadávat víceřádkový text. Prvek lze také podle nastavení v CSS libovolně zvětšovat (dá se tomu zabránit použitím CSS vlastnosti resize: none;).
Na rozdíl od jednoduchého vstupu má prvek <textarea> také ukončující tag. Dále, chceme-li do něj vložit předepsaný text, vložíme jej jako obsah prvku, nikoli do atributu value.
Výběr <select>
Prvek <select> definuje otevírací seznam, z něhož si uživatel může vybrat položku. S prvkem <select> se pojí nepárový prvek <option>, který definuje jednotlivé možnosti výběru.
<form>
<select id="ovoce">
<option value="Jablko">
<option value="Banán">
<option value="Hruška">
</select>
</form>
Pomocí doplňujícího atributu size, lze zvolit kolik možností bude viditelných. Základní nastavení je jedna možnost.
Prvek <datalist>
Prvek <datalist> funguje jako rozšíření prvku <input>, kterému nabízí předepsané možnosti, z nichž si může uživatel vybrat nebo využije textového vstupu a napíše odlišnou možnost. Atribut id musí být totožný jako hodnota atributu list u vstupu.
<form>
<input list="ovoce">
<datalist id="ovoce">
<option value="Jablko">
<option value="Banán">
<option value="Hruška">
</datalist>
</form>
Tlačítko <button>
Prvek <button> definuje klikatelné tlačítko. Po stisknutí lze například spustit skript. Cokoli se spouští po kliknutí je potřeba vložit do atributu onclick.
<button type="button" onclick="alert("Klikatelné tlačítko!")">
V příkladu výše je tlačítko, po jehož stisknutí se objeví na obrazovce hlášení „Klikatelné tlačítko!“. Hlášení je spouštěno pomocí JavaScriptové funkce alert().
Seskupování prvků formuláře
Prvky lze seskupit do skupin pomocí prvek <fieldset>. Každé seskupení může mít také vysvětlivku nebo legendu, která se vkládá prvkem <legend>. Například:
<form>
<fieldset>
<legend>Osobní údaje</legend>
<input type="text" name="jmeno">
<input type="text" name="prijimeni">
</fieldset>
</form>