HTML - část III. - Formuláře - Builder.cz - Informacni server o programovani

Navigace:  » Úvodní stránka  » Rubriky  » Web  

14. prosince 2000, 00.00 | V dnešním článku si povíme něco k tvorbě formulářů v HTML, což je jeden ze základních prostředků ke komunikaci mezi klientem a serverem.

V dnešním článku si povíme něco k tvorbě formulářů v HTML, což je jeden ze základních prostředků ke komunikaci mezi klientem a serverem.

Formulář deklarujeme párovým tagem FORM s následující syntaxí:

<FORM ACTION="URL skriptu" METHOD="metoda">vlastní obsah formuláře</FORM>

Parametr ACTION udává URL skriptu, který formulář zpracuje, další parametr METHOD udává, jakým způsobem bude tomuto skriptu formulář odeslán - hodnota GET říká, že formulář bude přidán za URL, hodnota POST říká, že formulář bude odeslán v těle HTTP požadavku.

Základním elementem formuláře je políčko, do kterého může uživatel zadat text - vytvoření takového políčka docílíme pomocí nepárového tagu INPUT s následující syntaxí:

<INPUT TYPE="TEXT" SIZE=5 MAXLENGTH=20 VALUE="implicitní text" NAME="jméno">

Tento zápis vyústí v prohlížeči v následující výsledek:



Parametr SIZE ovládá délku políčka ve znacích, parametr MAXLENGTH potom maximální velikost (políčko může obsahovat text delší než jeho délka, jak sami vidíte na příkladu), parametr VALUE ovládá implicitní text uvnitř políčka a konečně parametr NAME uvádí jméno políčka, na které se můžeme odkazovat v řídícím skriptu. Kromě uvedených parametrů může políčko obsahovat ještě parametry DISABLED a READONLY, které jsou bez hodnot a způsobí, že text uvnitř políčka není možno měnit, DISABLED navíc způsobí jeho zašednutí.

Stejnou syntaxi má i políčko pro zapsání hesla, kde se místo INPUT TYPE="TEXT" uvádí INPUT TYPE="PASSWORD" a místo textu se na obrazovce objevují hvězdičky.

Pro zapsání delšího textu se v HTML používá párový tag TEXTAREA s následující syntaxí:

<TEXTAREA COLS=20 ROWS=2 NAME="jméno" WRAP="zalomení">implicitní text</TEXTAREA>

A takto to dopadne v prohlížeči:

implicitní text

Parametr COLS udává šířku ve znacích, parametr ROWS udává počet řádek, parametr WRAP zalomení řádek - může nabývat hodnot OFF (pro nezalamování řádek), VIRTUAL (řádky se v prohlížeči zalomí, ale řídícímu skriptu jsou odeslány bez tohoto zalomení) a PHYSICAL (řádky se zalomí v prohlížeči a skriptu jsou odeslány i s tímto zalomením).

Pomocí výše popsaného tagu INPUT se dají dále vytvořit zaškrtávací políčka - checkbox a radiobutton. Rozdíl mezi nimi je následující - zatímco tlačítka checkbox pracují nezávisle na sobě, tak u tlačítek radiobutton může být zaškrtnuté vždy jen jedno z dané skupiny. Pokud chceme vytvořit takovou skupinu, tak musíme pojmenovat všechna tlačítka, které chceme mít v jedné skupině, stejně. Vše osvětlí následující příklad - napřed vytvoříme tlačítko checkbox, a pak skupinu tří tlačítek radiobutton, z nichž bude moci být zaškrtnuto jen jedno:

<INPUT TYPE="CHECKBOX" CHECKED NAME="jméno" VALUE="hodnota"> <INPUT TYPE="RADIO" CHECKED NAME="tlacitko" VALUE="hodnota1"> <INPUT TYPE="RADIO" NAME="tlacitko" VALUE="hodnota2"> <INPUT TYPE="RADIO" NAME="tlacitko" VALUE="hodnota3">

A výsledek v prohlížeči:






Pokud je políčko zaškrtnuto, je řídícímu skriptu odeslána hodnota VALUE. Jistě jste se také dovtípili, že parametr CHECKED zajistí, že je tlačítko zaškrtnuté. I tady samozřejmě můžeme používat parametry DISABLED a READONLY, význam je stejný jako u INPUT TYPE="TEXT".

Dalším formulářovým elementem je SELECT. Vše si opět ukážeme na příkladu:

<SELECT SIZE=2 NAME="jméno" MULTIPLE> <OPTION VALUE="skoda" SELECTED>Škoda Felicie</OPTION> <OPTION>Volkswagen</OPTION> <OPTION>Mercedes</OPTION> </SELECT>

A výsledek:

Škoda Felicie Volkswagen Mercedes

Celou roletu deklarujeme párovým tagem SELECT a samotné řádky rolety párovým tagem OPTION. Parametr SIZE udává výšku rolety v řádkách, parametr MULTIPLE potom říká, že může být vybráno více možností současně. Pokud bude vybrána první možnost, potom bude řídícímu skriptu odeslána hodnota "skoda", protože to říká parametr VALUE, u dalších možností parametr VALUE chybí, a tak bude odeslán text uvnitř tagu OPTION (v našem případě tedy "Volkswagen" a "Mercedes"). U první možnosti je zároveň použit parametr SELECTED, který říká, že daná možnost bude implicitně vybrána. Stejně jako u všech ostatních formulářových elementů mohou i zde být použity parametry DISABLED a READONLY.

Teď už tedy máme vytvořený formulář, ještě ho potřebujeme nějakým způsobem odeslat. Toho dosáhneme zápisem <INPUT TYPE="SUBMIT" VALUE=" Odeslat ">. Vytvoří se nám tlačítko, po jehož stisknutí se formulář odešle. Parametrem VALUE ovládáme text, který se bude na tlačítku nacházet. Všimněte si mezer po krajích - tento zápis nám vytvoří delší tlačítko. K odeslání ještě můžeme použít tlačítko tvořené obrázkem - má následující syntaxi:

<INPUT TYPE="IMAGE" ALIGN="zarovnání" ALT="alternativní text" SRC="zdroj obrázku">

Zarovnání může být nahoru (TOP), na střed (MIDDLE), dolů (BOTTOM) a na levo nebo na pravo (LEFT nebo RIGHT). Alternativní text využijí hlavně uživatelé textových prohlížečů nebo prohlížečů s vypnutými obrázky.

Ještě můžeme využít dvě tlačítka s podobnou syntaxí jako INPUT TYPE="SUBMIT", a sice INPUT TYPE="RESET" (pro uvedení formuláře do počátečního stavu) a INPUT TYPE="BUTTON", (pro spuštění zadaného skriptu). Na úplný konec jsem si nechal tlačítko, jehož obsahem může být text i obrázek současně, a které může mít různou funkci:

<BUTTON TYPE="SUBMIT | BUTTON | RESET" NAME="jméno" VALUE="hodnota">vlastní obsah tlačítka</BUTTON>

A to už je pro dnešek všechno. Přístě si řekneme něco o tvorbě tabulek.