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

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ů

28.11.2018 23:56 /František Kučera
Prosincový sraz spolku OpenAlt se koná ve středu 5.12.2018 od 16:00 na adrese Zikova 1903/4, Praha 6. Tentokrát navštívíme organizaci CESNET. Na programu jsou dvě přednášky: Distribuované úložiště Ceph (Michal Strnad) a Plně šifrovaný disk na moderním systému (Ondřej Caletka). Následně se přesuneme do některé z nedalekých restaurací, kde budeme pokračovat v diskusi.
Komentářů: 1

12.11.2018 21:28 /Redakce Linuxsoft.cz
22. listopadu 2018 se koná v Praze na Karlově náměstí již pátý ročník konference s tématem Datová centra pro business, která nabídne odpovědi na aktuální a často řešené otázky: Jaké jsou aktuální trendy v oblasti datových center a jak je optimálně využít pro vlastní prospěch? Jak si zajistit odpovídající služby datových center? Podle jakých kritérií vybírat dodavatele služeb? Jak volit vhodné součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně datové centrum spravovat? Jak co nejlépe eliminovat možná rizika? apod. Příznivci LinuxSoftu mohou při registraci uplatnit kód LIN350, který jim přinese zvýhodněné vstupné s 50% slevou.
Přidat komentář

6.11.2018 2:04 /František Kučera
Říjnový pražský sraz spolku OpenAlt se koná v listopadu – již tento čtvrtek – 8. 11. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma umění a technologie, IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

4.10.2018 21:30 /Ondřej Čečák
LinuxDays 2018 již tento víkend, registrace je otevřená.
Přidat komentář

18.9.2018 23:30 /František Kučera
Zářijový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 20. 9. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

9.9.2018 14:15 /Redakce Linuxsoft.cz
20.9.2018 proběhne v pražském Kongresovém centru Vavruška konference Mobilní řešení pro business. Návštěvníci si vyslechnou mimo jiné přednášky na témata: Nejdůležitější aktuální trendy v oblasti mobilních technologií, správa a zabezpečení mobilních zařízení ve firmách, jak mobilně přistupovat k informačnímu systému firmy, kdy se vyplatí používat odolná mobilní zařízení nebo jak zabezpečit mobilní komunikaci.
Přidat komentář

12.8.2018 16:58 /František Kučera
Srpnový pražský sraz spolku OpenAlt se koná ve čtvrtek – 16. 8. 2018 od 19:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát jsou tématem srazu databáze prezentaci svého projektu si pro nás připravil Standa Dzik. Dále bude prostor, abychom probrali nápady na využití IoT a sítě The Things Network, případně další témata.
Přidat komentář

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ář

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

> Poslední diskuze

13.12.2018 10:57 / Jan Mareš
Re: zavináč

2.12.2018 23:56 / František Kučera
Sraz

5.10.2018 17:12 / Jakub Kuljovsky
Re: Jaký kurz a software by jste doporučili pro začínajcího kodéra?

20.9.2018 10:04 / Jan Ober
Jaký kurz a software by jste doporučili pro začínajcího kodéra?

20.9.2018 10:00 / Jan Ober
Re: Gimp

Více ...

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