Formuláře Formuláře lze nalézt téměř na každém webu. Formuláře lze nalézt téměř na každém webu. Použití formulářů: Použití formulářů: Blog Blog Uživatelské.

Prezentace na téma: "Formuláře Formuláře lze nalézt téměř na každém webu. Formuláře lze nalézt téměř na každém webu. Použití formulářů: Použití formulářů: Blog Blog Uživatelské."— Transkript prezentace:

1 Formuláře Formuláře lze nalézt téměř na každém webu. Formuláře lze nalézt téměř na každém webu. Použití formulářů: Použití formulářů: Blog Blog Uživatelské komentáře Uživatelské komentáře Vyhledávání Vyhledávání Přihlašovací formuláře Přihlašovací formuláře Odeslání dodací adresy Odeslání dodací adresy Objednávkové formuláře Objednávkové formuláře apod. apod.

2 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. Ú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. Data z formuláře lze také odeslat na e-mail. Formulář se vytváří pomocí párové značky Formulář se vytváří pomocí párové značky<form></form>

3 Formuláře Součástí značky je několik parametrů: Součástí značky 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. 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. Metoda GET se používá v tom případě, když předávaná data jsou jako parametry dané stránky.

4 Formuláře Metoda POST je vhodná pro větší množství předávaných dat. 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. 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 je action. Tento parametr obsahuje URL na skript, kterému je potom formulář posílán. Dalším parametrem značky 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. Pokud se parametr action neuvede, zpracuje data z formuláře soubor s formulářem.

5 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. 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. 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. Atribut value přednastavuje obsah daného pole. Tento obsah lze před odesláním formuláře změnit.

6 Prvky formuláře Textové pole Textové pole name – jméno proměnné name – jméno proměnné size – velikost vstupního pole size – velikost vstupního pole maxlength – maximální délka textu maxlength – maximální délka textu value – přednastavená hodnota value – přednastavená hodnota Pole heslo Pole heslo

7 Prvky formuláře Zaškrtávací políčko Zaškrtávací políčko čeština čeština angličtina angličtina Pole přepínač Pole přepínač muž muž žena žena Skryté pole Skryté pole

8 Prvky formuláře Pole pro přenos souboru – u značky je potřeba zadat enctype="multipart/form-data" Pole pro přenos souboru – u značky je potřeba zadat enctype="multipart/form-data" Vícenásobný výběr Vícenásobný výběr Windows 2007 Windows 2007 Windows 2008 Windows 2008</select> Textové pole Textové pole

9 Prvky formuláře Skupina polí Skupina polí<fieldset> Obory Obory MECH: MECH: VET: VET: ZAH: ZAH: </fieldset> Odesílací tlačítko (posílá i souřadnice kliknutí) Odesílací tlačítko (posílá i souřadnice kliknutí)

10 Prvky formuláře Odesílací tlačítko Odesílací tlačítko Výmaz zadaných hodnot Výmaz zadaných hodnot Obecné tlačítko Obecné tlačítko Cokoliv Cokoliv Typ obecného tlačítka může být: submit, reset, button

11 Formátování formuláře pomocí CSS Obr. 1

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

13 Formátování formuláře pomocí CSS – CSS stylopis Obr. 3

14 Formátování formuláře Vysvětlení jednotlivých položek CSS. Vysvětlení jednotlivých položek CSS..pole1 {border-radius: 2em 9px; – zaoblení rohů boxu background-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

15 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?

16 Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, 2011. 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 http://www.blabik.cz/vyuka/ict/35_Tvorba_WWW_stranek.pdf Použité obrázky: Vlastní