BLACK FRIDAY! Slevy až 80 % jsou všude. Tak je nepropásni a přejdi do rostoucího IT oboru!
BF Sales

Lekce 12 - Formuláře v HTML

V minulé lekci, Multimédia v HTML II. část, jsme si ukázali tagy k tvorbě multimédií, mezi které patří <source>, <track>, <video>, atributy src, type, media a plno dalších.

Formulář je část stránky, která se běžnému uživateli jeví podobně jako dialogové okno. Slouží k získávání informací od uživatele, které jsou následně odeslány na server ke zpracování. K tomu se používají serverové skripty. Musíme tedy vytvořit stránku s formulářem a ještě skript, který zaslaná data správně zpracuje (například pomocí programovacího jazyka PHP). Formulář může obsahovat různá vstupní pole, tlačítka a přepínače. Na základě odeslaných dat (např. políčka s emailovou adresou a textem zprávy) provede aplikace na serveru požadovanou operaci (např. odešle e-mail na zadanou adresu a se zadaným textem).

S formuláři souvisí pojem webová aplikace. Tak se říká dynamickým "webovým stránkám", které se od obyčejných stránek značně oddalují a blíží se spíše aplikaci, jaké běžně známe z desktopů. Nejedná se tedy již o stránku jako dokument, ale o stránku jako program, který od uživatele bere nějaký vstup a poté na něj reaguje, případně opět vrací nějaká data. Formulářů může být na jedné stránce více, ale nesmí být do sebe vnořeny.

<form>

Formulář se vkládá do stránky pomocí tagu <form>. Kód jednoduchého formuláře pro zadání jména a příjmení by mohl vypadat např. takto:

<form method="post">
    <label for="jmeno">Jméno:</label><br />
    <input type="text" id="jmeno" name="jmeno" /><br />
    <label for="prijmeni">Přijmení:</label><br />
    <input type="text" id="prijmeni" name="prijmeni" /><br />
</form>

Ukázka

Kód výše se v prohlížeči zobrazí následovně:

Formulář
localhost

Atributy

Elementu <form> můžeme přiřadit následující atributy:

  • accept-charset - Povolení pouze určitých znakových sad, které server akceptuje. Nejčastěji UTF-8.
  • action - Určuje URL adresu skriptu, který bude formulář zpracovávat. Pokud není uveden, data z formuláře se odešlou na to samé URL, na kterém je formulář (viz příklad výše). Explicitně můžeme zadat adresu skriptu takto:
<form action="vyhodnoceni.php" method="post">
  • method - Určuje metodu odeslání dat. Máme k dispozici 2 metody: GET a POST. Metoda GET je výchozí hodnota (pokud tento atribut neuvedeme) a označuje metodu poslání dat z formuláře pomocí hodnot v URL adrese. Setkáváme se zde s limitem délky hodnot, adresa nevypadá hezky a není zabezpečená - nepoužívejte to tedy pro přihlašování uživatele s heslem. Metoda POST označuje metodu odeslání dat, kdy jsou data zabalena v těle HTTP požadavku. Data jsou šifrována, schována a nemají omezenou velikost. Metoda POST se pro používání formulářů preferuje.
  • autocomplete - Nabývá hodnot on a off, přičemž hodnota on je výchozí. Pokud je atribut autocomplete zapnutý, nabízí prohlížeč uživateli při vyplňování údajů našeptávač, který zobrazuje dříve zapsané hodnoty, například "admin":
  • name - Přiřazuje formuláři název. Používá se zejména, když je na stránce více formulářů nebo když s formulářem pracujeme např. pomocí JavaScriptu.
  • novalidate - Atribut je hodnoty typu boolean. Atribut je zapnutý, pokud je uveden (na hodnotě nezáleží). Specifikuje, zda se má formulář před odesláním zvalidovat. Tento atribut můžeme dospecifikovat zvlášť u jednotlivých elementů formuláře.
  • target - Specifikuje cílové umístění odpovědi formuláře. Hodnota _blank vyvolá odpověď v nové záložce, _top otevře odpověď v nejhlavnějším rámu, _parent v nadřazeném rámu a _self v aktuálním okně (to je výchozí hodnota). Jako hodnotu můžeme také uvést id rámu.
  • enctype - Určuje způsob kódování obsahu formuláře. Výchozí hodnota je application/x-www-form-urldecode, kde jsou mezery nahrazeny plusy a speciální znaky jsou zkonvertovány na hexadecimální hodnoty. Dále můžeme zadat hodnotu multipart/form-data, která je vyžadována v případě, že má formulář pole k odeslání souboru. Tehdy se žádné znaky nenahrazují. Poslední hodnota je text/plain, kdy se nahrazují pouze mezery za plusy.

