Formuláře. Aby nám mohli uživatelé něco hezného napsat třeba co si o nás myslí!

Transkript

1 Formuláře Aby nám mohli uživatelé něco hezného napsat třeba co si o nás myslí!

2 HTML formuláře: Formuláře Možnost, jak uživatel může vložit obsah na web - odeslat data na server - zpracovat data ve webové stránce JavaScriptem

3 Formuláře <form action="abc.php" method="post">... formulářové prvky... </form> action: skript, kterému budou poslána data method: HTTP metoda

4 GET POST PUT DELETE HEAD HTTP metody GET získání dat ze serveru POST poslání změn na server PUT vytvoření nového záznamu DELETE smazání záznamu HEAD získání informací o záznamu

5 HTTP metody Architektonický vzor REST: Objekty mají vlastní adresu (URL); k nim je definována sada operací CRUD (Create; Retrieve; Update; Delete) V praxi se používají nejčastěji GET a POST (hlavně proto, že FORM jiné metody nezvládal) GET pro získávání dat, POST pro jakékoli změny.

6 Formulářové prvky Textová pole Přepínače Zaškrtávací políčka Rozbalovací seznamy Tlačítka V HTML5 nové typy: kalendář, barva, ,...

7 Mocný <input> Textové pole <input type=text...> Pole pro heslo <input type=password...> Přepínače <input type=radio...> Zaškrtávací políčka <input type=checkbox...> Odesílací tlačítko <input type=submit...>

8 Mocný <input> <input type=xxx name="..." value="..." > name: jméno, pod nímž bude obsah prvku poslán v HTTP dotazu; pod ním bude dostupný na serveru. Nově ho lze nahradit pomocí id, ale podpora není konzistentní

9 Mocný <input> <input type=xxx name="..." value="..." disabled readonly required > disabled: zakázaný readonly: pouze ke čtení required: vyžadovaný

10 Input type=text <input type=text name="..." value="text..." size=20 maxlength=30 > size: šířka políčka v počtu znaků (použijte ale spíš CSS vlastnost width) maxlength: počet znaků, které lze zadat

11 Input type=password <input type=password name="..." value="text..." size=20 maxlength=30 > Totéž jako text, jen místo znaků jsou kolečka

12 Input type=hidden <input type=hidden name="..." value="text..." > Vstupní prvek není vidět, používá se k předání "skrytých parametrů"

13 Input type=checkbox <input type=checkbox name="..." value="text..." checked > Zaškrtávací políčko ano / ne

14 Input type=radio <input type=radio name="..." value="text..." checked > Více prvků se stejným jménem (name) vytvoří skupinu přepínač, u něhož může být vybrána jen jedna jediná hodnota.

15 Input type=submit <input type=submit name="..." value="text..." > Odesílací tlačítko. Jeho aktivace způsobí odeslání zadaných dat na server

16 Input type=reset <input type=reset name="..." value="text..." > Nulovací tlačítko vymaže formulář a zobrazí přednastavené hodnoty. Jeho použitelnost je sporná; snažte se mu vyhnout, jeho užitek rozhodně nevyváží omylem smazané formuláře. Navíc je svázán se stisknutím klávesy Esc.

17 Input type=image <input type=image name="..." value="text..." src="...obrázek..." > Odesílací tlačítko jako obrázek; na server posílá souřadnice bodu, kde bylo kliknuto.

18 Input type=file <input type=file name="..." > pro upload souborů. Zobrazí textové pole a tlačítko "Vybrat soubor" NUTNÉ do tagu <form> doplnit: enctype="multipart/form-data"

19 Input type=... (HTML5)

20 select / option <select name="ovoce"> <option value="jablko">jablko</option> <option value="hruska" selected="selected">hruška</option> </select> Umožňuje výběr jedné nebo více možností ze seznamu možných voleb (<option>). Poslaná hodnota je rovna hodnotě vybrané možnosti.

21 select <select name="..." multiple size=5 disabled >... options... </select> Multiple: víc možností Size: počet viditelných voleb Disabled: zakázané

22 option <option value="hodnota" selected disabled >Zobrazená hodnota</option> Selected: položka je vybraná Disabled: položku nelze vybrat

23 textarea <textarea name="..." cols=50 rows=10 disabled >Výchozí obsah</textarea> cols: počet sloupců rows: počet řádků Disabled: Nelze vybrat

24 label <label for="id-formulářového-prvku"> popisek </label> Sémantický atribut, který označuje popisek pro dané formulářové pole. Lze jej výhodně stylovat.

25 fieldset/legend <fieldset> <legend>popis skupiny</legend>... formulářové prvky... </fieldset> Uzavře vstupní prvky do rámu; měl by sdružovat prvky, co k sobě logicky patří. Zdroj: jakpsatweb.cz

26 Co s daty? 1. Zpracovat na serveru 2. Zpracovat pomocí JavaScriptu

27 Zpracování v JS - získat objekt (getelementbyid) - má vlastnost value - možno číst / měnit

28 Obecné rady - U vstupních prvků nastavujte name stejné jako id a nastavujte obojí. - S výjimkou type=radio - Nesnažte se příliš stylovat vstupní pole a tlačítka, nechte to na prohlížeči a operačním systému - Nesnažte se stylovat tlačítko pro výběr souboru, nepodaří se vám to - Čím míň avantgardy, tím bude formulář pochopitelnější!