Jdi na obsah Jdi na menu
 


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 = "&gt;&gt; zadejte sem &lt; &lt;" />

 </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

  &gt;&gt; na toto místo &lt;&lt;

  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>.