1 / 16

Formuláře

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.

chase-carson
Download Presentation

Formuláře

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.

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

  3. 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.

  4. 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.

  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. • Každý prvek musí mýt atribut name. Tento atribut nastavuje jméno proměnné, ve kterém se budou nacházet data. • Atribut valuepřednastavuje obsah daného pole. Tento obsah lze před odesláním formuláře změnit.

  6. 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">

  7. 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">

  8. 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 <textareacols="40" rows="5" name="poznamka"></textarea>

  9. 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">

  10. 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 <buttonname="tlacitko">Cokoliv</button> 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 – CSSstylopis Obr. 3

  14. Formátování formuláře • 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í • Pomocí jakých značek lze vytvořit formulář? • Jaké jsou způsoby zasílání dat z formuláře? • K jakým účelům se používá parametr action? • Jaké atributy mohou mít prvky formuláře? • 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, 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í

More Related