V našem seriálu jsme nyní dospěli ke známému problému "slepice nebo vejce". Rádi bychom zde představili dvě témata, která jsou navzájem provázána - formuláře a CGI skripty. Ke každému formuláři musí existovat CGI skript, který zpracuje jeho informace. Na druhé straně pak nejvhodnějším způsobem, jak dopravit data CGI skriptu, je právě formulář. Nakonec jsme se rozhodli dát mu přednost a věnovat se mu jako prvnímu. Částečně i proto, že tento seriál je určen především autorům WWW stránek, zatímco CGI skripty jsou záležitostí veskrze programátorskou.

V drtivé většině případů však potřebujeme, aby uživatel mohl ovlivnit činnost spouštěného programu - zadal slovo, které hledá, uvedl své nacionále a byl zařazen do slosování o báječné ceny, napsal komentář k obsahu serveru a podobně. Nejvýkonnějším způsobem, jak převzít informace od uživatele, je právě formulář.

V HTML je definována sada značek, vytvářejících obvyklé prvky, na které jsme všichni zvyklí z dialogových oken programů. Patří mezi ně různé přepínače, okénka pro zadávání textu, tlačítka a podobně. Z nich autor stránky sestaví formulář, ve kterém pak uživatel vyplní patřičné údaje a odešle je ke zpracování. V okamžiku stisknutí toho správného tlačítka uživatelův klient kontaktuje WWW server a požádá a spuštění CGI skriptu, zpracovávajícího formulář. Ve svém dotazu zároveň uvede hodnoty, zadané uživatelem. Výsledek, který obdrží, pak zobrazí uživateli jako reakci na odeslaný formulář.

Značka <FORM> má několik atributů, které se týkají především vnitřního života formuláře. Nejdůležitější je ACTION, udávající URL skriptu, který bude zpracovávat data formuláře. S ním je těsně spojen atribut METHOD. Rozhoduje o tom, jakým způsobem budou informace předány skriptu. Přípustnými hodnotami jsou GET (implicitní) a POST. Podrobněji se o nich zmíníme příště. Zřídka používanou lahůdkou je ENCTYPE (z anglického Encoding Type). Ten umožňuje předepsat, jaké kódování se použije pro přenos informací. Význam uvedených atributů ocení zpracovávající CGI skript. Pro uživatele nemají žádný viditelný dopad.

Tělo formuláře, tedy zdrojový text mezi <FORM> a </FORM>, je tvořeno směsicí běžného HTML kódu a formulářových značek, realizujících jednotlivé vstupní prvky. Mějte na paměti, že tyto značky vytvoří vždy jen samotný vstupní prvek. Všechno ostatní - především jeho popis a umístění vůči ostatním částem formuláře - musí obstarat "normální" HTML.

Všechny vstupní prvky mají jednu věc společnou - povinný výskyt atributu NAME. Jeho hodnotou je jméno, které jednoznačně identifikuje prvek v rámci formuláře. Podle něj se zpracovávající skript orientuje v datech. Obdrží je v podobě posloupnosti dvojic jméno=hodnota, navzájem oddělených znakem &. Podle jména vždy pozná, do kterého vstupního prvku uživatel dotyčnou hodnotu zadal.

Jedním z nejpoužívanějších je okénko pro vstup řetězce znaků, které vytvoříte značkou <INPUT TYPE=TEXT>. Jedná se o implicitní podobu vstupního prvku. Pokud tedy u značky <INPUT> vynecháte atribut TYPE, bude se chovat stejně. Další dva atributy určují rozměry. MAXLENGTH omezuje maximální délku řetězce, který smí uživatel zadat. LENGTH pak určuje, jak široké okénko (kolik znaků) se zobrazí na stránce. Pomocí VALUE lze stanovit implicitní hodnotu řetězce. V tom případě uživatel obdrží prvek "předvyplněn" - například

Váš komentář
<INPUT TYPE=TEXT NAME="koment" VALUE="jsem spokojen">

Častým prvkem uživatelského rozhraní je vypínač, umožňující zadávání hodnot ano/ne. Ve formuláři je realizován značkou <INPUT TYPE=CHECKBOX>. Atribut NAME poslouží jako obvykle k identifikaci vypínače, pomocí VALUE pak předepíšete, jaká hodnota se má objevit v datech. Bude-li při odeslání formuláře vypínač zapnut, vloží klient do dat obvyklou dvojici jméno=hodnota. Vypnutý vypínač nevytvoří žádná data. Atributem CHECKED můžete zajistit, že implicitním stavem vypínače bude "zapnuto".

