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í, Adresa, Reset, E-mailová adresa, Pole, Str, Form, Textové pole, Klávesová zkratka, Skutečná velikost, Jednoduchý typ, Action, Volaná zpráva, Password, Post, Jak, Díl, Stráň, Základní prvek


Určitě si přečtěte

Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Šmírování kamerami Googlu: Koukněte, co šíleného se objevilo na Street View

Google stále fotí celý svět do své služby Street View. A novodobou zábavou je hledat v mapách Googlu vtipné záběry. Podívejte se na výběr nejlepších!

redakce | 4

redakce
Mapy GoogleStreet View
Starlink podle betatesterů: Rychlejší a levnější než satelitní internet v Česku

Starlink podle betatesterů: Rychlejší a levnější než satelitní internet v Česku

** Reddit se začíná plnit zkušenostmi se Starlinkem ** Při přímé viditelnosti dá i 120 Mb/s ** Klasický satelitní internet už teď dalece překonává

Jakub Čížek | 48

Jakub Čížek
StarlinkPoskytovatelé internetu
AMD uvádí grafické karty Radeon RX 6800, 6800 XT a 6900 XT. Útočí přímo na modely od Nvidie

AMD uvádí grafické karty Radeon RX 6800, 6800 XT a 6900 XT. Útočí přímo na modely od Nvidie

** AMD představilo tři nové grafické karty ** Všechny s architekturou RDNA2, kterou používají i PS5 a Xbox Series ** Karty útočí přímo na GeForce RTX 3000

Karel Javůrek | 78

Karel Javůrek
Radeon RX 6000Grafické kartyAMD
Nejlepší herní notebooky a pracovní stroje: Když máte více než 20 tisíc

Nejlepší herní notebooky a pracovní stroje: Když máte více než 20 tisíc

** Když máte na notebook více než 20 tisíc korun, odpadají kompromisy ** Notebooky na práci dostávají tenká kovová těla a styl ** Herní notebooky zvládnou i nejmodernější hry v plné kvalitě

David Polesný | 43

David Polesný
Notebooky
26 užitečných rozšíření pro Chrome: Naučte prohlížeč nové věci

26 užitečných rozšíření pro Chrome: Naučte prohlížeč nové věci

** Prohlížeč Chrome obsahuje širokou škálu funkcí, neumí ale všechno ** Jeho schopnosti můžete rozšířit pomocí rozšíření ** Vybrali jsme pro vás zajímavé a užitečné doplňky

Karel Kilián | 44

Karel Kilián
Doplňky do prohlížečeChromeProhlížeče
Elon Musk podpořil Signal jako náhradu WhatsAppu. Aplikaci okamžitě zavalili uživatelé
Markéta Mikešová
WhatsAppElon MuskFacebook

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5