Formulář může obsahovat následující elementy:

<input>

Představíme si hned jeden z nejznámějších elementů ze sekce formulářů <input>. Používá se ve formulářích, které umožňují uživateli vkládat data. Může mít mnoho podob, které se liší různým nastavením atributů.

Typ definujeme pomocí atributu type. Jednotlivé typy vstupů se liší a proto si ukážeme jen ty nejzákladnější. Všechny atributy jsou shrnuty níže v tabulce:

Název Popis
button Tlačítko
checkbox Zaškrtávací pole (checkbox)
color Výběr barvy (color picker)
date Výběr data (date picker)
datetime-local Výběr data a času (datetime picker)
email Zadání emailové adresy
file Nahrání souboru (upload)
hidden Skryté pole
image Tlačítko s obrázkem k odeslání formuláře
month Výběr měsíce a roku
number Zadání čísla
password Zadání hesla
radio Přepínací tlačítko (radiobutton)
range Zadání čísla posuvníkem
reset Vyprázdní formulář
search Vyhledávací pole
submit Tlačítko k odeslání formuláře
tel Zadání telefonního čísla
text Zadání krátkého textu
time Zadání času
url Zadání URL adresy
week Zadání týdnu a roku

Atributy

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Následující atributy jsou společné pro všechny typy inputů:

  • autocomplete - Nabývá hodnot on a off, přičemž hodnota on je výchozí. Pokud je atribut zapnutý, nabízí prohlížeč uživateli při vyplňování údajů našeptávač, který zobrazuje dříve zapsané hodnoty.
  • disabled - Atribut je typu boolean. Pokud je uveden, nelze měnit hodnotu elementu a ten je často zobrazen jako zašedlý.
  • list - Obsahuje id elementu <datalist>, položky listu poté slouží jako předdefinované možnosti elementu <input>.
  • readonly - Atribut je typu boolean. Pokud je uveden, nelze hodnoty v daném poli editovat.
  • name - Definuje jméno elementu. Jméno musí být unikátní vzhledem k formuláři a je po odeslání použito jako klíč v dvojici klíč-hodnota, která se na server odešle.
  • value - Přednastavená hodnota pole.
  • autofocus - Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
  • form - Element <input> může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit pouze jednomu formuláři.
  • pattern - Obsahuje regulární výraz, podle kterého se má hodnota v poli validovat.
  • placeholder - Definuje text, který se zobrazí v případě, že je pole prázdné. Obvykle je vykreslen zašedle a slouží jako nápověda.
  • required - Atribut je typu boolean. Pokud je uveden, znamená to, že pole musí být pro odeslání formuláře vyplněné.

<label>

Tag <label> je důležitým prvkem formulářů. Slouží k popisu polí, je to tedy text vedle pole, který udává, k čemu pole slouží. Mnoho lidí labely nepoužívá a vedle políčka vloží prostý text. To je ale špatně a projeví se to mimo jiné například u checkboxů, kde se při kliknutí na label (popis pole) políčko zaškrtne, ale při kliknutí na prostý text vedle textboxu se nestane nic a musíte se trefit přímo na políčko.

Atributy

Tenton tag je párový a má následující atributy:

  • for - Atribut obsahuje id elementu, ke kterému patří label.
  • form - Element může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit více formulářům.

Ukázka

Checkbox s labelem může vypadat například takto (ukázka s labelem a bez labelu):

<form>
    <label for="spravne">Správně</label>
    <input type="checkbox" name="spravne" value="Správně" id="spravne" /><br />
    Špatně<input type="checkbox" name="spravne" value="Správně" />
</form>

Výsledek vypadá vizuálně stejně, nicméně text labelu je po kliknutí funkční na rozdíl od druhé varianty bez labelu:

label
localhost

Protože už víme, k čemu slouží element <label>, můžeme si ukázat jednotlivé atributy typu <input>.

