Jak vytvářet www stránky - 13. díl
Formuláře
Dosud jsme se věnovali pouze tomu, jak předat informace návštěvníkům stránek, tedy směrem od vás. Důležitým prvkem Internetu je ale komunikace a to komunikace obousměrná. Je sice pěkné, když budete moci sdělit svůj názor, ovšem bylo by více než dobré, kdybyste umožnili sdělit názor i vašim čtenářům. K tomu existuje několik způsobů jako například diskuzní fóra, knihy návštěv nebo formuláře. Právě poslední zmíněný způsob bude tématem tohoto dílu našeho seriálu
Formulář
Celý formulář je uložen mezi tagy <FORM> a </FORM>, přičemž tento tag má několik důležitých parametrů:
- action - určuje adresu skriptu (zpravidla se jedná o CGI, PHP nebo ASP skript), který formulář zpracuje. Protože formuláře lze odesílat i prostřednictvím elektronické pošty (to využijí zejména webmasteři, kteří mají své stránky na free webohostingových serverech, na nichž není používání skriptů povoleno), můžete jako hodnotu atributu action uvést e-mailovou adresu, na kterou bude formulář odeslán.
- method - tento atribut může mít hodnotu get nebo post. První jmenovaný je vhodný zejména v případě, že data z formuláře nevyžadují žádné vnější zpracování. Dobrým příkladem je vyhledávání v databázích. V ostatních případech se nastavte parametr method na post (vhodné například pro doplňování nějaké internetové databáze). Při použití metody get se data z formuláře připojují k URL adrese volaného skriptu, u metody post jsou odesílána přímo v HTTP.
- enctype - způsob kódování odesílaných dat. Budete-li data získávat pomocí elektronické pošty, je patrně nejlepší volba text/plain.
Protože většina čtenářů bude patrně používat k získání vyplněných dat e-mail, uvádíme základní stavbu tagu FORM pro tento způsob:
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method="post">
.
.
.
vlastní formulář
.
.
.
</FORM>
Základní ovládací prvky
Nyní přeskočíme na konec formuláře, kam se zpravidla umísťují základní ovládací prvky umožňující odeslání vyplněných dat nebo smazání celého formuláře. Základním stavebním kamenem většiny položek formuláře je tag INPUT, který sám o sobě prakticky nic neznamená, ovšem o něco dále pochopíte, že bez tohoto elementu se při vytváření formulářů neobejdete. Až parametr type určuje v co se dotyčná položka promění. Pro odesílací tlačítko má tento parametr hodnotu submit, pro vymazání formuláře pak reset.
Zdrojový kód jednoduchého tlačítka pro odeslání dat by tedy mohl vypadat takto:
<INPUT type="submit" value="Odešli data!">
V případě, že uživatel stiskne toto tlačítko, předají se data z formuláře na adresu zadanou v parametru action úvodního tagu FORM.
Zapomínat byste neměli ani na možnost, že uživatel bude chtít celý formulář smazat a vyplnit znovu. Zdrojový kód tlačítka, které mu toto umožní, vypadá následovně:
<INPUT type="reset" value="Smaž formulář!">
Stisk tohoto tlačítka způsobí uvedení všech položek formuláře do výchozího stavu.
Textové pole
Textové pole využijete například pro zadávání údajů jako jsou e-mailová adresa, telefon, jméno, příjmení, slova k vyhledávání atp. Opět se používá tag INPUT, tentokrát s parametrem type=text. K dispozici je několik dalších atributů, které dovolují definovat textové pole:
- name - jméno vstupního prvku. Toto jméno se používá při zpracování formuláře skriptem a velmi důležité je jeho určení v případě, kdy jsou data z formuláře odesílána elektronickou poštou. V takovém případě vám pak přijde zpráva, která má strukturu jmeno vstupního prvku=uživatelem zvolená nebo vyplněná hodnota. Pamatujte si, že každé jméno by mělo v jednom formuláři použito pouze jedenkrát (výjimkou jsou skupiny zaškrtávacích políček a přepínacích tlačítek). Parametr name se uvádí u všech elementů INPUT ve formuláři.
- value - zde můžete vyplnit předem definovanou odpověď, kterou může uživatel změnit (např. parametr value="sem napište svůj e-mail" způsobí, že po načtení formuláře bude v textovém poli již vepsán text sem napište svůj e-mail.
- size - vizuální velikost textového pole, v tomto případě se udává v počtu písmen, které budou v poli viditelné.
- maxlength - skutečná velikost textového pole určující kolik písmen je možné maximálně zadat. Pokud je parametr maxlength větší než size, bude při zápisu text odsouván "mimo" textové pole.
- accesskey - klávesová zkratka, která přesune kurzor do vybraného textového pole. Použijete-li například parametr accesskey="k", bude kurzor po stisku kláves Alt+K přesunut právě do tohoto textového pole. Jestliže klávesová zkratka ve formuláři koliduje s některou z klávesových zkratek prohlížeče, má přednost zkratka ve formuláři.
- align - zarovnání textového pole (pokud jste četli předchozí díly našeho seriálu, jistě nemusím vysvětlovat hodnoty left, center a right).
- readonly - tento parametr nemá žádnou hodnotu, jeho uvedení v tagu INPUT způsobí, že příslušné textové pole sice bude viditelné, nicméně uživatel nebude mít žádnou možnost změnit jeho hodnotu.
Jak takové textové pole může vypadat vidíte v následující ukázce:
Adresa: <INPUT type="text" name="adresa" value="vyplňte, prosím, svou adresu" size=30 maxlength=45 accesskey="a" align="left">
Ukázka:
Pole pro vstup hesla
Ukázali jsme si textové pole, ale jak například zajistíte, aby při zadání hesla do takového pole nemohl toto heslo přečíst kolega, který vám bude stát za zády? Od toho je tu pole pro vstup hesla, které je naprosto identické s polem pro zadání textu, rozdílem je, že se na obrazovce uživatele nezobrazují zapsané znaky, ale pouze hvězdičky. Jediným rozdílem proti textovému poli je parametr type, který musí mít hodnotu password, všechny ostatní atributy jsou zcela shodné, proto je zde nebudeme znovu rozebírat.
Dovoluji si ale upozornit, že ačkoli se pole tváří jako bezpečné, může být heslo odhaleno. Velice jednoduché je to v případě, že je formulář odesílán elektronickou poštou - stačí se jen podívat do odeslané pošty a uvidíte zde heslo v plné kráse. Ani jiné způsoby nejsou bez rizika a za patrně nejbezpečnější je považován protokol HTTPS.
Zdrojový kód pole k zadání hesla může tedy vypadat takto:
Heslo: <INPUT type="password" name="uzivheslo" size=20 maxlength=45 accesskey="a" align="left">
Zkuste si něco napsat do následujícího políčka a uvidíte, v čem je rozdíl:
Na závěr si zkusíme vytvořit jednoduchý formulář, který bude odesílán elektronickou poštou a bude obsahovat jméno, příjmení, adresu a uživatelské heslo:
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method="post">
Jméno: <INPUT type="text" name="jmeno" value="" size=15 maxlength=30 align="left"><BR>
Příjmení: <INPUT type="text" name="prijmeni" value="" size=15 maxlength=30 align="left"><BR>
Adresa: <INPUT type="text" name="adresa" value="" size=30 maxlength=45 align="left"><BR>
Heslo: <INPUT type="password" name="heslo" size=20 maxlength=30 align="left"><BR>
<INPUT type="submit" value="Odešli data!"><INPUT type="reset" value="Smaž formulář!">
</FORM>
Po zobrazení v prohlížeči bude formulář vypadat takto:
Zatím to sice není nic moc, ale příště se naučíme další kouzla s formuláři, takže se jistě máte na co těšit.
|
