XHTML 1. Formuláře. Element form. <form>... </form>

Rozměr: px

Začít zobrazení ze stránky:

Download "XHTML 1. Formuláře. Element form. <form>... </form>"

Antonín Liška
před 5 lety
Počet zobrazení:

1 XHTML 1 Formuláře Činnost: - zadávání informací do elektronického obchodu; - odesílání jména a dalších informací pro on-line službu; - nákup letenek a cestovních služeb; - nákup dalšího zboží a služeb, apod. Pro fukčnost formuláře, je potřeba na stráně serveru vytvořit program pro zpracování jeho dat. Element form <form>... </form> Element form má dva povinné atributy: method definuje, jakým způsobem bude formulář komunikovat s serverem (hodnoty get a post). action udáva cestu, kam bude formulář odeslán.

2 XHTML 2 Formuláře Příklad. Zadávání atributů method a action a jejich hodnot. <form method= get action= > </form> Vytvářený kod nebude nic dělat. Formuláře pracují v závislosti na konceptu řídících prvků. Řídící prvky jsou implicitní rámečky a tlačítka, jež se objeví jako důsledek koda HTML.

3 Formuláře Vstupní textová pole XHTML 3 K vytvoření textového pole se použivá element input s atributem type s hodnotou text. Příklad. Zadávání vstupních textových polí. <form method= get action= > Jméno: <input type= text /> <br/> Příjmení:<input type= text /> <br/> Telefon:<input type= text /> </form> Jméno: Příjmení: Telefon:

4 XHTML 4 Formuláře Pro odlišení a označení vstupních polí se používa kombinace atributů name a id s príslušnýmí hodnotami. To umožní nastavovat styly pro konkrétní vstupní pole a zpracování ve skriptech. Příklad. Označování textových vstupních polí (atributy name a id) <form method= get action= > Jméno: <input type= text name= jmeno id= jmeno /> <br/> Příjmení:<input type= text name= prijmeni id= prijmeni /> <br/> Telefon:<input type= text name= telefon id= telefon /> </form>

5 XHTML 5 Formuláře Nastavení šířky (atribut size) Nastavení počtu znaků pro textové pole (atribut maxlength) Příklad. Úpravy textového pole zadáním atributů size a maxlength. <form method= get action= > Jméno: <input type= text name= jmeno id= jmeno size= 25 maxlength= 40 /> <br/> Příjmení:<input type= text name= prijmeni id= prijmeni size= 25 maxlength= 40 /> <br/> Telefon:<input type= text name= telefon id= telefon size= 15 maxlength= & /> </form> Nastavení atributu na & znamená, že není počet znaků omezen. Pole pro zadaní hesla: <input type= password name= heslo id= heslo size= 15 />

6 Formuláře Zadávání zaškrt krtávacích ch polí a přepp epínačů XHTML 6 Zaškrtávací polí:- Výběr několika položek. Element input s atributem type s hodnotou checkbox. <p> Vyberte prosím svůj oblíbený způsob relaxace: </p> <input type= checkbox name= cetba id= cetba />Četba<br/> <input type= checkbox name= sport id= sport />Sport<br/> <input type= checkbox name= hry id= hry />Hry Vyberte prosím svůj oblíbený způsob relaxace: Četba Sport Hry Atributy name a id jsou nastaveny logicky podle přiřazené volby.

7 Formuláře Zadávání zaškrt krtávacích ch polí a přepp epínačů XHTML 7 Přepínače: umožňují volbu z přednastavených hodnot (Výběr jedne položky). Element input s atributem type s hodnotou radio. Hodnota atributu name je stejna pro všechny volby (stejný název). Atribut value pro odlišení voleb. <h2> Pohlaví: </h2> <input type= radio value= zena name= pohlavi id= zena />Žena<br/> <input type= radio value= muz name= pohlavi id= muz />Muž<br/> <input type= radio value= tajne name= pohlavi id= tajne />Nechci uvést Pohlaví: Žena Muž Nechci uvést

8 XHTML 8 Formuláře Přednastavené možnosti. Nastavení některe možnosti jako výchozí (atribut checked). <body> <form method="get" action=" <p> Vyberte prosím svůj oblibený způsob relaxace:</p> <input type= checkbox name= cetba id= cetba />Četba<br/> <input type= checkbox name= sport id= sport checked= checked />Sport<br/> <input type= checkbox name= hry id= hry />Hry <p> Jaké je vaše pohlaví?</p> <input type= radio name= pohlavi id= zena checked= checked />Žena<br/> <input type= radio name= pohlavi id= muz />Muž<br/> <input type= radio name= pohlavi id= tajne />Nechci uvést </form> </body>

9 XHTML 9 Seznamy Dva druhy formulářových seznamů: - rozevírací seznam; - seznam. Rozevírací seznam: mnoho možností - - jeden výběr. Elementy select a option. <p> Stát </p> <select> <option value= Arizona >Arizona</option> <option value= California >California</option> </select> Stát Arizona Arizona California Přednastavení vlob (výchozí hodnoty- - atribut selected): <option value= Nevada selected= selected >Nevada</option>

