Formuláře
- formulář pro registraci nějaké služby na internetové stránce,
- vyhledávání na internetové stránce,
- internetové ankety,
- zadávání důležitých údajů před stahováním souborů
Formuláře nabízejí možnost nepřímo komunikovat s uživateli webových stránek.
Vložení formuláře na internetovou stránku
Párová značka <form> a k ní se váže několik parametrů
<form action=“zpracování_formuláře“>
Parametr action určuje, kam budou hodnoty formuláře směřovat. Pokud by se parametr action nezadal je možné, že prohlížeči nebude jasné jak se má zachovat. Výstupem může být e-mailová adresa, nejčastěji však nějaký skript, který data zpracuje.
<form method=“typ_odeslání_dat“>
Pomocí tohoto parametru sdělíme prohlížeči, jakým způsobem chceme data formuláře odeslat. Možné hodnoty jsou:
GET – výsledná hodnota formuláře se doplní na konec adresy URL. Tím je nevýhodou, že může přenášet pouze omezený objem dat. Protože je nastavena hranice pro délku adresy URL (500-2000 znaků)
POST – data odešle v těle požadavku jako samostatný http objekt.
Vytvoření formulářů vyhovující specifikaci XHTML
Strict
Ve specifikaci XHTML je předepsáno, že se uvnitř formuláře mohou vyskytovat pouze blokové elementy. V tom případě máme dvě možnosti:
- <p>
- Nebo značku <div>
Vložení vstupního prvku - input
Pomocí nepárové značky <input> dokážeme vytvořit vstupní formulářové prvky.. Jejich chování ovlivníme množstvím parametrů jako jsou následující parametry.
<input type=“typ_vstupního_pole“>
Typů, které můžeme použít, je dostatečné množství:
- text – jednořádkové textové vstupní pole.
- password – toto vstupní pole je podobné jako pole text s tím rozdílem, že skryje vkládané znaky.
- Textarea – pole s více řádky.
- Checkbox – zatrhávací políčko. V případě nezatržení políčka se hodnota neposílá.
- Radio – zobrazuje přepínač, ve kterém je aktivní vždy pouze jedna hodnota.
- Submit – tlačítko, pomocí něhož se odešlou hodnoty.
- Reset –tlačítko, jež vrátí všechny hodnoty formuláře do implicitního nastavení
- Image – zobrazuje tlačítko s obrázkem.
- Button – vytváří stisknutelné tlačítko. Činnost takového tlačítka je definována skriptem na straně prohlížeče. Hodnota parametru value je popisem tlačítka.
- Hidden – představuje skrytý vstupní prvek. Využívá se k ovlivňování formuláře a mohou se do něj ukládat například data z jiných formulářů.
Textové pole
Textové pole se může použít třeba pro zadání následujících údajů.
- uživatelského jména,
- křestní jméno, příjmení, ulice, města
- výrazu, který chceme vyhledávat,
- e-mailové adresy
Aby se společně s formulářem odeslala data v něm zadaná, je nutné zadat v parametru name název tohoto prvku.
vzhled pole umožňují nastavit dva parametry:
- size, který udává šířku pole ve znacích,
- maxlength, který určuje max šířku pole, tedy maximální počet znaků, které smí uživatel zadat.
<form
action="soubor.xyz">
<p>Jméno uživatele:
<input type="text"
name="user"
size="10"
maxlength="8"
value = ">> zadejte
sem < <" />
</p>
</form>
Do textového pole můžeme zadat
hodnotu předem. Ta hodnota se zadává parametrem value.
Vložení pole pro
zadání hesla (password)
Potřebujeme pole, v němž se budou při psaní dat objevovat místo písmen znaky hvězdičky nebo plné kroužky.
Všechny ostatní parametry (name, maxlength, size, value) mají stejný význam jako u textového pole.
Vložení pole
s více řádky <textarea>
Používáme při umístění komentářů, psaní e-mailů.
Používáme tu parametry:
- name – název (identifikátor) pole,
- cols – šířka pole ve znacích, povinný údaj,
- rows – počet řádků v poli ve znacích, povinný údaj.
<p>Další komentáře:
<textarea
name="komentar" rows="10" cols="20">Zadejte
prosím
>> na toto místo
<<
text.
Potřebujeme data, data, spoustu dat!
...</textarea>
</p>
Zaškrtávací políčko (checkbox)
Používáme:
- při potvrzení o přijmutí obchodních podmínek při objednávání nějaké služby.
- u otázek s možností výběru několika odpovědí, kdy
můžeme vybrat libovolný počet položek.
Dále potřebujeme ještě dva údaje:
name – identifikátor
value – hodnotu
zaškrtávacího pole.
Navíc můžeme zaškrtávací políčko zaškrtávat automaticky
pomocí parametru a hodnoty checked=“checked“.
<p><input
type="checkbox" name="podminky" checked="checked"
/>
Souhlasím s podmínkami používání
diskusního fóra ¨
</p>
Rozšířený přepínač
(radio)
Vždy se vyskytují ve skupinách.
Používáme jej pro:
- otázky, kde lze jako odpověď vybrat pouze jednu z možností,
- zadání pohlaví,
- zadání způsobu placení zboží,
name – udává název skupiny rozšířených přepínačů
value - slouží k odlišení jednotlivých přepínačů ve skupině. Při přenosu dat na server se přenáší pouze hodnota toho přepínače, který je aktivní.
Dále je možné nastavit přepínač předem stejně jako u zaškrtávacích polí.
<p>Pohlaví:
<input type="radio"
name="pohlavi" value="Pan"
checked="checked" />muž
<input type="radio"
name="pohlavi" value="Pani" />žena
</p>
Výběrová nabídka
Značka <select> a <option>
K dispozici je zenam možností, které se zobrazí. Používáme v těchto případech:
- U otázek, kde máme k dispozici několik odpovědí, ale kde je pouze jedna správná.
- Výběr kraje,
- výběr státu,
- výběr kreditní karty.
<select name=“jméno“>
Název nabídky, který se odesílá prohlížeči.
Vlastní položky seznamu se nachází uvnitř značky <select> a označují se pomocí značky <option>. Každý prvek má svoji hodnotu v parametru value stejně jako popis uvnitř značky <option>
Standardně je nastavena ta položka, která je nejvýše. Pokud bychom chtěli nastavit jinou lib. Položku pak zadáme u vybrané položky parametr s hodnotou selected=“selected“.
<p>Úroveň znalostí:
<select name="znalosti">
<option value="0"
selected="selected">---
vyberte možnost ---</option>
<option
value="1">Začátečník</option>
<option
value="2">Pokročilý</option>
<option
value="3">Odborník</option>
</select>
</p>
V tomto případě seznam se objeví až po té co uživatel klepne na prvek formuláře. Je možné, aby se seznam zobrazil okamžitě pomocí parametru size ve značce <select>.