checkbox

Typ checkbox je klasické zaškrtávací políčko. Je podobné radiobuttonu, ale je možné zaškrtnout více možností a tudíž musí mít každý unikátní název.

Atribut

U typu checkboxu můžeme ještě uvést atribut:

  • checked - Atribut je typu boolean. Pokud je uveden, je políčko zaškrtnuto.

Ukázka

Uveďme si jednoduchou ukázku inputu typu checkbox:

<form>
    <input type="checkbox" id="novinky" name="novinky" value="1" checked="checked" />
    <label for="novinky">Přeji si zasílat novinky emailem.</label><br />
    <input type="checkbox" id="registrace" name="pravidla" value="1" />
    <label for="registrace">Souhlasím s pravidly registrace.</label>
</form>

A výsledek:

checkbox
localhost

Na server jsou odeslána pouze zaškrtnutá pole. Na hodnotě v tomto případě nezáleží a je zvykem ji nastavovat na hodnotu 1 (jako true).

Pokud spolu checkboxy souvisí, můžeme si ulehčit práci tím, že je sdružíme do pole. Budou v atributu name mít hranaté závorky []. Na server poté přijde pole odeslaných hodnot indexované od 0:

Zvolte si ingredience na svou pizzu:<br />
<form>
    <input type="checkbox" id="syr" name="ingredience[]" value="syr">
    <label for="syr">Extra sýr</label><br />
    <input type="checkbox" id="zampiony" name="ingredience[]" value="zampiony">
    <label for="zampiony">Žampiony</label><br />
    <input type="checkbox" id="kukurice" name="ingredience[]" value="kukurice">
    <label for="kukurice">Kukuřice<br />
    <input type="checkbox" id="slanina" name="ingredience[]" value="slanina">
    <label for="slanina">Slanina</label>
</form>

Výsledek:

checkbox
localhost

radio

Typ radio vytvoří přepínací tlačítko (tzv. radiobutton). Tlačítka seskupujeme tak, že jim dáme stejný název (atribut name). Při změně volby se původní volba odznačí. Odesláno potom bude jen jedno vybrané tlačítko.

Atribut

Typ inputu radio má pouze jeden atribut:

  • checked - Atribut je typu boolean. Pokud je uveden, je daná možnost zaškrtnutá.

Ukázka

Ukázka inputu typu radio:

Vyberte si barvu vzhledu:<br />
<form>
    <input type="radio" id="zluta" name="barva" value="yellow" />
    <label for="zluta">žlutá</label><br />
    <input type="radio" id="modra" name="barva" value="blue" checked="checked" />
    <label for="modra">modrá</label><br />
    <input type="radio" id="cervena" name="barva" value="red" />
    <label for="cervena">červená</label>
</form>

Výsledek:

radio
localhost

Pokud vás zajímá zpracování takových formulářů na serveru, doporučuji začít základy PHP a projít si tento jazyk. Pokud základy PHP již máte, můžete přejít na článek přímo o zpracování formulářů v PHP a formulář si zkusit zpracovat.

V další lekci, Formuláře v HTML II. část, se naučíme nové zajímavé typy inputů. Typ bude na čas, heslo, text, reset a i různá tlačítka pro odeslání formuláře.


 

Předchozí článek
Multimédia v HTML II. část
Všechny články v sekci
HTML5
Článek pro vás napsal Tomáš Muzikant
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje vývoji automatizačních linek do výrobního průmyslu. Ve volném čase se věnuje JavaScriptu a vývoji webových stránek.
Aktivity (4)

 

 

Komentáře

Avatar
Jan Balák
Člen
Avatar
Jan Balák:5. listopadu 17:09

K tagu LABEL bych ještě doplnil, že je to velmi důležitý tag ohledně přístupnosti. Pokud je tento tag definovaný, čtečka obrazovky, jakmile form prvek s labelem získá focus, přečte automaticky jeho návěští. Takže vyplňování takového formu je pak rychlé a přehledné. Pokud label neuvedu, screenreader přečte jen typ prvku (editační pole) a návěští si musí uživatel zjistit sám. Což u je u některých formulářů nespolehlivé, zvláště pokud je návěští jinde, než před prvkem.

 
Odpovědět
5. listopadu 17:09
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.