#1 Formulář
HTML formuláře se používají zejména k sbírání informací od uživatelů. Může se jednat o přihlášení se k odběru newsletteru, vyplnění kontaktu v e-shopu…
#2 Prvky formuláře
Prvek <form>
Nejdůležitější prvek formulářů – samotný obal, který formulář definuje – prvek <form> a ukončující tag </form>. Do prvku <form> se vkládají textová políčka, checkboxy, odesílací tlačítka a podobně.
<form>
<!-- Vstupy -->
</form>
Prvek <input>
Prvek <inpu> a jeho typy slouží k zadávání požadovaného typu vstupu od uživatele. Typ se ovládá pomocí atributu type, níže v tabulce naleznete nejčastější hodnoty.
Více o prvku <input> a jeho typech v následujícím článku.
| Typ | Popis |
|---|---|
| text | Jednořádkový textový vstup |
| checkbox | Zaškrtávací políčko, lze označit vícero |
| radio | Zaškrtávací políčko, které lze označit pouze jedno ze skupiny |
| submit | Potvrzovací tlačítko, které odesílá potvrzení pro skripty nebo PHP |
| button | Tlačítko |
| password | Jednořádkový textový vstup, jehož znaky není vidět (měněny na „•“) |
<form>
<input type="text" placeholder="Jméno">
<input type="text" placeholder="Přijímení">
<input type="submit" value="Submit">
</form>
#3 Atributy formuláře
Atribut action
Atribut action definuje akci, která má být vykonána po odeslání formuláře. Často se jedná o uložení do databáze nebo spuštění PHP či JavaScriptového skriptu. Odesílá se po stisknutí prvku <input>, který má jako typ hodnotu submit. Může to tedy vypadat takto:
<form action="loadToDatabase.php">
<input type="text" placeholder="Jméno a příjmení">
<label for="narozeni">Datum narození</label>
<br />
<input type="date" id="narozeni">
<input type="submit" value="Odeslat">
</form>
Atribut method
Atribut method specifikuje co má protokol HTTP provést, při odeslání formuláře. Existují dva hlavní typy – GET a POST, přičemž každý slouží něčemu jinému.
Informace o metodě GET, které se s ní pojí:
- Po odeslání se data uloží na konec URL adresy – proto by se metoda GET neměla nikdy používat pro citlivá data
- Dalším omezením je délka – nesmí přesáhnout 2048 znaků (u feedback formulářů s většími texty může nastat problém)
- Hodí se pro vyhledávání, jelikož připíná obsah do URL, je však podobně jako Query nezabezpečená
- Vhodná pro ukládání do oblíbených stránek – data jsou v URL
A vlastnosti metody POST:
- Zapezpečené odesílání, data se ukládají do HTTP žádosti (ve většině případů pojištěno i protokolem HTTPS)
- Data se neukládají do URL
- Nemá žádná omezení pro velikost obsahu
<form method="post">
<!-- Obsah formuláře -->
</form>
Atribut target
Atribut target specifikuje, kde se zobrazí potvrzení po odeslání formuláře. Hodnoty mohou být následující:
- _self – objeví se ve stejném okně a záložce
- _blank – objeví se v novém okně nebo záložce (na základě prohlížeče)
- _parent – objeví se v dokument v nadřazené skupině
- _top – objeví se na stránce ve zcela novém okně
- jméno prvku <iframe> – objeví se v prvku <iframe> s názvem podle atributu name
<form target="_blank">
<!-- Obsah formuláře -->
</form>