Formuláře

Funkce formulářů

Jako formulář můžeme označit vše, pomocí čeho je možné odesílat na server informace. Skládá se tedy z různých vstupních polí, zaškrtávacích políček, vysouvacích nabídek a tlačítek. Těm se souhrnně říká ovládací prvky. Pomocí formulářů je možné získat od uživatele data a s nimi dál pracovat (anketa, registrace na fóru, změna hesla...). Data získaná z formulářů pak zpracovává nějaký klientský nebo serverový skript.

Celý formulář (všechny ovládací prvky) je ohraničen elementem <form>. Ten musí povinně obsahovat atribut action, jehož hodnotou je nějaká webová stránka. Na ní se zadaná data odešlou a ona je zpracuje. V praxi se dost často formulář odkazuje na tu samou stránku ve které je obsažen.

Dalším často používaným atributem je method, který udává, jak budou data odeslána. V případě method="get" jsou data odesílána spolu s adresou stránky. Ta pak může vypadat třeba následovně: http://www.adresa.cz/index.htm?jmeno=Petr za otazníkem jsou informace které uživatel vyplnil a odeslal. Pokud se informací odesílá více, oddělí se ampersandem ("&").

Názorně si to můžete zkusit na tomto formuláři:

Druhou variantou je method="post". V tom případě se data odesílají v požadavku HTTP hlavičky a nejsou tedy vidět v adrese požadované stránky. Toho se využívá zejména při odesílání hesla nebo delších textů.

Element <form> může obsahovat jakékoliv prvky kromě dalšího <form>. Nesmí se tedy vnořovat jeden do druhého. Obsahem také nemůže být rovnou text - musí se vnořit například do odstavce (<p>).

Formuláře pro zadávání textu

Nejčastěji používaný je element <input />. Jeho atribut type pak určuje, o jaký konkrétní ovládací prvek se bude jednat. Dále musí jako každý jiný ovládací prvek obsahovat atribut name, který je jedinečný v celém elementu <form>. Na stránce se však může vyskytovat jiný formulář obsahující elementy se stejným atributem name.

type="text"

Jedná se o výchozí hodnotu (pokud není nastaven atribut type). Zobrazí vstupní pole určené pro zadávání textu. Pokud obsahuje atribut value, bude jeho obsah zobrazen jako výchozí hodnota.

<input type="text" name="barva" value="červená" />

type="password"

To samé jako type="text", ale zadávaný text se nezobrazí. Místo něj je každý znak nahrazen kolečkem nebo hvězdičkou (záleží na prohlížeči).

<input type="text" name="heslo" />

type="checkbox"

Vytvoří zaškrtávací políčko. Těch může být označeno hned několik nebo nemusí být vybráno žádné (narozdíl od type="radio"). Již předem zatržené políčko je možné vytvořit pomocí atributu checked="checked". Nezaškrtnutá políčka se vůbec neodesílají.

<p><input type="checkbox" name="zluta" value="ano" />Žlutá</p>
<p><input type="checkbox" name="zelena" value="ano" checked="checked" />Zelená</p>

type="radio"

Je něco podobného jako type="checkbox". V tomto případě je ale možné vybrat jen jednu možnost. Všechny elementy <input /> zde proto mají stejný atribut name, jelikož se odešle pouze hodnota u zaškrtnuté možnosti.

<p><input type="radio" name="barva" value="zluta" /> Žlutá</p>
<p><input type="radio" name="barva" value="zelena" /> Zelená</p>
<p><input type="radio" name="barva" value="cerna" checked="checked" /> Černá</p>

type="submit"

Vytvoří odesílací tlačítko, které odešle celý formulář. Hodnota atributu value se zobrazí jako nápis na tlačítku.

<input type="submit" value"potvrdit" />

type="reset"

Tlačítko, které nastaví všechny hodnoty ve formuláři na výchozí.

<input type="reset" value="vymazat formulář" />

type="hidden"

Skrytý ovládací prvek, o kterém uživatel vůbec neví. Používá se většinou pro odesílání některých informací nutných pro správný chod skriptu, který bude formulář zpracovávat. Jako atributy připadají v úvahu pouze name a value.

Druhým používaným formulářovým elementem pro zadání textu je <textarea>. Ten služí pro vkládání větších bloků textu. Je párový a jeho obsah se zobrazí jako výchozí hodnota. Povinně se u něho musí uvádět atribut rows, udávající počet viditelných řádek (pokud je jich víc, lze skrolovat) a atribut cols, který udává počet sloupců. Jeden sloupec je zde definován jako šířka průměrného znaku.

<textarea rows="7" cols="40" name="text">
  Výchozí text.
</textarea>

Výchozí text.

< Předchozí Následující >

O webu

Slovníček pojmů

Odkazy

Verze pro tisk (pdf)