Bývá zvykem, že několik vypínačů, které se týkají spřízněných informací, nese stejné jméno (atribut NAME). Mají-li různé hodnoty VALUE, není problém je navzájem rozlišit.

Vzhledem podobný, leč konstrukcí radikálně odlišný, je přepínač. Skládá se z několika značek <INPUT TYPE=RADIO>. Každá z nich vytvoří jednu polohu přepínače. To, že patří k sobě, poznají podle shodné hodnoty NAME. Liší se samozřejmě hodnotami atributu VALUE. Jelikož se jedná o přepínač, smí být aktivní vždy jen jediná varianta. Atributem CHECKED u jedné z těchto značek byste měli vyznačit, ve které poloze se přepínač bude nacházet v okamžiku otevření stránky.

Jako poslední z jednoduchých vstupních prvků popíšeme tlačítko, jehož pomocí lze formulář odeslat. Vytvoříte je značkou <INPUT TYPE=SUBMIT>. Atribut VALUE zde má pozměněný význam. Jeho prostřednictvím lze definovat nápis na tlačítku.

Tlačítko jako jediné nemusí mít atribut NAME. Jeho stisknutím uživatel prostě odešle vyplněný formulář k vyřízení. Může však nastat situace, kdy chcete data z téhož formuláře zpracovávat několika různými způsoby - například vyhledávat řetězec v celém serveru nebo jen v jeho části. V takovém případě lze formulář vybavit několika odesílacími tlačítky. Aby zpracovávající skript poznal, které z nich bylo použito, musíte jejich značky obdařit atributem NAME. Tlačítko pak svou hodnotu NAME vloží do odeslaných dat.

Nezřídka se u formulářů setkáte i s tlačítkem Reset, které vrátí formulář do výchozího stavu. Na stránku je vložíte pomocí <INPUT TYPE=RESET> a opět lze atributem VALUE předepsat text, který se má na tlačítku objevit. Pokud však není formulář opravdu dlouhý, doporučujeme se mu raději vyhnout. Uživatele jeho přítomnost lehce dezorientuje a případy, vyžadující použití Reset, jsou dost vzácné.

Formulář v sobě obsahuje druhou tabulku, která se stará o vzájemné uspořádání jeho částí. Má tři řádky a dva sloupce, v prvním a třetím řádku je však buňka roztažena přes oba sloupce. Formulář obsahuje vstupní prvky pro řetězec znaků (jméno), jeden dvoustavový přepínač (pohlaví), skupinu vypínačů (majetek) a odesílací tlačítko. Kdybych v něm vyplnil své jméno a ostatním prvkům ponechal jejich implicitní hodnoty, klient by odeslal CGI skriptu /cgi-bin/zpracuj metodou GET následující data

jmeno=Pavel+Satrapa&pohl=muz&mame=pocitac&mame=jojo

Vstupní pole pro rozsáhlejší text realizuje párová značka <TEXTAREA>. Opět musí nést atribut NAME, který ji identifikuje. Kromě něj lze hodnotami atributů ROWS a COLS předepsat rozměry tohoto pole (počet řádků a sloupců). Jedná se však jen o rozměry oblasti, kterou uživatel vidí. Nelze žádným způsobem omezit velikost uživatelova vstupu. Text uzavřený mezi <TEXTAREA> a </TEXTAREA> představuje implicitní hodnotu.

Základem menu je párová značka <SELECT>. Kromě NAME oplývá dvěma dalšími atributy. SIZE určuje, kolik položek bude trvale viditelných (oblíbenou hodnotou je SIZE=1). Ostatní se objeví, jen když uživatel dotyčné menu vybere. Je-li přítomen atribut MULTIPLE, lze vybrat více než jednu položku.

Obsahem <SELECT> je definice jednotlivých položek menu. Každá z nich je zahájena značkou <OPTION>, za níž následuje text položky. Atributem VALUE můžete předepsat hodnotu, kterou bude tato položka generovat. Pokud jej vynecháte, použije se jako hodnota text položky. Atributem SELECTED lze zajistit, že dotyčná položka bude implicitně vybrána. Kdybychom v našem příkladu chtěli místo přepínače pro zadávání pohlaví použít menu, mohli bychom je sestavit například takto:

<SELECT NAME="pohl" SIZE=1>
<OPTION VALUE="muz" SELECTED> muž
<OPTION VALUE="zena"> žena
</SELECT>

Pavel Satrapa

Článek byl otištěn v časopise Softwarové noviny číslo 2/97