HTML 5 – Lekce 6
V této lekci si povíme něco o formulářích. A co to vlastně formuláře jsou? S formuláři se můžete setkat prakticky kdekoliv při registraci, objednání zboží na internetu nebo při posílání emailu. Formuláře slouží k odeslání dat určené uživatelem které se poté mohou dále zpracovat.
Zde vám napíši přehled mluvnice pro tuto lekci:
<form> – párový – označuje formulář
<input> – nepárový – pomocí tohoto tagu se dají vložit tlačítka, kolonky, atd..
<datalist> – párový – označuje rozbalovací nabídku možností formuláře
<select> – párový – označuje výběrové menu
<option> – párový – využívá se ve volbě výběrového menu
<textarea> – párový – vytvoří se pole, do kterého uživatel může napsat text
<label> – párový – popisuje pole
<fieldset> – párový – sdružuje různá pole
<legend> – párový – popisuje skupinu sdružených polí
<optgroup> – párový – vytváří skupinu možností výběru
<button> – párový – něco jako <input>, ale párový a vkládají se do něj tagy
<output> – párový – vypočítání výsledku příkladu
Jak vidíte, přehled mluvnice je velice pestrý. Nyní tedy jak mam v oblibě probereme tag od tagu s jeho atributy.
Prvním tagem je tedy párový tag <form> označující formulář. Nemám k němu nic moc co dodat, snad jen pár atributů:
action – script, který bude zpracovávat data – hodnotou je URL scriptu
method – způsob předávání dat – hodnotou je buďto get nebo post
target – specifikuje kde otevřít odpověď – v tomto okně, novém okně
novalidate – specifikuje, že formulář nemá být ověřen před odesláním
autocomplete – specifikuje, jestli má mít formulář mít automatické doplnění zapnuté nebo vypnuté
Dalším tagem, je tag <input>. S pomocí tohoto tagu můžeme do formuláře vkládat tlačítka, kolonky na hesla, atd … Má taktéž spoustu atributů, které vám zde vypíši:
type – označuje typ vstupního pole – hodnoty vám s vysvětleními vypíši později
name – jméno pole – hodnotou je libovolné jméno
value – hodnota pole nebo text zobrazený na tlačítku – libovolná hodnota
accept – specifikuje jaké typy souborů server akceptuje (pouze pro type=“file“)
autofocus – specifikuje automatické zaostření na formulář při načtení stránky
checked – specifikuje, že formulář bude předem zaškrtnutý při načtení (pro type=“checkbox“ nebo type=“radio“)
min – specifikuje minimální hodnotu pole
max – specifikuje maximální hodnotu pole
Hodnot atributu type je několik a na jeho hodnotě závisí další atributy, které upravují políčko. Všechny tyto atributy vám zde vypíši:
text – obyčejné textové pole, dalšími atributy tohoto políčka jsou:
size – šířka ve znacích
maxlength – maximální počet znaků
password – textové pole s hvězdičkami místo znaků, využívá se především pro hesla
Další atributy tohoto pole jsou stejné jako u text
hidden – skryté pole s přednastavenou hodnotou
Žádné další atributy
radio – přepínací puntíky (několik tagů input s atributem type s hodnotou radio a atributem name stejného jména tvoří skupinu možností)
Dalšími atributy jsou:
checked – bez hodnot, způsobí stisknutí puntíku
checkbox – zaškrtávací tlačítka, dalšími atributy jsou:
checked – bez hodnot, způsobí zaškrtnutí tlačítka
submit – potvrzující tlačítko, slouží k odeslání formuláře
Žádné další atributy
reset – vymazání obsahu ve všech polích formuláře (jejich přednastavených hodnot)
Bez dalších atributů
image – tlačítko ve formě obrázku pro potvrzení + odesílá souřadnice kliknutí
Dalšími atributy jsou:
src – URL obrázku
file – umožní zadat soubor, doplňujícími atributy jsou:
accept – typ nabízených souborů
button – tlačítko ovládané scriptovými atributy
Nemá žádné další doplňující atributy
Toto jsou všechny hodnoty atributu type. Je jich poměrně mnoho, ale myslím, že web se bez formulářů neobejde, proto doporučuji se tyto hodnoty naučit.
Dalším párovým tagem je tag <select>. Tento tag využijete při vytvoření výběrového menu. Jednotlivé položky výběru označuje párový tag <option>. Tag <select> má pár atributů které vám zde vypíši:
name – jméno pole odesílané s daty – hodnotou je libovolné jméno
size – počet zobrazujících se řádků – hodnotou je libovolné číslo
Již výše zmíněný párový tag <option> označuje jednotlivou položku výběru. Mezi tagy <option> a </option> se zadává text, který bude ve výběrovém menu. Objevuje se tedy především v obsahu tagu <select>. Má nějaké atributy, které vám zde vypíši:
value – řetězec odesílaný jako hodnota pole – hodnotou je libovolný řetězec
selected – položka bude předem vybrána – bez hodnoty
disabled – položka je vidět, ale je šedá a nedá se vybrat – hodnota je disabled
Dalším párovým tagem je tag <textarea>. Tento tag označuje “velké“ textové pole. Setkáte se s ním prakticky kdekoliv v emailu, atd… Má rovněž atributy, které vám zde vypíši:
name – jméno odesílané společně s daty – hodnotou je libovolné jméno
cols – šířka pole ve znacích – hodnotou je počet znaků na jednom řádku
rows – výška pole v řádcích – hodnotou je počet řádků
wrap – zalamování slov na koncích řádků – hodnoty vám vypíši samostatně
maxlenght – maximální délka textového pole
V HTML 5 můžeme již použít nově i atribut maxlenght, který nám specifikuje maximální počet znaků v textarea. To je velký posun, protože právě tento atribut mnoha lidem u textarea chyběl.
Zde vám tedy vypíši slíbené hodnoty atributu wrap ( zalamování slov ):
soft – řádky se budou zalamovat pouze v místě mezery
hard – řádky se budou zalamovat v místě mezery nebo v příliž dlouhém slově
off – řádky se nebudou zalamovat vůbec
Na závěr tohoto tagu bych chtěl odůvodnit jeho párovost. Pokud mezi tagy <textarea> a </textarea> vložíte nějaký text, vypíše se v tomto poli.
Dalším, pro někoho zbytečným, tagem je párový tag <label>, neboli popisek pole. Píšeme jej před políčkem, aby to dávalo smysl v prohlížečích, které <label> nepodporují. Výhodou je, že pokud nastavíme spojitost s polem a tagem <label>, tak po kliknutí na popisek aktivujeme příslušné pole. Spojitost s polem navážeme atributem id, který vložíme do příslušného pole a atributem for, který vložíme do tagu <label>. Hodnoty těchto dvou atributů musí být stejné, je jedno jaké.
Dalším párovým tagem, který je na řadě je tag <fieldset>. S pomocí tohoto tagu můžete opticky rozdělit formulář na několik částí. Pokud použijeme tag <fieldset>, vykreslí se nám okolo zahrnutých objektů slabý rámeček. Můžete s pomocí tohoto tagu například oddělovat jednotlivé části formulářů, což se hodí třeba u registrací, nebo objednávek zboží na internetu. Tento tag nemá žádné atributy (jeho vzhled se dá změnit pomocí stylů CSS).
Párový tag <legend> se používá jen v oblasti tagu <fieldset>. S tímto tagem můžeme jednotlivé skupiny formuláře pojmenovat. Pokud tento tag připíšeme tedy do oblasti <fieldset>, rozdělovací čára se přeruší a na místo ní se objeví název určité části formuláře. Jediným atributem je atribut align, který jistě nemá cenu ani vypisovat, protože ho již známe z dřívějších tagů.
Dalším tagem který je na řadě, je párový tag <optgroup>, který můžete použít pouze v oblasti <select>. Tímto tagem vytvoříte skupinu voleb. Opět jeho možnosti určíte tagem <option>. Nadpis těchto skupin vytvoříte atributem label a jeho hodnotou bude váš název.
A konečně posledním tagem je párový tag <button>. Tento tag se v praxi chová stejně jako <input>, ale je párový a tak do něj můžeme vkládat obrázky, ztučněné texty, nadpisy a podobně… Má rovněž pár atributů:
type – druh vstupního pole – hodnoty vám vypíši dole
name – stejné jako všude jinde – nějaké jméno
value – tato hodnota by se měla odesílat, (nefunguje v IE) – libovolná hodnota
Zde jsou slíbené hodnoty atributu type:
submit – odešle formulář
reset – vymaže formulář
button – nic nedělá, může se ovšem na něj navázat script a pak něco dělat bude
Tak to je k formulářům vše. Formuláře se tedy dají využít prakticky kdekoliv. Myslím, že nejčastější využití je asi přihlašovací políčka na webu. Doufám, že se vám tato lekce líbila a také že jste jí správně pochopili a nebudou vám dělat formuláře žádné problémy.