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 26684×

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ů

14.11.2017 16:56 /František Kučera

Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).


Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

13.9.2017 8:00 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

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

> Poslední diskuze

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

Více ...

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