Formuláře

Formuláře lze nalézt téměř na každém webu.

Použití formulářů: Blog Uživatelské komentáře Vyhledávání Přihlašovací formuláře Odeslání dodací adresy Objednávkové formuláře apod.

Formuláře

Údaje z formuláře se zasílají serveru. Na serveru se zpracují pomocí nějakého skriptovacího jazyka. Pro zpracování se nejčastěji používá jazyk PHP.

Data z formuláře lze také odeslat na e-mail.

Formulář se vytváří pomocí párové značky

<form></form>

Formuláře

Součástí značky <form> je několik parametrů:method - určuje způsob, jak budou data

odesílána ke zpracování. Používá se metoda GET a POST.

Data odeslaná metodou GET jsou součástí URL. Nevýhodou této metody je to, že data jsou v adresním řádku vidět a to za otazníkem.

Metoda GET se používá v tom případě, když předávaná data jsou jako parametry dané stránky.

Formuláře Metoda POST je vhodná pro větší množství

předávaných dat.

Data se nepředávají do URL (takže nejsou vidět), ale odesílá je jako samostatný HTTP objekt.

Dalším parametrem značky <form> je action. Tento parametr obsahuje URL na skript, kterému je potom formulář posílán.

Pokud se parametr action neuvede, zpracuje data z formuláře soubor s formulářem.

Prvky formuláře Pokud má formulář předat nějaká data, musí

být ve formuláři uvedeny nějaké prvky. Prvky formuláře zároveň udávají jaká vstupní pole bude formulář obsahovat.

Každý prvek musí mýt atribut name. Tento atribut nastavuje jméno proměnné, ve kterém se budou nacházet data.

Atribut value přednastavuje obsah daného pole. Tento obsah lze před odesláním formuláře změnit.

Prvky formuláře Textové pole<input type="text" name="jmeno" size="20"

maxlength="20" value="Zadej jméno"> name – jméno proměnné size – velikost vstupního pole maxlength – maximální délka textu value – přednastavená hodnota

Pole heslo<input type="password" name="heslo">

Prvky formuláře Zaškrtávací políčko<input type="checkbox" name="cjl"

value="čeština">čeština<input type="checkbox" name="anj"

value="angličtina">angličtina

Pole přepínač<input type="radio" name="rad1"

value="muž">muž<input type="radio" name="rad1"

value="žena">žena

Skryté pole<input type="hidden" name="tajne">

Prvky formuláře Pole pro přenos souboru – u značky <form> je potřeba

zadat enctype="multipart/form-data"<input type="file" name="soubor">

Vícenásobný výběr<select name="os"> <option value="2007">Windows 2007 <option value="2008">Windows 2008</select>

Textové pole<textarea cols="40" rows="5"

name="poznamka"></textarea>

Prvky formuláře

Skupina polí<fieldset> <legend>Obory</legend> MECH: <input type="text"

name="mech"><br /> VET: <input type="text" name="vet"><br /> ZAH: <input type="text" name="zah"></fieldset>

Odesílací tlačítko (posílá i souřadnice kliknutí)<input type="image" name="obr"

src="obrazek.jpg">

Prvky formuláře Odesílací tlačítko<input type="submit" value="Odeslat!">

Výmaz zadaných hodnot<input type="reset" value="Vymazat!">

Obecné tlačítko<button name="tlacitko">Cokoliv</button>Typ obecného tlačítka může být: submit, reset, button

Formátování formuláře pomocí CSS

Obr. 1

Formátování formuláře pomocí CSS – kód stránky

Obr. 2

Formátování formuláře pomocí CSS – CSS

stylopis

Obr. 3

Formátování formuláře Vysvětlení jednotlivých položek CSS..pole1 {border-radius: 2em 9px; – zaoblení rohů

boxubackground-color: lime; – barva pozadí světle zelenápadding-left: 10px;} – vnitřní levý okraj 10 px

textarea, select {background-color: #ffffcc; – barva pozadí oranžovácolor: navy; – barva popředí modráborder-radius: 2em 9px; – zaoblení rohů boxu padding-left: 10px;} – vnitřní levý okraj 10 px

.tlacitko {background: navy; – barva pozadí modrácolor: #ffffcc; – barva pozadí oranžováfont-weight: bold; – typ písma tučnécursor: pointer;} – tvar kurzoru ručička

Otázky k opakování

1. Pomocí jakých značek lze vytvořit formulář?2. Jaké jsou způsoby zasílání dat z formuláře?3. K jakým účelům se používá parametr action?4. Jaké atributy mohou mít prvky formuláře?5. K jakým účelům slouží tlačítka typu Reset a

Submit?

Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené

vydání. České Budějovice: KOPP, 2011. BLÁBOLIL, Roman. Www.blabik.cz: Podpora výuky: „Tvorba www

stránek“ [online]. 9. února 2013 11:30. Dostupný z WWW: http://www.blabik.cz/vyuka/ict/35_Tvorba_WWW_stranek.pdf

Použité obrázky:Vlastní