Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
Obsah 1 Úvod ........................................................................................................................................ 2 2 Značky a atributy ..................................................................................................................... 2 2.1 atributy značky form ........................................................................................................ 2 2.2 Prvky ve formuláři ............................................................................................................ 3 2.2.1 Textové vstupy .......................................................................................................... 3 2.2.2 Zaškrtávací políčka .................................................................................................... 3 2.2.3 Radio-tlačítka............................................................................................................. 3 2.2.4 Textové pole .............................................................................................................. 4 2.2.5 Selecty ....................................................................................................................... 4 2.2.6 Tlačítka ...................................................................................................................... 4 2.2.7 Obnovení a odeslání formuláře................................................................................. 4 2.3 Další atributy .................................................................................................................... 5 3 Příklad formuláře ..................................................................................................................... 6
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
1
1 Úvod Formuláře se používají pro komunikaci s uživatelem. Je možné se s nimi setkat např. při registracích, přihlášení apod. K funkčnosti formulářů je třeba vytvořit alespoň jednoduchý program pro jejich zpracování. V tomto dokumentu je ukázáno, jak formulář správně vytvořit – jejich zpracování zde není. celý formulář je uvnitř párové značky
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
2
2.2 Prvky ve formuláři 2.2.1 Textové vstupy Pro textové vstupy se používá značka input s atributem type="text". Důležitým atributem je name, jehož hodnotou je název políčka resp. název prvku formuláře. Atribut name musí být u každého formulářového prvku a jeho hodnota musí být ve formuláři jedinečná! (kromě type="radio" – viz dále). Atribut value v tomto případě představuje předvyplněný text v políčku (pro textový vstup není nezbytný). Obecný příklad:
Konkrétní případ: Zadejte login:
Kromě klasického textu lze použít také type="password", kde jsou jednotlivé znaky maskovány. Příklad: Zadejte heslo:
2.2.2 Zaškrtávací políčka Zaškrtávací políčka mohou nabývat pouze dvou hodnot: pravda nebo nepravda (True nebo False). Například: souhlasím s podmínkami, jsem plnoletý, přeji si dostávat emaily s novinkami apod. Zaškrtávací políčka se mají značku input s atributem type=“checkbox“. Opět je potřeba zadat jedinečný atribut name, ovšem nepoužívá se atribut value, protože jejich hodnotou je pouze on nebo off. Příklad: Potvrzuji, že mi již bylo 18 let
2.2.3 Radio-tlačítka Nebo též radiobuttony. Používají se tam, kde je potřeba zvolit pouze jednu možnost z několika. Například MUŽ x ŽENA, odpovědi u testů apod. Radiobuttony se realizují značkou input s atributem type=“radio“. Aby bylo možno zvolit pouze jednu odpověď, je třeba použít u skupiny stejný atribut name a odlišit atributy value (tudíž, atribut value je v tomto případě nezbytný). Pokud by byly hodnoty atributu name odlišné, bylo by možné označit obě tlačítka, což je v tomto případě nežádoucí. Příklad: Pohlaví: Muž Žena
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
3
2.2.4 Textové pole Textové pole se používá pro odeslání většího množství textu – například příspěvku do diskusního fóra. Pro realizaci se párová používá značka textarea (opět je nutný atribut name). Příklad: Zanechte vzkaz:
2.2.5 Selecty Podobně jako radiobuttony lze použít také select-option. Selecty se použijí tam, kde je na výběr více možností. Realizace se provede pomocí párové značky select s atributem name. Uvnitř značky select jsou párové značky option s atributem value pro jednotlivé možnosti. Příklad: Oblíbený den: <select name=“den“> …
2.2.6 Tlačítka Tlačítka se vytvoří značkou input s hodnotou atributu type „button“. Ovšem k funkčnosti jsou potřeba naprogramovat.
2.2.7 Obnovení a odeslání formuláře Obnovení a odeslání formuláře lze docílit speciálními tlačítky realizovanými značkou input. Pro vrácení formuláře do původního stavu slouží type=“reset“ a pro odeslání type=“submit“. Po kliknutí na tlačítko „odeslat“ se načte stránka uvedené v atributu action nadřazené značky form. (případně se stránka načte znovu, pokud tento atribut není uveden nebo je prázdný.) Příklad:
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
4
2.3 Další atributy maxlength Používá se u textových vstupů. Hodnotou atributu je číslo, které udává maximální počet znaků v políčku.
selected Používá se u značky option – udává výchozí (zobrazenou) možnost. Pokud atribut není uveden, zobrazuje se automaticky první uvedená možnost. Jedná se o atribut, který nemá žádnou hodnotu.
checked Používá se input-type-checkbox nebo input-type-radio. Pokud je atribut uveden, políčko je zaškrtnuté resp. označené. Podobně, jako selected, nemá žádnou hodnotu.
wrap Používá se u textových polí (texarea). Hodnotou atributu je on (pro zalamování řádků) a off (pro nezalamování řádků).
disabled Používá se pro zablokování prvku ve formuláři. Ani tento atribut nemá žádnou hodnotu.
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
5
3 Příklad formuláře
Evropský sociální fond Praha a EU – Investujeme do vaší budoucnosti