10 XHTML 10 Seznamy Seznamy umožňují vybrat i více voleb. Do počateční značky se zadává atribut size s číselnou hodnotou, ktérá odpovídá počtu možností: <select size= 6 > Do všech možností, které by měly být implicitně vybrány, můžete přidat atribut selected. Seznamy umožňují vícenásobný výběr (atribut multiple). <selected size= 6 multiple= multiple > Stát Arizona Texas Nevada Uta California

11 XHTML 11 Práce s textovou oblasti Element textarea s atributy rows a cols pro stanovení zobrazenéčástí: rows určují, kolík řádků textu bude mocí v textové oblasti být. cols definují, jak široké textova oblast bude. <p> Pokud máte nějaké požadavky, napište je sem: </p> <textarea rows= 10 cols= 25 > </textarea> Výsledná textová oblast: Pokud máte nějaké požadavky, napište je sem: Ujistěte se prosím, že je to pokoj pro nekuřaky. Také bych byl rád ubytován v nějaké klídnejšíčásti hotelu.

12 XHTML 12 Práce s textovou oblasti Atribut name umožňuje zpracování informací skriptem; id pro připojení skriptů. <p> Pokud máte nějaké požadavky, napište je sem: </p> <textarea rows= 10 cols= 25 name= požadavky id= requestbox > </textarea> Přednastavené textu: <p> Pokud máte nějaké požadavky, napište je sem: </p> <textarea rows= 10 cols= 25 name= požadavky id = requestbox > Sem napiště svůj komentář </textarea> Pokud máte nějaké požadavky, napište je sem: Sem napište svůj komentář

13 XHTML 13 Odesílání a vyčištění formuláře Tlačitko pro vyčištění formuláře vráti formulář do původního stavu. Tlačitko pro odeslání odešle data z formuláře. Pro zpracovaní dat na serveru - - atributy method a action elementu form <form method= post action= cgi-bin/mailscript/ > <input type= reset value= Vrátit /> <input type= submit value= Odeslat /> </form> Vrátit Odeslat

14 XHTML 14 Grafická tlačitka pro odeslání formuláře V HTML můžete použit vlastní grafické tlačitko pro odeslání dat. Vytvořim grafické odesílací tlačitko (submit-button.gif) a vložim jej do formuláře pomocí elementu input: <form method= post action= cgi-bin/mailscript/ > <input type= image src= submit-button.gif width= 75 height= 25 alt= Odeslat! value= submit /> </form> Když přes tlačitko prochazí kurzor myši, ukazatel se zmení na ručičku a zobraží se alternativní text ( Odeslat! )

15 XHTML 15 Seskupování polí formuláře Můžete rozdělit oblasti formuláře pomocí elementu fieldset na specifické sady polí (sekcí). Můžete použit element legend a přidat pro každou z téchto sekcí záhlaví <form method= post action= > <fieldset > <legend>kontaktní informace</legend> Jméno: <input type= text name= jmeno id= jmeno size= 25 maxlength= 40 /> <br/> Příjmení:<input type= text name= prijmeni id= prijmeni size= 25 maxlength= 40 /> <br/> Telefon:<input type= text name= telefon id= telefon size= 15 maxlength= 10 /> </fieldset>

16 Seskupování polí formuláře XHTML 16 <fieldset> <legend> Oblibenéčinnosti </legend> <input type= checkbox value= cteni name= cteni id= cteni />Čtení<br/> <input type= checkbox value= sporty name= sporty id= sporty checked= checked />Sporty<br/> <input type= checkbox value= hry name= hry id= hry /> Počítačévé hry </fieldset> <fieldset> <legend>odesílání nebo vrácení formuláře do původního stavu</legend> <input type= reset value= Vrátit /> <input type= submit value= Odeslat! /> </fieldset> </form>

17 XHTML 17 Seskupování polí formuláře Kontaktní informace Jméno: Příjmení: Telefon: Oblíbenéčinnosti Čtení Sporty Počítačové hry Odeslání nebo vrácení formuláře Vrátit Odeslat!

18 XHTML 18 Seskupování prvků seznamu Element optgroup. Atribut label v počateční značce optgroup i u každé jednotlivé položky této skupiny. Příklad. Seskupování položek seznamu pomocí optgroup. <select name= regiony size= 14 > <optgroup label= Západní region> <option value= Plzen label= Plzen >Plzeň</option> <option value= Tachov label= Tachov >Tachov</option> <option value= Domazlice label= Domazlice >Domažlice</option> </optgroup> <optgroup label= Východní region> <option value= Hradec_Kralove label= Hradec_Kralove >Hradec Králové</option> <option value= Pardubice label= Pardubice >Pardubice</option> <option value= Havlicku_brod label= Havlicku_brod >Havlíčků brod</option> </optgroup> </select>

19 XHTML 19 Výsledek: Západní region Plzeň Tachov Domažlice Východní region Hradec Králové Pardubice Havlíčků brod

Podobné dokumenty

Návrh a tvorba WWW stránek 1/8. Formuláře

Návrh a tvorba WWW stránek 1/8 Formuláře význam předávání hodnot od uživatele skriptům mezi značkami a základní atributy action definuje obslužný skript, nelze v XHTML method metoda, kterou