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

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ů

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

13.2.2018 0:41 /František Kučera
Únorový pražský sraz OpenAltu se koná 15. 2. 2018 a tentokrát se vydáme na návštěvu do jednoho pražského datacentra. Sejdeme se v 17:50 v severovýchodní části nástupiště tramvajové zastávky Koh-I-Noor. Po exkurzi se přesuneme do restaurace U Pštrosa (Moskevská 49), kde probereme tradiční témata (svobodný software a hardware, DIY, CNC, SDR, 3D tisk…) a tentokrát bude k vidění i IoT brána od The Things Network.
Přidat komentář

11.2.2018 23:11 /Petr Ježek
Hledáte lehký a rychlý prolížeč PDF souborů? Pokud vás již omrzelo čekat na načítání stránek či jiné nešvary, zkuste xreader.
Přidat komentář

11.2.2018 20:35 /Redakce Linuxsoft.cz
Třetí ročník odborné IT konference na téma Cloud computing v praxi proběhne ve čtvrtek 1. března 2018 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 hod. dopoledne do cca 16 hod. odpoledne. Konference o trendech v oblasti cloud computingu nabídne i informace o konkrétních možnostech využívání cloudů a řešení vybraných otázek souvisejících s provozem IT infrastruktury.
Přidat komentář

15.1.2018 0:51 /František Kučera
První letošní pražský sraz se koná již tento čtvrtek 18. ledna od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Vítáni jsou všichni příznivci svobodného softwaru a hardwaru, ESP32, DIY, CNC, SDR nebo dobrého piva. Prvních deset účastníků srazu obdrží samolepku There Is No Cloud… just other people's computers. od Free Software Foundation.
Přidat komentář

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

   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