Formuláře v HTML. Evropský sociální fond Praha a EU Investujeme do vaší budoucnosti

Transkript

1 Formuláře v HTML Praha a EU Investujeme do vaší budoucnosti

2 Obsah 1 Úvod Značky a atributy atributy značky form Prvky ve formuláři Textové vstupy Zaškrtávací políčka Radio-tlačítka Textové pole Selecty Tlačítka Obnovení a odeslání formuláře Další atributy Příklad formuláře... 6 Praha a EU Investujeme do vaší budoucnosti 1

3 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 <form> 2 Značky a atributy 2.1 Atributy značky form name Jméno formuláře (pokud je formulářů na stránce více, jména musí být jedinečná!) action Adresa stránky, na kterou se formulář odešle (na které se formulář zpracuje). Pokud je hodnota atributu prázdná, nebo pokud není atribut uveden, formulář se automaticky odesílá na stránku, na které je umístěn. method metoda odeslání 2 základní metody jsou POST a GET. Pokud atribut není uveden, automaticky je použita metoda GET (vyplněné hodnoty jsou předávány v adrese za značkou "?") Příklad <form name="muj_formular" method="post" action=""> jednotlivé prvky ve formuláři </form> Praha a EU Investujeme do vaší budoucnosti 2

4 2.2 Prvky ve formuláři 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: <input type="text" name="nazev_policka" value="předn. hodnota"> Konkrétní případ: Zadejte login: <input type="text" name="login"> Kromě klasického textu lze použít také type="password", kde jsou jednotlivé znaky maskovány. Zadejte heslo: <input type="password" name="heslo"> 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 y 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. Potvrzuji, že mi již bylo 18 let <input type= checkbox name= plnoletost > 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í. Pohlaví: Muž <input type= radio name= pohlavi value= m > Žena <input type= radio name= pohlavi value= z > Praha a EU Investujeme do vaší budoucnosti 3

5 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). Zanechte vzkaz: <textarea name= vzkaz ></textarea> 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. Oblíbený den: <select name= den > <option value= po >Pondělí</option> <option value= ut >Úterý</option> <option value= st >Středa</option> </select> Tlačítka Tlačítka se vytvoří značkou input s hodnotou atributu type button. Ovšem k funkčnosti jsou potřeba naprogramovat 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ý.) <input type= reset name= obnov value= Vymazat formulář > <input type= submit name= odeslat value= Odeslat formulář > Praha a EU Investujeme do vaší budoucnosti 4

6 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. Praha a EU Investujeme do vaší budoucnosti 5

7 3 Příklad formuláře <form name="anketa" action="" method="post"> <table> <td>jméno:</td> <td><input type="text" name="jmeno"></td> <td>příjmení:</td> <td><input type="text" name="prijmeni"></td> <td>pohlaví:</td> <td> M<input type="radio" name="pohlavi" value="m"> Ž<input type="radio" name="pohlavi" value="z"> </td> <td>vzdělání:</td> <td> <select name="vzdelani"> <option value="zs">základní</option> <option value="sou">střední</option> <option value="ss">střední s Maturitou</option> <option value="vos">vyšší odborné</option> <option value="vs">vysokoškolské</option> </select> </td> <td>koníčky:</td> <td> Vaření: <input type="checkbox" name="vareni"><br> Sport: <input type="checkbox" name="sport"><br> Počítače: <input type="checkbox" name="pocitace"><br> Jiné: <input type="checkbox" name="jine"><br> </td> <td><input type="submit" value="odeslat"></td> <td><input type="reset" value="vymazat"></td> </table> </form> Praha a EU Investujeme do vaší budoucnosti 6