HTML formuláře
Pro shromažďování uživatelských vstupů se používá formulář HTML. Uživatelský vstup je nejčastěji odeslán na server ke zpracování.
Příklad
Element <form>
Element HTML <form>
se používá k vytvoření formuláře HTML pro vstup uživatele:
<form>
.
form elements
.
</form>
Prvek <form>
je kontejner pro různé typy vstupních prvků, jako jsou: textová pole, zaškrtávací políčka, přepínače, tlačítka pro odeslání atd.
Všechny různé prvky formuláře jsou popsány v této kapitole: Prvky formuláře HTML .
Prvek <input>
Element HTML <input>
je nejpoužívanějším elementem formuláře.
Prvek <input>
lze zobrazit mnoha způsoby v závislosti na type
atributu.
Zde jsou nějaké příklady:
Typ | Popis |
---|---|
<input type="text"> | Zobrazí jednořádkové pole pro zadávání textu |
<input type="radio"> | Zobrazí přepínač (pro výběr jedné z mnoha možností) |
<input type="checkbox"> | Zobrazí zaškrtávací políčko (pro výběr nuly nebo více z mnoha možností) |
<input type="submit"> | Zobrazí tlačítko Odeslat (pro odeslání formuláře) |
<input type="button"> | Zobrazí tlačítko, na které lze kliknout |
Všechny různé typy vstupu jsou popsány v této kapitole: Typy vstupu HTML .
Textová pole
<input type="text">
Definuje jednořádkové vstupní pole pro zadávání textu .
Příklad
Formulář se vstupními poli pro text:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Takto se výše uvedený HTML kód zobrazí v prohlížeči:
Poznámka: Samotný formulář není viditelný. Všimněte si také, že výchozí šířka vstupního pole je 20 znaků.
Prvek <label>
Všimněte si použití <label>
prvku ve výše uvedeném příkladu.
Značka <label>
definuje štítek pro mnoho prvků formuláře.
Prvek <label>
je užitečný pro uživatele čtečky obrazovky, protože čtečka obrazovky přečte nahlas štítek, když se uživatel zaměří na vstupní prvek.
Prvek <label>
také pomáhá uživatelům, kteří mají potíže s klikáním na velmi malé oblasti (jako jsou přepínače nebo zaškrtávací políčka) – protože když uživatel klikne na text v <label>
prvku, přepne přepínač/zaškrtávací políčko.
Atribut for
značky <label>
by se měl shodovat s id
atributem <input>
prvku, aby je spojil dohromady.
Přepínače
<input type="radio">
Definuje přepínač .
Přepínače umožňují uživateli vybrat JEDNU z omezeného počtu možností.
Příklad
Formulář s přepínači:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Takto se výše uvedený HTML kód zobrazí v prohlížeči:
Vyberte si svůj oblíbený jazyk webu:
Zaškrtávací políčka
<input type="checkbox">
Definuje zaškrtávací políčko .
Zaškrtávací políčka umožňují uživateli vybrat NULA nebo VÍCE možností z omezeného počtu možností.
Příklad
Formulář se zaškrtávacími políčky:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Takto se výše uvedený HTML kód zobrazí v prohlížeči:
Tlačítko Odeslat
<input type="submit">
Definuje tlačítko pro odeslání dat formuláře do obslužného programu formuláře .
Form-handler je obvykle soubor na serveru se skriptem pro zpracování vstupních dat.
Form-handler je uveden v action
atributu formuláře.
Příklad
Formulář s tlačítkem Odeslat:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Takto se výše uvedený HTML kód zobrazí v prohlížeči:
Atribut názvu pro <input>
Všimněte si, že každé vstupní pole musí mít name
atribut, aby bylo možné jej odeslat.
Pokud je name
atribut vynechán, hodnota vstupního pole nebude odeslána vůbec.
Příklad
Tento příklad neodešle hodnotu vstupního pole „First name“:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>