LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> HTML (15) - formuláře 5

V dnešním díle si ukážeme, jak můžeme uživatelům zpříjemnit práci s formuláři.

16.9.2004 15:00 | Pavel Kácha | Články autora | přečteno 27162×

V minulých dílech jsme se naučili, jak se vytvářejí formuláře. A pokud trochu zapátráte v paměti, jistě si vzpomenete i na tabulky a na díly o formátování textu. Praktické HTML ale není jen o znalosti příkazů, musíte také vědět, jak jednotlivé prvky vzájemně zkombinovat - případně jaké další technologie použít - aby byl výsledný zdrojový kód optimalizovaný nejen pro zobrazení v nejmenovaném uzavřeném prohlížeči, ale aby byl přívětivý i k uživateli.

Kromě toho, aby se uživatel dokázal na stránkách rychle orientovat a našel hledané informace, je rovněž důležité, aby se dokázal dobře orientovat ve formulářích na vašich stránkách. Formuláře jsou vlastně jakýmsi komunikačním rozhraním mezi uživatelem a serverem. A každému je asi jasné, že se lépe domluví s někým, kdo mluví jednoduchým a jasným jazykem. Tvorba jasně srozumitelných formulářů není tak složitá jak by se mohlo zdát.

Srovnejte políčka

U jednodušších formulářů může stačit, že dáte všechny položky do jedné řádky, ale to platí jen u velice malých formulářů. Složitější formuláře byste ale měli umisťovat do tabulky. Vím, že to není zrovna ohleduplné k textový prohlížečům, ale v současnosti je to asi nejlepší způsob, jak problém vyřešit. Další řešení se nabízí například v CSS, ale s jeho podporou je to bohužel v některých prohlížečích ještě dost problematické, tudíž se tento způsob zarovnání nelze spolehnout na 100%.

Pokud tedy budeme vkládat formulář do tabulky, měli bychom do jednoho sloupečku vkládat popis a do druhého jednotlivé prvky formuláře. Každá položka formuláře by měla mít vlastní řádek, pokud dáte nějaké drobné políčko mezi další části formuláře, může se snadno stát, že uživatel ho přehlédne a nevyplní.

Vyjímkou jsou data, která jsou spolu nějak logicky provázaná například chcete od návštěvníka zjistit, na který den chce objednat vámi poskytovanou službu. V tomto případě je nesmysl dělit jednotlivé položky data do samostatných částí. Nejlepším řešením bude asi vytvoření jednoho řádku s popisem v jedné buňce a se třemi select-boxy pro jednotlivé části data ve druhé buňce. Pokud jako předvolenu hodnotu zvolíte popisky den, měsíc, rok, bude to naprosto dokonalé, ale musíte si ošetřit (nejlépe na straně serveru), aby uživatel vyplnil nějaký den a nehromadili se vám v databázi objednávky na den den a podobně.

Jednotlivé části formuláře by měly nějak logicky jít za sebou. Co byste si například pomysleli o autorovi stránky, kde jsou položky ve formuláři uspořádané takto:

  1. Titul za jménem
  2. Křestní jméno
  3. E-mail
  4. Titul před jménem
  5. Příjmení

V případě že používáte prvek pro víceřádkový text (textarea), doporučuji přidat jeho popisku zarovnání nahoru (style="vertical-align : top;"), je to možná jen drobnost, ale stránka potom vypadá mnohem lépe a je i přehlednější.

A k této části připojím i praktický příklad (spodní tlačítko formulář vymaže, ale data nikam neodešle ke zpracování - ve vašich stránkách by to tak samozřejmě nebylo..)

<form method="post" name="html15" action="linuxsoft.cz">
<table>
  <tr>
    <td>
Jméno:</td>
    <td><input
type="text" name="jmeno"></td>
  </tr>
  <tr>
    <td>
Příjmení:</td>
    <td><input
type="text" name="prijmeni"></td>
  </tr>
  <tr>
    <td>
E-mail:</td>
    <td><input
type="text" name="email"></td>
  </tr>
  <tr>
    <td
colspan="2" style="text-align : center;"><input type="reset" name="reset"</td>
  </tr>
</table>
</form>
Jméno:
Příjmení:
E-mail:

Vytvořte klávesové zkratky

Párovým elementem <label></label> můžete velice zpříjemnit používání vašich formulářů - tento element slouží pro tvorbu klávesových zkratek. Pro určení políčka, ke kterému právě definovaná klávesová zkratka patří použijete atribut for="" a jako jeho hodnota bude jméno prvku, na který se má přemístit kurzor. Atributem accesskey="" nastavíte písmeno, které bude spolu s klávesou ALT tvořit klávesovou zkratku.

Tento kód vytvoří klávesovou zkratku ALT + E, která přemístí kurzor do pole pro zadání e-mailu (pole se jmenuje email - jde o část kódu vytrženou z tabulky). Pro lepší orientaci je aktivní klávesa v popisu zvýrazněna tučně.

    <td><label for="email" accesskey="e"><b>E</b>-mail:</label></td>
    <td><input
type="text" name="email"></td>

Nápad vytvořit tyto klávesové zkratky byl jistě dobrý, ale některé prohlížeče je nepodporují nebo pod nimi už mají přiřazené své vlastní funkce, které mají přednost před těmi na stránce, takže ani není příliš perspektivní tuto jistě zajímavou funkci využívat.

