Info: obsah těchto stránek byl vytvořen v roce 2018, takže některé informace již jsou zastaralé, i když všeobecné základy jsou stále platné
Formuláře
Formuláře slouží k zadání nějakých údajů, informace apod., které jsou následně nějak zpracovány. Formulář se většinou skládá z několika textových polí, tlačítek, přepínačů, výběrových seznamů a pod.. Všechny tyto komponenty jsou zapsány mezi tag <form>. Zde je možné vložit i jiné tagy pro popis apod.. Pro komponenty je možné nadefinovat ovladač v JavaScript (kontrola zadaných údajů, výpočty apod.). Po odeslání formuláře je jeho obsah zpracován na serveru nebo odeslán emailem.
Tag FORM
Definice formuláře. Všechny tagy umístěné uvnitř tohoto, jsou zobrazeny jako obsah formuláře. V jednom tagu <form> mohou být vloženy také další tagy <form>.
<form>
obsah formuláře
<div style="display:none"><label>Fill This Field</label><input type="text" name="honeypot" value=""></div></form>
* minimálně
<form method="POST" action="http://www.vutbr.cz/zpracuj_formular.html">
* povinný atribut definuje adresu URL, která zpracuje data z formulaře
nebo email adresu, kam se data zašlou
action="http://www.vutbr.cz/zpracuj_formular.html"
action="mailto:jmeno@server.cz"
* atribut který nastavuje kódování dat - iplicitně je kódování
Internet Media Type "application/x-www-form-urlencoded" (nemusí se zadávat)
! musí se zadat při použití "pole pro výběru souborů" a odeslání na email
enctype="multipart/form-data" - odesílají se data i soubory
enctype="text/plain" - odesílání jako email
(každé kódování zakóduje data do jiného tvaru, aby při jejich přenosu
nedošlo k jejich poškození)
* povinný atribut definující metodu pro odeslání dat
method="GET" - data jsou připojena k adrese URL zadané v action
method="POST" - data jsou odeslána zvláštním přenosem (nejsou vidět)
* atribut definuje použitou znakovou sadu
accept-charset="unknown" - implicitně, znaková sada formuláře je stejná
jako dokumentu, kde je formulář umístěn
accept-charset="iso-8859-2"
nebo
accept-charset="utf-8"
* atribut definující jméno formuláře
name="muj_fomular"
* atributy události - form má speciální
onSubmit - příkazy jsou vykonány po stisku tlačítka pro odeslání,
ale ještě před vlastním odesláním (kontrola zadaných údajů)
onReset - příkaz je vykonán po stisku mazacího tlačítka "Reset"
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno formuláře, stejné jako name, použitelné jako odkaz ve skriptech
title - označení
událostní atributy typu on...
Metoda GET nebo POST?
GET
malé formuláře, krátké proměnné
minimální znalost zpracování dat (jednodušší použití)
malá bezpečnost, data jsou přenášena v adrese URL a proto viditelná
možnost předání parametrů bez použití formuláře
POST
při omezení délky příkazového řádku ze strany serveru
vyšší bezpečnost, data jsou přenášena skrytě
Jednoduchý formulář
Poznámka: Adresa pro zpracování obsahu je vymyšlená/nefunkční
Poznámka: Adresa pro odeslání obsahu je vymyšlená/nefunkční
<form action="mailto:jmeno@server.cz" method="post" enctype="text/plain"
onSubmit="window.alert('Tento formulář se právě odesílá elektronickou poštou')">
<p>Jméno: <input type="text" name="jmeno" size="30" maxlength="80"></p>
<p>Pohlaví:
<input type="radio" name="pohlavi" value="m"> muž
<input type="radio" name="pohlavi" value="z"> žena
</p>
<p>Sudent: <select name="fakulta" size="1">
<option> FAVU </option>
<option> FEKT </option>
<option> FIT </option>
</select>
</p>
<input type="submit">
<div style="display:none"><label>Fill This Field</label><input type="text" name="honeypot" value=""></div></form>
Tag INPUT
Tento tag definuje prvky formuláře:
textové pole
maskované textové pole
prvek pro výběr souboru
zaškrtávací políčka
rádiové přepínače
obyčejné tlačítko
odesílací tlačítko
nulovací tlačítko
tlačítko s obrázkem
skryté pole
<input>
tag má mnoho atributů, ale pro jednotlivé typy se používají jen některé
* povinný atribut definující typ prvku
type="button" - tlačítko
type="checkbox" - zaškrtávací políčko
type="file" - zadání/výběr souboru
type="hidden" - skryté pole
type="image" - obrázkové tlačítko
type="password" - maskované textové pole
type="radio" - radiový přepínač
type="reset" - nulovací tlačítko/reset
type="submit" - odesílací tlačítko
type="text" - textové pole
* povinný atribut určuje jméno pole
name = "nazev"
* ostatní atributy dle definice typu (viz.níže)
Textové pole - type="text"
Zadává se libovolný text. není možné omezit zadání např. jen na čísla. Omezení je možné jen na maximální délku.
Příklad textového pole:
<input type="text" name="nazev" size="10" maxlength="60" value="Název něčeho">
* zobrazená délka textu ve znacích
size="10" - okénko pro zobrazení 10-ti znaků
* maximální délka zadaného textu
maxlength="60" - maximální povolená délka je 60 znaků
* přednastavená hodnota pole
value="Název něčeho" - text bude zobrazen při zobrazení formuláře
nebo po jeho vynulování/vymazání/resetu
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Maskované textové pole - type="password"
Zadání libovolného textu. Při zápisu je text nahrazován maskou (např. * apod.). Používá se pro zápis hesla apod.. Pozor! Při přenosu dat, je obsah pole normálně čitelný!
Příklad maskovaného textového pole:
<input type="password" name="heslo" size="10" maxlength="10" value="">
* zobrazená délka textu ve znacích
size="10" - okénko pro zobrazení 10-ti znaků
* maximální délka zadaného textu
maxlength="10" - maximální povolená délka je 10 znaků
* přednastavená hodnota pole
value="" - text bude zobrazen při zobrazení formuláře
nebo po jeho vynulování/vymazání/resetu
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Prvky pro výběr souboru - type="file"
Prohlížeč za pole doplní tlačítko "Procházet ...", umožňující výběr souboru.
Příklad prvku pro výběr souboru:
<input type="file" name="soubor">
* zobrazená délka textu ve znacích (nemusí se zadávat)
size="20" - okénko pro zobrazení 20-ti znaků (implicitně)
* maximální délka zadaného textu (nemusí se zadávat)
maxlength="20" - maximální povolená délka je 20 znaků
* omezení typu vybíraného souboru
accept="image/*" - vybírá jen obrázky (všechny typy)
accept="image/gif" - vybírá jen obrázky typu GIF
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
* při použití se musí nastavit fe <form> action
<form action="http://www.vutbr.cz/zpracuj" method="post" enctype="multipart/form-data">
<p>Výběr souboru: <input type="file" name="soubor"></p>
<div style="display:none"><label>Fill This Field</label><input type="text" name="honeypot" value=""></div></form>
Zaškrtávací políčka - type="checkbox"
Vhodný pro výběr položek. Je možné vybrat jednu, více nebo žádnou. Vhodné pro výběry ano/ne apod.
Příklad zaškrtávacího políčka:
student
<input type="checkbox" name="hodnota" value="stav">
* povinný atribut s vybranou hodnotou
value="ano" - při zašktnutí políčka bude v poli student hodnota ano
* atribut zašktnutí
checket - políčko bude zašktnuté
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
* pokud je použito více zaškrtávacích políček jako jedna skupina,
musí mít stejné jméno pole v name
<input type="checkbox" name="predmet" value="jazyk"> jazyk
<input type="checkbox" name="predmet" value="fyzika"> fyzika
<input type="checkbox" name="predmet" value="matiky"> matika
<input type="checkbox" name="predmet" value="malovani"> malování
Radiová tlačítka - type="radio"
Umožňuje výběr ze skupiny, ale jen jedné položky. Vždy se používají ve skupině.
Příklad radiového tlačítka:
FAVU
<input type="radio" name="student" value="favu">
* povinný atribut s vybranou hodnotou
value="favu" - při stlačení bude v poli student hodnota favu
* atribut vyběru
checket - tlačítko bude vybrané
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
* tlačítka tvoří skupinu a musí mít stejné jméno pole v name
<input type="radio" name="fakulta" value="favu"> FAVU
<input type="radio" name="fakulta" value="fekt"> FEKT
<input type="radio" name="fakulta" value="fit"> FIT
Odesílací tlačítko - type="submit"
Odešle zadaná data z formuláře na adresu ve form> v atributu acction.
Příklad odesílacího tlačítka:
<input type="submit"> - minimální verze
<input type="submit" value="Odeslání zadaných hodnot">
<input type="submit" value="Odeslání zadaných hodnot" name="odeslani_hodnot">
* atribut s textem, který se zobrazí na tlačítku
value="Odeslání formuláře"
* atribut se jménem pole - při odeslání se do pole předá hodnota atributu value
name="odeslano"
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Nulovací tlačítko - type="reset"
Vynuluje, vymaže zadaná data z formuláře. Ve formuláři se zobrazí jen data nastavená v atributech value u jednotlivých polí formuláře.
Příklad nulovacího tlačítka:
<input type="reset"> - minimální verze
<input type="reset" value="Použij přednastavené hodnoty">
* atribut s textem, který se zobrazí na tlačítku
value="Použij přednastavené hodnoty"
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Tlačítko s obrázkem - type="image"
Je to obdoba citlivé obrazové mapy. Po kliknutí na obrázek, jsou předány kourdináty bodu, kde bylo kliknuto - x, y.
Příklad tlačítka s obrázkem:
<input type="image" src="obr/obr-mapa-tl.jpg" name="tlacitko_obr">
* povinný atribut src s adresou obrázku
src="obr/obr-mapa-tl.jpg"
* dál je možné zadat všechny atributy jako u obrázku
border, width, height, hspace, vspace, alt, align apod.
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
* příklad
<form action="http://www.vut.cz/zpracuj" method="post">
<input type="image" src="obr/obr-mapa-tl.jpg" name="tlacitko_obr"
border="0" width="125" height="165" hspace="0" vspace="0"
alt="Obrázek pro obrázkové tlačítko">
<div style="display:none"><label>Fill This Field</label><input type="text" name="honeypot" value=""></div></form>
Obyčejné tlačítko - type="button"
Vytvoří tlačítko, na které nemaže ani neodesílá formulář. Používají se ve spojení s atributy událostí a programy v JavaScript.
Příklad obyčejného tlačítka:
(nezadán text) (zadán text "Přepočítej")
<input type="button">
<input type="button" value=" Přepočítej ">
* atribut pro zadání textu, který se vypíše na tlačítku
value="Přepočítej"
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Tlačítek na jednom formuláři může být více a to i tlačítek pro odeslání. To které tlačítko pro odeslání uživatel stiskl, zjistíme z odeslané hodnoty zadané ve value v tlačítku.
Skrytá pole - type="hidden"
Tento typ pole se ve formuláři nezobrazuje. V textu souboru HTML je obsah tohoto pole normálně vidět - není to tajné. Používá se k rozličení různých fotmulářů, jejich stavu apod.
<input type="hidden" name="stav" value="zadani">
* po odeslání formuláře, bude předáno pole stav s hodnotou zadani
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Tag BUTTON
Umožňuje definovat vlastní tlačítko. Má stejné atributy jako pro tag <input type="button" >. Je možné vytvořit tlačítka typu submit, reset a button.
<button type="subbmit">
Pošli mi <img src="obr/aContact.gif" border="0" width="20" height="22" alt="Pošli email" hspace="0" vspace="0">
</button>
* atribut pro zadání typu tlačítka
type="subbmit" - odešle formulář
type="reset" - vynuluje formulář
type="button" - vytvoří obyčejné tlačítko
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Tag TEXAREA
Vytváří víceřádkovou oblast pro zapsání textu. Pokud je text delší, tak v zobrazené oblasti roluje.
Příklad víceřádkové oblasti:
<textarea name="zprava" cols="30" rows="5">
</textarea>
* mezi tag je možné zapsal text (bez tagů!), který se uživateli zobrazí
a může jej přepsat
* povinný atribut se jménem oblasti
name="zprava"
* šířka zobrazené oblasti - počet znaků na řádku
cols="30"
* výška zobrazené oblasti - počet řádků
rows="5"
* zalamování řádků
wrap="virtual" - text se zalamuje jen v zobrazené oblasti,
ale je přenášen v jednolité podobě, zalomení se projeví
jen v místě, kde byl stisknut Enter
wrap="physical" - text se přenese ve stejné podobě i se zalomením řádků,
jak je zobrazen v oblasti uživateli
wrap="off" - implicitní stav
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Tag SELECT
Slouží pro tvorbu rozbalovacích nabídek a rolovacích seznamů. Uvnitř tagu může být jen tag <option> a <optgroup>.
<select name="fakulta" size="3">
položka seznamu
...
</select>
* povinný atribut k definici pole
name="fakulta" - pole jménem "fakulta"
* atribut pro nastavení typu výběru
multiple - přepínač umožňují výběr více hodnot, implicitbě jen jedna
* atribut určující počet zobrazených řádků
size="3" - zobrazí tři řádky, implicitně 1 řádek
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Tag OPTION
Tento tag definuje položky v tagu <select>. V tagu může být jen holý text a nic jiného.
<option> text </option>
<option value="hodnota"> text </option>
* atribut pro zadání vrácené hodnoty při výběru
pokud není zadána je vrácen obsah tagu (text)
value="hodnota"
* atribut pro přednastavený výběr
selected - pokud je zapsán, je tato položka vybrána
* atribut pro zadání popisky
label="popis"
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Tag OPTGROUP
Umožňuje seskupovat nabídku. Není ale možnot více úrovní vnoření, jen jedna. Uvnitř tagu může být jen tag <option>.
Příklad seskupování v rolovací nabídce:
<select name="predmet">
<optgroup label="JH1">
<option value="AA1"> AA1</option>
<option value="AA2"> AA2</option>
<option value="AA3"> AA3</option>
</optgroup>
<optgroup label="JH2">
<option value="BAN1"> BAN1</option>
<option value="BAN2"> BAN2</option>
<option value="BAN3"> BAN3</option>
<option value="BAN4"> BAN4</option>
</optgroup>
<option value="JH3"> JH3</option>
<optgroup label="JH4">
<option value="DA1"> DA1</option>
<option value="DA2"> DA2</option>
</optgroup>
</select>
<optgroup label="nazev_skupiny">
položka seznamu
...
</optgroup>
* atribut pro definici názvu skupiny
label="nazev_skupiny"
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Společné atributy v prvcích formuláře
* atribut pro stanovení pořadí při procházení formuláře pomocí tabelátoru
tabindex="5" - číslo 1-n, kde n je počet prvků ve formuláři
tabindex="0" - prvek nebude možné pomocí tabelátoru vybrat
* atribut pro nastavení horké klávesy pro výběr prvku ve formuláři
acceskey="H" - po stisku kombinace Alt-H se přesune kurzor na tento prvek
* atribut pro zakázání prvku
disabled - prvek bude vidět (většinou bude šedý) a nepůjde do něj nic zadat
* atribut pro zablokování textového prvku
readonly - uživatel nemůže měnit obsah
Popisky a seskupení elementů ve formuláři
Tag LABEL
Definuje vztah mezi prvkem formuláře a popiskou. Po kliknutí na popisku je kurzor přenesen na příslušný prvek formuláře.
Příklad, text "Rodné číslo" je aktivní:
Datum narození:
<label> popisek a prvek formuláře </label> - implicitní asociace
<label for="jmeno_prvku"> popisek </label> - explicitní asociace
příklad:
<label>Datum narození: <input type="text" name="datum_narozeni"></label>
<label for="RC">Rodné číslo:</label>
<input type="text" name="rodne_cislo" id="RC">
* atribut pro zápis identifikátoru (jména) prvku formuláře,
kam se má přenést kurzor
for="jmeno_prvku"
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Tag FIELDSET
Slouží k vytvoření skupiny prvků formuláře. Zlepšuje přehlednost a seskupuje prvky stejného významu. Skupina je většinou ohraničena.
<fieldset>
část formuláře (popisky a prvky)
</fieldset>
* atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Tag LEGEND
Definuje popisek ke skupině prvků <fieldset>. Tento tag se smí zapsat jen do tagu <fieldset>.
<legend>
text
</legend>
* atribut pro umístění textu vzhledm ke skupině
align="top" - nahoře
align="bottom" - dole
align="left" - vlevo
align="right" - vpravo
* atribut pro nastavení horké klávesy
acceskey="T" - po stisku Alt-T se kurzor přesune na první prvek ve skupině
* další atributy
class - třída stylu
style - přímo vložený styl
lang - jazyk
dir - směr psaní textu
title - označení
id - definuje jméno
title - označení
událostní atributy typu on...
Formulář může být přehledný nebo také ne. Formulář může uživatel vyplnit jednoduše či nikoli. Formulář ...
zobrazení formulářů je statické pokud se nepoužije applet v Java či JavaScript
je nutné správnou volbou typů a velikosti vstupních prvků, zamezit uživateli vložit chybná data (využívat zaškrtávací políčka, přepínače, seznamy apod.)
používat vhodné popisy a legenty, popřípadě na začátku formuláře vysvětlit způsob vyplňování
pokud se obsah formuláře zpracovává na serveru, je potřeba co nejlépe validovat data a v případě chyby formulář vrátit k opravě či doplnění
nevytvářet dlouhé a široké formuláře, optimální členění je na velikost obrazovky (asi 75 znaků na šířku a 30-50 řádků na výšku)
uspořádat prvky formuláře do logických skupin, příbuzná pole seskupovat
pro uspořádání prvků ve formuláři je vhodné použít tabulku
Obsah formulářů je možné odeslat mailem nebo zpracovat na serveru. Zpracování na serveru se liší podle způsobu odeslání - GET, POST. Pro zpracování se používají různé skriptovací jazyky (PHP, ASP, PERL) nebo programovací jazyky.