Formuláře
Formuláře se na stránkách používají pro různé ankety, dotazníky, soutěže, přihlášky apod. Prohlédněte si jednoduchou ukázku formuláře a hlavně její zdroj. Pro zpracování výsledků anket atd. se používají většinou scripty v některém z programovacích jazyků (to už je mimo téma tohoto kurzu), pro naše účely v html využijeme odeslání formuláře na mailovou adresu.
Vymezující tag formuláře je <form> a </form>.
Parametry tagu form určují jakým způsobem bude formulář zpracován, my použijeme metodu post k odeslání formuláře na mailovou adresu.
<form action="mailto:tvujmail@neco.cz" method=post enctype="text/plain">
Formulář může odeslat jen uživatel, který má nastavený poštovní program (většinou Outlook Expres), takže jej ze školy nejspíš neodešlete, ale pokud jako adresu použijete svoji mailovou adresu, odešlu vám formulář při kontrole úkolů. Mail bude obsahovat vždy name příslušného prvku a jeho value (hodnotu).
Jednotlivými prvky formuláře mohou být například:
- textové pole:
<input type="text" name="jméno" size=50 maxlength=30 value="předdefinovaný text" >
jednotlivé parametry tagu INPUT jsou:
type - typ políčka, zde je text (textové pole),
name - pojmenování prvku formuláře důležité pro odeslání,
size - délka,
maxlength - maximální počet znaků,
value - předdefinovaný text, po vyplnění zapsaný text
- výběr jedné hodnoty z více možností:
Oblíbený televizní pořad:
<input type="radio" name="televize" value="Neváhej"> Neváhej a skoč,
<input type="radio" name="televize" value="Esperalda"> Esperalda,
<input type="radio" name="televize" value="blbiny"> Televizní blbiny.
protože je u všech tří položek stejné name, pozná prohlížeč, že patří k jednomu výběru
- výběr z "roletové" nabídky
Vyberte si zboží:
<select name="nakup">
<option> Diablo II
<option> NHL 2000
<option> Quake III
<option>Warcraft III
</select>
pro tag select je možné použít tyto parametry:
multiple - výběr více položek (k témuž ale slouží checkbox), size=číslo - počet zobrazených řádků v okénku
pro tag option je možné použít tyto parametry:
selected - předem nastavená vybraná hodnota, value - předává serveru nebo scriptu jinou než zobrazenou hodnotu
- zaškrtávací políčko:
<input type="checkbox" name="pole1" value="pivo"> pijete pivo ?
je-li políčko zaškrtnuto, odešle se název pole s jeho hodnotou
- pole pro vložení hesla (při psaní se zobrazují hvězdičky):
<input type="password">
- textové pole pro zápis delšího textu se vymezuje tagem textarea:
<textarea name=text cols=40 rows=6>zde zapiš delší text</textarea>
Po vyplnění formuláře zpravidla čekají na uživatele tlačítka:
<input type="SUBMIT" name="OK" value="OK"> - tlačítko pro odeslání formuláře
<input type="RESET" name="CLEAR" value="Vymazat"> - tlačítko pro vymazání formuláře
<input type="button" value="text tlačítka"> - obecné tlačítko používané třeba pro spuštění scriptů
tlačítkem může být i obrázek:
<button name="tlač" type="reset"><img src="Hlpbell.gif"> </button>
Úkoly:
Úkol (4 body):
Vytvoř stránku stránku soutěž.html s formulářem obsahujícím alespoň tři otázky k zodpovězení různým způsobem (text, zaškrtávání, výběr). Prvky formuláře jednoduše stylově upravte (alespoň barvy pozadí a textu) a nezapomeňte přidat nový odkaz na index. Formuláři zadejte metodu post a použijte svoji mailovou adresu (při kontrole jej zkusmo vyplním a odešlu).
| Název školy: | Základní škola, Hradec Králové, M. Horákové 258 |
| Název projektu: | EU peníze školám |
| Číslo projektu: | CZ.1.07/1.4.00/21.2575 |
| Téma: | Tvorba WWW stránek |
| Název: | VY_32_INOVACE_22_10B_tvorba www22 |
| Autor: | Pavel Petr |