Formuláře

Jak jsme si na začátku řekli, dříve nebyla možnost poslat data z klienta na server. Dnes k tomuto účelu používáme formuláře a to hned dvěma (z pozice serveru dosti odlišnými) způsoby.

Formuláře jsou tedy zvláštní kusy HTML kódu významné tím, že kromě textu (a obrázků) obsahují políčka, do nichž lze vkládat data. Tato políčka mohou být:

textová pole,
výběry z možností,
zatrhávání vybraných položek,
zadávání hesel (tajný text),
tlačítko na odeslání formuláře,
tlačítko na vymazání obsahu,
něco navíc (neviditelné).

Formulář otevřeme tagem FORM a ukončíme tagem /FORM (a oba tagy jsou povinné). Jelikož formulář je určen k tomu, aby odesílal data, je potřeba určit, kam se data mají poslat. K udání šťastného příjemce je určen atribut action, do něhož přiřadíme URI stránky, na kterou míníme data poslat. Mezi výše zmíněnými dvěma možnostmi posílání dat přepínáme pomocí atributu METHOD, co nějž přiřazujeme řetězec se jménem požadované metody. Ony metody se jmenují GET a POST. Atribut METHOD není povinný, pokud jej vynecháme, implicitně použijeme metodu GET. Čím se obě metody liší si povíme až v kapitole o skriptování.

Příklad: formulář může vypadat třeba takto:

<FORM action="skript.php" method="POST">
... text míchaný s ovládacími prvky...
</FORM>

Nyní si povězme o jednotlivých možnostech vstupních prvků. Všechny (téměř všechny) prvky se ovládají pomocí nepárového tagu INPUT. O tom, jak bude dotyčný vstupní element vypadat, rozhodujeme až atributem TYPE. Typ prvku může být:

text - jednořádkové pole pro vstup textového řetězce,
textarea - víceřádkové pole pro vstup textu,
password - podobné jako typ text, ale na hesla, tedy obsah pole se neobjevuje při zadávání na obrazovce,
checkbox - zatrhávátko ano/ne,
radio - zatrhávátko vybírací,
submit - odesílací tlačítko,
image - grafické odesílací tlačítko - atributem src pak určíme URI souboru, který na grafickém tlačítku chceme mít,
reset - rušící tlačítko - tlačítko, které vymaže formulář,
button - knoflík obecný,
hidden - neviditelný prvek (pouze nese hodnotu, nijak se nezobrazuje),
file - výběr souboru k odeslání.

Jelikož technologie "řekni to obrázkem" má něco do sebe a jelikož se již J. A. Komenský snažil o názorný způsob výuky, zkusíme teoretický výklad nahradit příklady:

<form action="nic.html">
Jméno: <input type="text" value="Karel" name="jmeno"> &nbsp;&nbsp;&nbsp;

Příjmení: <input type="text" value="Novák" name="prijmeni"><br>

Heslo: <input type="password" value="12345" name="heslo"><br>

<input type="checkbox" checked> vážně se chci přihlásit!<p>

</form>

Tímto zdrojovým textem získáme formulář, který odesílá data do adresáře, z nějž byla stažena dotyčná stránka souboru nic.html, obsahuje dvě textová políčka, před prvním je text Jméno, před druhým Příjmení, následuje políčko na hesla a zatrhávací prvek. Formulář se zobrazí asi takto:

Každá položka formuláře může mít jméno (atribut name není sice povinný, ale bez něj budete těžko hodnot ve formuláři využívat zvláště na straně serveru). Na typech text, textarea a password není příliš co nechápat a tudíž i vysvětlovat, k typu hidden poznamenejme jen, že se k němu uživatel nedostane (ve formuláři jej není vidět, jeho hodnotu tudíž můžeme nastavovat třeba skriptem, ale není dobré na to spekulovat, protože ne všechny prohlížeče skriptování podporují), u typu checkbox je důležitý atribut checked, který říká, že políčko má být implicitně zatržené, stejný atribut má i typ radio, který se od typu checkbox (zatrhávací políčko) liší tím, že se jedná o výběry z možností. Výběr jedné vylučuje výběr ostatních. Syntakticky se používá tak, že každou možnost vypíšeme zvlášť a všem radiobuttonům dáme stejné jméno:

Příklad:

 <FORM action="http://stroj.nekde.co/skripty/pridej" method="post" onSubmit="return false;">
    <P>
    Jméno: <INPUT type="text" name="jmeno"><BR>
    Příjmení: <INPUT type="text" name="prijmeni"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="pohl" value="M"> Muž<BR>
    <INPUT type="radio" name="pohl" value="Z"> Žena<BR>
    <INPUT type="submit" value="Pošli"> <INPUT type="reset" value="smaž">
    </P>
 </FORM>

