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á pouze jejich vzhledu.

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

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 přepíná 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. 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í.

Chameleon <input>

Input znamená "vstup". Tag input má mnoho podob v závislosti na atributu type:

Zkuste si schválně pozměnit hodnoty a odeslat.

Do tabulky se mi nevešel poslední typ

<input type=file name=soubor> slouží k zadání cesty k souboru. Nepřenáší se jméno souboru, ale celý soubor. Ke správné funkci vyžaduje určitá nastavení (v definici formuláře: <form enctype="multipart/form-data">).

Select

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

Textarea

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

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

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