Formuláře v HTML

 Na této stránce se zabývám pouze základní syntaxí formulářů v HTML, což se fakticky týká jen jejich vzhledu.

<form></form> - Chameleon <input> - <select> - <textarea> - Atribut name - Atribut value - Velikosti prvků - Checked a selected

Přehled formulářových tagů

<form>

vymezení oblasti formuláře

<input>

vstupní políčko, odesílací políčko, zaškrtávátka, přepínače, prostě mnoho věcí. Co to přesně bude, určuje type

<select>

výběr, taková ta rolovací nabídka. Někdy se tomu říká drop-down menu

<option>

vyskytuje se uvnitř tagu <select> a představuje jednu možnost v nabídce

<textarea>

oblast pro zadání delšího textu

<label>

popisek pole

<optgrout>

množina voleb

<fieldset>, <legend>

množina prvků s nadpiskem

<form></form>

Tag formuláře. Příklad:

<form action="skript.php3" method="post" target="_blank">

...nějaká vstupní pole + normální html text

...<input type=submit value=odeslat>

</form>

Vypadá to takhle:

Action je vymyšlená, takže to tady nefunguje. Co znamenají jednotlivé atributy:

action obsahuje URL (v tomto případě relativní) na skript, kterému je potom formulář posílán

target určuje cílový rám, ve kterém se budou výsledky zpracovávat. Podobnost s target u odkazů není náhodná. Např. hodnota target="_blank" posílá výsledek do nového okna.

Method

method určuje způsob, kterým budou data odesílána. K dispozici jsou hodnoty GET a POST.

GET je metoda základní (nemusí se zadávat). Data odeslaná metodou GET jsou součástí URL za otazníkem a jsou vidět. Používá se většinou u krátkých formulářů.

Metoda POST je vhodná pro rozsáhlejší vstupy. Data nepřidává do URL (takže nejsou vidět), ale odesílá je jako samostatný HTTP objekt.

Jaký vliv má method na zpracování dat? Některé skripty mezi metodami get a post nečiní rozdíly (např. PHP skripty.) Jiné rozdíly činí (ASP a většina CGI skriptů), ovšem nijak zásadní. Takže je většinou jedno, která metoda se to použije. Doporučuje se postovat vstupy obsahující hesla a dlouhé vstupy, protože get je omezen myslím na 1024 znaků.

Podpora zobrazování

Níže popsané prvky formuláře by měly být vždy obaleny tagy <form> a </form>, protože jinak je prohlížeče Netscape 4, Internet Explorer 3 (a starší) nedokážou zobrazit. 

Chameleon <input>

Input znamená "vstup". Tag input má mnoho podob. Jednou je to vstupní pole, jindy odesílací políčko, někdy přepínač, jindy odesílací obrázek atd. Všechno to určuje atribut type:

Zkuste si schválně pozměnit hodnoty uvedené výše a odeslat, koukejte, co to provede s dotazem v URL za otazníkem.

Do tabulky se mi nevešel poslední typ <input type=file name=soubor>

Select

Výběrová nabídka, které se občas říká "select box" nebo taky "drop-down menu" nebo prostě menu. Má různé podoby ovlivňované zejména atributem size.

Pozor, tag <select> je párový!

Textarea

Oblast pro zapsání většího textu.

Tag <textarea> je také párový. Zkuste si odeslání a sledujte, co se stane.

Zalamování řádek při psaní a po odeslání se řídí atributem wrap.

Atribut Name

Name je nejdůležitější atribut formulářových tagů. Identifikuje je a posílá své jméno s daty. Symbolicky po odeslání vypadá dotaz takto:
?jméno=hodnota&jméno2=hodnota2

Příklady odesílání dat si můžete vyzkoušet ve výše uvedených tabulkách. Nebo například v dotazu

?jidlo=jablko&piti=kafe&zvire=ko%E8ka
jsou řetězce jidlo, piti a zvire obsahem atributu name, kdežto jablko, kafe a kočka jsou zadané hodnoty.

Ještě pár zajímavých výjimek:

• U <input type=radio> (přepínač) se může vyskytovat více puntíků se stejným jménem. Vždy může být zatržený ale jenom jeden; ten se potom odesílá se svou hodnotou
• U <input type=image> (obrázkové odesílání) se při kliknutí musejí odesílat dvě hodnoty -- souřadnice. Ke jménu (name) se připojují tečka s písmenky x a y. Například pokud je <input type=image name=obrazek>, potom jeho odeslání může vypadat takto:
?obrazek.x=13&obrazek.y=121
• U <select multiple> je třeba odesílat více hodnot se stejným jménem. Při odesílání se prostě zařadí za sebe:
  ?platforma=unix&platforma=linux

Atribut Value

Hodnota, obsah polí.

• U některých prvků formuláře je to hodnota přednastavená (u <input type=text> a <input type=password>), takže jde před odesláním měnit
• u tlačítek (input type=submit a type=reset) některých prvků je to hodnota zobrazovaná na tlačítku
• u ostatních prvků (select, input type=checkbox, type=radio, type=hidden) je to hodnota nezobrazovaná a neměnitelná, která se ale odesílá s daty.
• Textarea atribut value nemá. Ve formuláři se objeví jako přednastavená hodnota samotný obsah tagu.

Velikosti prvků

• Input typu text a password nastavují svoji velikost podle atributu size. Ten udává počet znaků, který se tam může zobrazit. (Fakticky se tam ale vejde znaků více.)
• Size u tagu <select> označuje počet zobrazených řádků výběru.
• Tagu <textarea> se zadává šířka a výška ve znacích pomocí atributů rows a cols (řádky a sloupečky).
• Pokud je na prvky formuláře aplikován CSS styl (zejména width a height), převáží původní nastavení (nefunguje v NN4).

Checked a selected

Atributy, jimiž se označuje přednastavené zatržení políčka nebo výběr. Jsou to atributy zvláštní tím, že za nimi není rovnítko s hodnotou.

Checked se dá použít u <input type=checkbox> a u <input type=radio>.

Selected se dá použít u výběrů <select>.

Pokud jsou tyto atributy použity v jednom výběru nebo přepínači vícekrát, platí jen ten první z nich.

Předchozí: Úvod do formulářů, Další: Detaily formulářů, zdokonalení vzhledu, Formulář na mail

O tvorbě, údržbě a zlepšování internetových stránek. Základy HTML CSS FrontPage JavaScript