Rychlejší navigace pomocí tabulátoru

Běžně můžete přecházet mezi jednotlivými aktivními položkami stránky pomocí klávesy TAB, pořadí prvků je podle pořadí jejich vložení do stránky. Pokud chcete toto pořadí změnit můžete k tomu využít atribut tabindex="", který je povolený pro elementy a, area, object, input, select, textarea, button a jehož parametrem je libovolné kladné celé číslo. Přechod mezi prvky stránky pomocí klávesy TAB potom probíhá tak, aby hodnota atributu tabindex="" neustále stoupala.

Sdružujte logické části formuláře

Pokud chcete jednotlivé části formuláře opticky pospojovat rámečkem, pomůže vám v tom párový tag <fieldset></fieldset>. Ukončovací tag je povinný. Mezi tyto tagy napíšete tu část stránky, kterou chcete orámovat.

V případě, že za počáteční tag <fieldset> připojíte párový tag <legend></legend>, bude mít rámeček i hezký nadspis.

<fieldset>
<legend>
užitečný formulář</legend>
vlastní formulář - na jeho obsahu nezáleží
</fieldset>
užitečný formulář vlastní formulář - na jeho obsahu nezáleží

Kontrolujte data

Mohu jen doporučit, abyste všechny povinné položky kontrolovali ještě před tím, než je odešlete na server - typicky pomocí JS. Je to rychlejší - návštěvník hned vidí, co zapomněl vyplnit nebo co vyplnil špatně. Navíc ušetříte přenos zbytečných dat po síti.

Kontrola na straně klienta je sice užitečná, ale je nutné aby se data kontrolovala i na serveru před jejich zpracováním, proto tuto část rozhodně neopomíjejte.

Verze pro tisk

pridej.cz

 

DISKUZE

Změna vzhledu 23.2.2008 15:24 Dan Pelíšek
  L Re: Změna vzhledu 25.2.2008 23:42 Dan Pelíšek




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

16.7.2018 1:05 /František Kučera

Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.


Přidat komentář

18.6.2018 0:43 /František Kučera
Červnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 21. 6. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: F-Droid, aneb svobodný software do vašeho mobilu. Kromě toho budou k vidění i vývojové desky HiFive1 se svobodným/otevřeným čipem RISC-V.
Přidat komentář

23.5.2018 20:55 /Ondřej Čečák
Od pátku 25.5. proběhne na Fakultě informačních technologií ČVUT v Praze openSUSE Conference. Můžete se těšit na spostu zajímavých přednášek, workshopů a také na Release Party nového openSUSE leap 15.0. V na stejném místě proběhne v sobotu 26.5. i seminář o bezpečnosti CryptoFest.
Přidat komentář

20.5.2018 17:45 /Redakce Linuxsoft.cz
Ve čtvrtek 31. května 2018 připravuje webový magazín BusinessIT ve spolupráci s Best Online Média s.r.o. pátý ročník odborné konference Firemní informační systémy 2018. Akce proběhne v kongresovém centru Vavruška (palác Charitas), Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 15 hod. odpoledne. Konference je zaměřena na efektivní využití firemních informačních systémů a na to, jak plně využít jejich potenciál. Podrobnější informace na webových stránkách konfrence.
Přidat komentář

14.5.2018 7:28 /František Kučera
Květnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 17. 5. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: Audio – zvuk v GNU/Linuxu.
Přidat komentář

7.5.2018 16:20 /František Kučera
Na stránkách spolku OpenAlt vyšla fotoreportáž Pražské srazy 2017 dokumentující srazy za uplynulý rok. Květnový pražský sraz na téma audio se bude konat 17. 5. 2018 (místo a čas ještě upřesníme).
Přidat komentář

17.4.2018 0:46 /František Kučera
Dubnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 4. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tématem tohoto srazu bude OpenStreetMap (OSM) aneb svobodné mapy.
Přidat komentář

16.3.2018 22:01 /František Kučera
Kulatý OpenAlt sraz v Praze oslavíme klasicky: u limonády a piva! Přijďte si posedět, dát si dobré jídlo a vybrat z mnoha piv do restaurace Kulový blesk, který najdete v centru Prahy nedaleko metra I. P. Pavlova na adrese Sokolská 13, Praha 2. Sraz se koná ve čtvrtek 22. března a začínáme v 18:00. Heslo: OpenAlt. Vezměte s sebou svoje hračky! Uvítáme, když si s sebou na sraz vezmete svoje oblíbené hračky. Jestli máte nějaký drobný projekt postavený na Arduinu, nějakou zajímavou elektronickou součástku, či třeba i pěkný úlovek z crowdfundingové akce, neváhejte. Oslníte ostatní a o zábavu bude postaráno.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

20.2.2018 18:48 / Ivan Majer
portal

20.2.2018 15:57 / Jan Havel
Jak využíváte služby cloudu v podnikání?

16.1.2018 1:08 / Ivan Pittner
verejna ip od o2 ubuntu

15.1.2018 17:26 / Mira Harvalik
Re: Jak udělat HTML/Javascript swiping gallery do mobilu?

30.12.2017 20:16 / Michal Knoll
odmocnina

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2018) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze