HTML - Formuláre

Zaujímavou časťou jazyka HTML sú formuláre. Tie v prvom rade umožňujú ostatným webovým jazykom pristupovať k údajom, ktoré na stránku zadajú užívatelia. Môžu ich napísať do textového políčka, vybrať ich zo zoznamu,... Treba však poznamenať, že pokiaľ nebudete vedieť aspoň jeden zo skriptovacích jazykov (PHP, JavaScript, ASP a pod.), formuláre veľmi nevyužijete. Fantázii sa však medze nekladú.

Formulár FORM

Základom je párový tag FORM s povinným atribútom ACTION. Ten určuje súbor, ktorý bude údaje spracúvať. Používaným atribútom je tiež METHOD (metóda GET zobrazuje premenné v URL adrese, POST nie). Ešte spomeniem ENCTYPE - ten značí typ obsahu.

Atribúty tagu FORM sa využívajú len pri spomínaných skriptovacích jazykoch, takže ak s tvorbou stránok len začínate, nemusíte sa nad nimi trápiť.

<form name="f" action="spracuj.php">
 ...
</form>

Tlačidlo

Najjednoduchšie sa zadáva párovým tagom BUTTON. Do jeho vnútra dáme nápis, ktorý bude na tlačidle viditeľný. Atribút NAME znamená názov, VALUE - zobrazená hodnota, TYPE je typ (má hodnoty submit, reset a button). DISABLED zakáže stláčanie tlačidla.

<form name="f" action="spracuj.php">
 <button type="submit">Odošli</button>
</form>

Vstup

Nepárový INPUT môže mať veľa podôb. Určuje ich atribút TYPE s možnými hodnotami: text - textové políčko, password - hviezdičkované alebo bodkované heslo, checkbox - štvorcové zaškrtávacie políčko, radio - okrúhle výberové pole, submit - tlačidlo pre odoslanie, reset - tlačidlo pre zmazanie údajov, file - upload súborov, hidden - skrytý prvok, image - obrázkové tlačidlo, button - bežné tlačidlo. Vyskúšajte ich a uvidíte rozdiely.

<form name="f" action="spracuj.php">
 <input type="file">
</form>

Pre tag INPUT existujú napríklad atribúty NAME a VALUE (to už poznáte), CHECKED (zaškrtnutie daného políčka), SIZE (veľkosť poľa), MAXLENGTH (maximálny počet zadávaných znakov), SRC (adresa obrázka), DISABLED (zakázanie elementu) a READONLY (prvok bude len na čítanie).

<form name="f" action="spracuj.php">
 <input type="button" value="Tlačidlo">
</form>

Výber

Užívateľ si môže vyberať zo zoznamu, ktorý na stránku vložíme ako párový tag SELECT. Jeho často používané atribúty sú NAME (názov) a MULTIPLE (možnosť vybrať viac položiek naraz).

Do vnútra SELECTu môžeme dať viacero položiek OPTION s nepovinnými atribútmi VALUE, SELECTED, DISABLED.

<form name="f" action="spracuj.php">
 <select>
  <option>Položka1</option>
  <option>Položka2</option>
 </select>
</form>

Niekoľko významovo podobných položiek sa dá združiť do jednej skupiny - OPTGROUP. Použitie je zrejmé z ukážky:

<form name="f" action="spracuj.php">
 Čo máte z nášho sortimentu najradšej?
 <select>
  <optgroup label="Ovocie">
   <option>Jablko</option>
   <option>Banán</option>
   <option>Broskyňa</option>
  </optgroup>
  <optgroup label="Zelenina">
   <option>Mrkva</option>
   <option selected="true">Špenát</option>
  </optgroup>  
 </select>
</form>

Viacriadkový vstup

Ak potrebujete políčko s textom, ktorý môže zaberať viac riadkov, je tu pre vás TEXTAREA. Tento párový tag má povinné atribúty ROWS (počet riadkov) a COLS (počet stĺpcov). Klasicky sa dá použiť aj NAME, DISABLED a READONLY.

<form action="spracuj.php">
 <textarea rows="5" cols="20">
  Predvolený
  text
 </textarea>
</form>

Skupiny

Párový tag FIELDSET umožňuje logicky a vizuálne oddeliť časti formulára, ktoré patria k sebe. Do jeho vnútra dáme ešte párový LEGEND, ktorý určuje nadpis.

<form action="spracuj.php">
 <fieldset>
  <legend>Základné údaje</legend>
   <input name="meno" value="Meno">
   <input name="priezvisko" value="Priezvisko">
 </fieldset>
</form>

Príklad

Formulár sa dá použiť na odoslanie mailu cez e-mailového klienta.

Tento formulár odošle napísaný text na adresu v tvare mailto:adresa. Premenná body určuje telo správy.

<form action="mailto:meno@server.sk">
 <input name="body">
 <input type="submit" value="OK">
</form>