5. HTML - formuláře

Jan Sova


Pokud potřebujete získat informace od uživatele vašich stránek, můžete použít formuláře. Formulář se uživateli jeví podobně jako dialogové okno a může obsahovat různá vstupní pole, tlačítka a přepínače. Získané informace jsou odeslány na server ke zpracování. Ke zpracování údajů z formulářů se nejvíce používá PHP, ASP, CGI skripty.

5.1. Vložení formuláře do stránky

Formulář se vkládají pomocí elementu FORM. Pro správnou funkci formuláře musíte zajistit obsluhu ACTION a METHOD:

ACTION - určení adresy skriptu, který zpracuje data
METHOD - určuje metodu, která se při odeslání dat použije - GET/POST

Hlavička takového formuláře by potom vypadala nějak takto:

<FORM ACTION="http:\\pokus.php" METHOD=POST/GET">
...
</FORM>

Pokud neumíte (nemůžete používat) PHP/ASP, můžete si nechat poslat data poštou. Pak musíte nastavit atribut ACTION na mailto:

<FORM ACTION="mailto:jansova@iol.cz" METHOD=POST>
...
</FORM>

Pozn: Pro své formuláře zatím používejte metodu POST, více se dovíte v kapitole o protokolech (v jiné knize).

Dalším atributem je element ENCTYPE. Ten můžete použít pro nastavení kódování obsahu formuláře. Prozatím nic nenastavujte, vysvětlím později.

5.2. Rozdělení formulářů

Při tvorbě formulářů, můžete použít tři základní elementy pro prvky formuláře:

INPUT - slouží pro většinu prvků
SELECT - seznamy 
TEXTAREA - prvek pro víceřádkový text 

5.3. Element INPUT

Druh prvku vyberete pomocí atributu TYPE. Atributem NAME musíte nastavit jméno prvku. Obecný zápis:

<INPUT TYPE=(typ) NAME=(jméno)>

Pro úplnost popisuji jednotlivé prvky, ale věřte, že to dalo práci.

5.3.1. Základní vstupní pole (TYPE = TEXT)

Slouží k zadání kratších textů. Atributy:

MAXLENGTH - omezení maximální délky textu
SIZE - velikost vstupního pole
VALUE - počáteční hodnota

Příklad pole, kam zadáte svůj e-mail:

E-mail: <INPUT TYPE=TEXT NAME="e-mail">

Výstup:

E-mail:

Pokud potřebujete více vstupních polí, je vhodné je zarovnat pomocí tabulky:

<TABLE>
<TR>
 <TD>Jméno: </TD>
 <TD><INPUT TYPE=TEXT NAME="jmeno" SIZE=30></TD>
</TR>
<TR>
 <TD>Příjmení: </TD> <TD><INPUT TYPE=TEXT NAME="prijmeni" SIZE=30></TD>
</TR>
</TABLE> 

Výstup:

Jméno:
Příjmení:

5.3.2. Heslo (TYPE=PASSWORD)

Prvek je velmi podobný prvnímu, jen místo zadaných znaků jsou zobrazovány hvězdičky.

5.3.3. INPUT Zaškrtávací pole (TYPE = CHECKBOX)

Prvek slouží pro vstup logických hodnot. Prohlížeč tento prvek zobrazuje jako okénko. Musíte nastavit NAME a atribut VALUE. Pokud je pole zaškrtnuté, pošle se jeho jméno společně s hodnotou atributu VALUE serveru. Pokud není pole zaškrtnuto, prvek nic nepošle. Pokud chcete pole zaškrtnuté hned na začátku, použijte atribut CHECKED.

Jako příklad ukáži část jednoduché ankety o OS:

<P><INPUT TYPE=CHECKBOX NAME="os" VALUE="linux" CHECKED>
Linux<BR>
<INPUT TYPE=CHECKBOX NAME="os" VALUE="windows">
Windows</P>

Výstup:

Linux
Windows

5.3.4. Přepínací tlačítko (TYPE = RADIO)

Pokud chcete dát na výběr pouze jednu možnost (OS může přece člověk používat více), použijte tento prvek. Ještě musím poznamenat, že velmi často se používá tag pro odsazení: <BLOCKQUOTE>.

Zaškrtněte, jestli jste muž, nebo žena:

<BLOCKQUOTE>
 <INPUT TYPE=RADIO NAME="pohlavi" VALUE="zena" CHECKED>Žena<BR>
 <INPUT TYPE=RADIO NAME="pohlavi" VALUE="muz">Muž
</BLOCKQUOTE>

Výstup:

Žena
Muž

5.3.5. Odeslání souboru (TYPE=FILE)

Jistě jste již viděli stránky, kde jste mohli poslat své soubory. Prvek se obvykle zobrazí jako vstupní textové pole s tlačítkem. Atributy:

MAXLENGTH - omezení maximální délky textu
SIZE - velikost vstupního pole
ACCEPT - určuje MIME typ souboru, který je přípustné vybrat

5.3.6. Skrytá pole (TYPE=HIDDEN)

Jediné pole, které se ve formuláři neobjeví. Většinou je používáno pro uchování stavových informací. Informace bude uložena v podobě "proměnné". Musíte nastavit atributy VALUE a NAME. Dnes se moc nepoužívá a pokud to jde, má přednost cookies.

5.3.7. Tlačítko pro odeslání formuláře (TYPE=SUBMIT)

Pokud již máte vhodně poskládané prvky formuláře, musíte dát možnost uživateli formulář odeslat. K tomu můžete použít element INPUT se spojením s atributem TYPE=SUBMIT. Tak vytvoříte tlačítko, po jehož stisku bude formulář se zadanými daty (lépe řečeno data získaná od uživatele z formuláře) odeslán serveru. Příklad takového tlačítka:

<INPUT TYPE=SUBMIT VALUE="Odeslat">

Výstup:

Pokud chcete tlačítko s obrázkem, můžete použít atribut SRC. Jeden takový příklad:

<INPUT TYPE=IMAGE NAME="s_obrazkem" SRC="obraz.gif">

5.3.8.Tlačítko pro vynulování formuláře (TYPE=RESET)

Pokud chcete dát možnost resetovat vyplněný formulář, použijte toto tlačítko. Po jeho stisku se prvky formuláře nastaví na počáteční hodnotu. Nikdy není odesíláno na server. Pomocí atributu VALUE lze tlačítko pojmenovat.

5.4. Seznamy

Pro tvorbu seznamů, můžete použít element SELECT. Seznamy můžete použít, pokud chcete dát uživateli na výběr jedné z několika položek. Pokud chcete dát na výběr více položek, použijte atribut MULTIPLE. Atributem SIZE můžete vybrat počet najednou zobrazených řádek.

Jednotlivé položky seznamu zadávejte jako obsah elementu OPTION. Ukončovací element můžete vynechat. Položky, u kterých použijete atribut SELECTED, budou již předem vybrány.

<SELECT NAME="nakup" SIZE=5 MULTIPLE>
 <OPTION VALUE="jablko">jablko
 <OPTION VALUE="rajce">rajče
 <OPTION VALUE="jogurt">jogurt
</SELECT>

Výstup:

5.5. Víceřádkový text

Element TEXTAREA slouží pro zadání delších textů. Atributy:

NAME - jméno
ROWS - počet řádek vstupního pole
COLS - počet sloupců

Jeden takový příklad:

<TEXTAREA NAME="hodnoceni" ROWS="4" COLS="30">
Napište, jak se vám stránky libí
</TEXTAREA>

Výstup: