Vytváříme webové stránky – Formuláře (část 7.)

V tomto díle budeme probírat především formuláře. Formulář tvoří jedno nebo více ovládacích polí, který mohou být různých druhů, příklady:

  1. Vstupní pole (input) s hvězdičkami (pro hesla) nebo bez
  2. Zaškrtávací tlačítko (checkbox)
  3. Přepínací tlačítka (radio)
  4. Tlačítko (button)
  5. Výběrové menu (select)
  6. Textové pole (textarea)

Z toho asi nejuniverzálnější tag bude input, jehož atributem type si lze navolit nejen klasické vstupní pole pro text, ale také checkbox, radio, ale i skriptem ovládané tlačítko. Tyto ovládací pole se pa vloží mezi párový tag FORM. Odeslaná data lze pak dobře zpracovat nějakým skriptem (třeba PHP skiptem). Jen je při odesílání dat lepší používat kvůli bezpečnosti metodu POST namísto metody GET (více informací o metodách později).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<form action="stranka.php" method="post">
<input type="text" name="textpole" size="15" maxlength="40" value="Sem můžete psát" autocomplete="off" />
<input type="password" name="heslo">
<input type="hidden" name="skrytepole" value="tajna_prednastavena_hodnota" />
<input type="checkbox" name="zaskrtavacipole" checked="checked" value="Zaškrtni mě" />
<input type="button" name="tlacitkoinput" value="Tlačítko pomocí input" />
 
<br />Mám rád<br />
<input type="radio" name="nazev_vyberu_shodny" value="Vodu" checked="checked" />
<input type="radio" name="nazev_vyberu_shodny" value="Pivo" />
<input type="radio" name="nazev_vyberu_shodny" value="Víno" />
 
<br />Právě mám puštený<br />
<select name="vyber">
<option value="vyberwin" selected="selected">Windows</option>
<option value="vyberlin">Linux</option>
<option value="vyberjiny">Jiný OS</option>
</select>
 
<textarea name="text" cols="50" rows="20" wrap="soft">
Tento text bude v poli už po načtení stránky.
</textarea>
 
<button name="tlacitkobutton" value="nazev_tlacitka">Obyčejné <b>tlačítko</b></button>
<br />
<input type="reset" name="vymazat" value="Vymazat hodnoty">
<input type="submit" name="odeslat" value="Odeslat">
</form>

Jelikož hodnoty se odesílají do nastavené stránky stranka.php, tak se po kliknutí na odeslat partně stane jen to, že nám prohlížeč řekne, že stránku nelze zobrazit (protože stranka.php ještě nemáme vytvořenou). Tolik tedy příklad, který obsahuje snad všechny nejdůležitější tagy a jejich základní vlastnosti. Value je většinou hodnota, která se tam má napsat (je-li to tag nepárový) a name je pak název.

Input a MIME typy souborů
Ještě jsem do příkladu neuvedl jeden druh inputu:

1
<form><input type="file" accept="MIME_typ_souboru"></form>

Nyní se pokusím vysvětlit MIME typy souborů. Bude se to hodit také později u php. U souborů se vždy poznává, co je zač, podle hlavičky. A podle té se zjistí jeho MIME-typ. Zde je přehled některých MIME typů k jejich příponám. Tady je pak ještě podrobnější seznam. O této tématice by se jistě dalo povídat i déle, ale snad zatím stačí takhle.
JPG: image/jpeg
MP3: audio/mpeg3
WMA: application/x-mplayer2
MOV: video/quicktime
SWF: application/x-shockwave-flash
TXT: text/plain
DOC: application/msword
PDF: application/pdf
XLS: application/excel
PPT: application/mspowerpoint
HTML: text/html
CSS: text/css
JS: application/javascript
ASP: text/asp
EXE: application/octet-stream
ZIP: application/zip

Input jako textové pole, heslo a skryté pole
Maxlength udává nejvyšší možný počet zadaných znaků, autocomplete on/off zapíná a vypíná doplňování známých (již dříve zadaných) hodnot. Size udává velikost (šířku). Zadáním type=“password“ budou v textovém poli místo textu hvězdičky. Zadáte-li type=“hidden“, pak nevidíte vůbec nic. Skryté pole se hodí například tehdy, když chcete společně s formulářem odeslat i nějaká data – nejprimitivnější forma ochrany před boty.

Input jako zaškrtávací pole a jako přepínače
Na zaškrtávacím poli type=“radio“ nic moc záhadného snad není. Atributem checked si můžeme nastavit, že chceme po načtení stránky, aby byl checkbox zašktrnut. Zajímavější je přepínač (výběr) – párový tag Select. Jednotlivé položky výběru vložíme dovnitř selectu párovým tagem option.

Poznámka
Možná jste viděli v jiných článcích, že atributy, jako třeba nowrap (tabulky), checked, selected a možná pár dalších uváděné bez vlastnosti. Dle standardu by ale všechny atributy v xHTML vlastnost mít měly. A tak tam za rovnítko do uvozovek dáme to samé jako název atributu. Fungovat by to mělo tak i tak. Ze stejného důvodu také píšu <br /> namísto <br> Mezera je tam z důvodu zpětné kompatibility.

Textarea
Standardní textové pole vložíme párovým tager TEXTAREA. Atribut COLS udává velikost vodorovně (v závislosti na počtu písmen na řádek) a ROWS svisle. Wrap udává, jak moc zalamovat slova. Soft = jen v místě mezery (nepřesahuje-li slovo řádek), Hard = v místě mezery, v delších slovech kdekoliv, Off = nezalamovat téměř vůbec.

Další tagy
RESET maže všechny nastavené hodnoty formuláře na defaultní, SUBMIT slouží pro odeslání Existuje ještě pár tagů, které se do specifikace dostaly až v roce 1999 a starší prohlížeče s nimi mají problém. Párový tag LABEL (nápis), párový tag FIELDSET (skupina polí), párový tag LEGEND (popisek nad skupinou polí), OPTGROUP (skupina výběrových polí option v selectu), obyčejné tlačítko BUTTON – to je i v příkladu a dá se do něj i vložit HTML kód (třeba obrázek, apod).

Stylování formulářů pomocí CSS
Některé tagy si můžete nastylovat hezky, jiné prakticky vůbec. A starší verze prohlížečů, především Internet Explorer do verze 6, měly s vykreslováním stylů formulářů značné problémy. Zrovna tady se ale můžou hodit tay FIELDSET a OPTGROUP. Můžete si vybrat nějakou skupinu polí a společně jim dát nějakou barvu pozadí, a hned vypadá formulář více k světu.

O Petr Fořt

Student ČVUT FJFI KSE ASI (Softwarové inženýrství v ekonomii). Zajímám se o počítače (programování, diagnostika chyb hw), hudbu. Mám rád grilování, táboráky, hraní na kytaru a srandu v dobré společnosti.