Jak vytvářet www stránky - 13. díl

V dnešním dílu se podíváme na základy práce s formuláři.
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:

Adresa:

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:

Heslo:

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:

Jméno:
Příjmení:
Adresa:
Heslo:

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.

Diskuze (4) Další článek: MicroScan E75: Ladič pian

Témata článku: Software, Programování, Klávesová zkratka, E-mailová adresa, Form, Stráň, Volaná zpráva, Action, Post, Password, Textové pole, Reset, Jednoduchý typ, Skutečná velikost, Základní prvek, Pole, Adresa, Str, Díl, Jak, Software na Heureka.cz



Konec českého poskytovatele internetu v přímém přenosu. Připomíná to krachující energetické firmy
Lukáš Václavík
CETINPoskytovatelé internetuPřipojení k internetu
Máte rádi malé telefony? Pak si oblíbíte tohoto třípalcového drobečka, který není větší než platební karta

Máte rádi malé telefony? Pak si oblíbíte tohoto třípalcového drobečka, který není větší než platební karta

** Dnešní telefony se předhánějí v tom, který z nich bude větší ** Malé telefony na trhu skoro vyhynuly... ** Čínská značka si připravila telefon do dlaně s třípalcovým displejem

Martin Chroust
InfraportKompaktní velikostSmartphony
DJI Mini 3: Nová okřídlená čivava do kabelky. Nemá pokročilé funkce jako Pro, ale je mnohem levnější

DJI Mini 3: Nová okřídlená čivava do kabelky. Nemá pokročilé funkce jako Pro, ale je mnohem levnější

** DJI na jaře představilo Mini 3 Pro s autopilotem ** Na konec roku si nechalo jeho ořezanou verzi ** Chybí 4K@60 a právě autopilot, ale cena začíná na 439 eurech

Jakub Čížek
DJIDrony
Za WhatsApp se bude platit! Za předplatné dostanete funkci, která je u konkurence zadarmo

Za WhatsApp se bude platit! Za předplatné dostanete funkci, která je u konkurence zadarmo

** Bylo to jen otázkou času ** Už i WhatsApp nabízí prémiové předplatné ** Za poplatek dostanete funkci, která je u konkurence zadarmo

Martin Chroust
předplatnéWhatsAppMobilní aplikace
Google není jen vyhledávač: 15 užitečných funkcí, o kterých možná ani nevíte

Google není jen vyhledávač: 15 užitečných funkcí, o kterých možná ani nevíte

** Google umí kromě vyhledávání i spoustu dalších věcí ** Vybrali jsme více než 15 užitečných funkcí a schopností ** Stačí zadat do vyhledávače ta správná klíčová slova

Karel Kilián
TipyVyhledávačeGoogle
Nový hit. Tahle appka vám udělá profilovku jako od pouličního ilustrátora

Nový hit. Tahle appka vám udělá profilovku jako od pouličního ilustrátora

** Aplikace NewProfilePic se na Androidu stala hitem ** Můžete si v ní vytvořit profesionálně vypadající profilovky ** Pozor ale na agresivní cenovou politiku za Pro verzi

Martin Chroust
FotografieUmělá inteligenceMobilní aplikace
Facebook má nejspíš vaše telefonní číslo, i když jste mu ho nikdy nedali. Tímto tajným nástrojem ho můžete smazat

Facebook má nejspíš vaše telefonní číslo, i když jste mu ho nikdy nedali. Tímto tajným nástrojem ho můžete smazat

**Meta poskytuje nástroj na vymazání telefonních čísel a e-mailových adres z Facebooku a Instagramu **V minulosti Mark Zuckebrg popřel, že by Facebook vytvářel stínové profily **Metě teď můžete sebrat klíčové iddentifikátory, pořád o vás ale nejspíš ví mnoho dalšího

Petr Urban
MetaSledováníSociální sítě