Zde vidíme formulář, který se vyptá na jméno, příjmení, mailovou adresu a pohlaví. Poslední položka je realizována výběrem ze dvou možností. Všimněte si, že se jedná o radiobuttony se stejným jménem, atribut value opět určuje implicitní hodnotu, v případě radiobuttonu se jedná o hodnotu, která se sdělí skriptu, který data přijímá.

Výsledně vypadá takto:

Dolní řádek formuláře definuje dvě tlačítka. Jedno (typu submit) data odešle, druhé (typu reset) formulář vymaže. Atribut onSubmit specifikuje, co se má provést, je-li proveden pokus o odeslání. V uvozovkách je Javascriptový kód, který vrátí hodnotu logické nepravdy, což u tohoto atributu vyústí ve zmaření odeslání (zkuste jej odstranit a uvidíte).

Meníčka

I v HTML máte možnost vyrábět vyskakovací menu, v nichž můžete výbírat jednu z položek. Používáme k tomu tagů <SELECT>, <OPTION> a občas i <OPTGROUP>. Tag SELECT otevírá prostředí pro tvorbu menu, z tohoto prostředí se dostaneme tagem /SELECT (tedy jde opět o párový tag), tag OPTION definuje jednotlivé položky (jeho ukončovací tag je nepovinný, není-li uveden, je předpokládán před začátkem dalšího tagu OPTION nebo před tagem /SELECT. Tagu OPTGROUP používáme ke shlukování jednotlivých voleb. Tagy SELECT a OPTGROUP mají zavírací tagy povinné, tag option volitelný.

Tag OPTION disponuje zejména těmito atributy:

selected - vybráno?
disabled - vybíratelné?
label - popiska - prohlížeč by ji měl zobrazit spíše, nežli text za tagem (ten se má zobrazit není-li label definován),
value - jakou hodnotu má prvek mít, je-li vybrána tato položka? Implicitně obsah prvku (mezi otevíracím a zavíracím tagem).
Prvky SELECT a OPTGROUP mají otevírací i zavírací tagy povinné, OPTION je povinný, jeho uzavírací tag volitelný.

Atributy SELECTu:

name - jméno prvku,
size - počet viditelných řádek,
multiple - indikátor, zda lze vybrat víc položek,
disabled - indikátor, zda lze vybírátko používat,
...

OPTGROUP:

label - jméno (popiska),
disabled - (ne)vybíratelný.

Mimochodem atribut disabled má více formulářových tagů, zablokovat nebo odblokovat vybíratelnost prvku lze zejména skriptem. Skriptovat ještě neumíme, navíc blokovat a odblokovávat prvky je lepší skriptem, protože málokdy máte zaručeno, že klient vůbec skripty interpretuje! Proto je lepší nechat vše odblokované a případně něco zajistit pomocí skriptu.

Nyní dva příklady přímo z normy na menu. První příklad zobrazuje menu s více možnostmi výběru.


<FORM action="http://somesite.com/prog/component-select" method="post">
   <P>
   <SELECT multiple size="4" name="component-select">
      <OPTION selected value="Component_1_a">Component_1</OPTION>
      <OPTION selected value="Component_1_b">Component_2</OPTION>
      <OPTION>Component_3</OPTION>
      <OPTION>Component_4</OPTION>
      <OPTION>Component_5</OPTION>
      <OPTION>Component_6</OPTION>
      <OPTION>Component_7</OPTION>
   </SELECT>
   <INPUT type="submit" value="Send"><INPUT type="reset">
   </P>
</FORM>


<FORM action="http://somesite.com/prog/someprog" method="post">
 <P>
 <SELECT name="ComOS">
     <OPTION selected label="none" value="none">None</OPTION>
     <OPTGROUP label="PortMaster 3">
       <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</OP       <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</OPTION>
       <OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</OPTION>
     </OPTGROUP>
     <OPTGROUP label="PortMaster 2">
       <OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</OPTION>
       <OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</OPTION>
     </OPTGROUP>
     <OPTGROUP label="IRX">
       <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</OPTION>
       <OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</OPTION>
     </OPTGROUP>
 </SELECT>
</FORM>

K odesílání formulářů, jak jsme uvedli dříve, existují dvě metody (GET a POST). Při odesílání metodou GET je řetězec s daty přilepen na konec URI za jméno skriptu, při odesílání metodou POST se pro data navazuje zvláštní spojení (větší režie). Data posílaná metodou GET na serveru implicitně propadají do logu, data poslaná metodou POST nikoliv. Norma radí na idempotentní operace používat metodu GET, na operace s postranním efektem (třeba mazání mailů) metodu POST.