Formuláře a další prvky

1. Technologie pro publikování na webu 1 Formuláře a další prvky Ing. Jiří Štěpánek

2. Formuláře • Umožňují interaktivitustránky s uživatelem • Slouží k zadání a odeslání dat a informací uživatelem • Poskytují řadu různých ovládacích prvků • Na stránce jich lze použít větší množství • Není možné je navzájem vnořovat ani prolínat • Obsah formuláře je možné kontrolovat pomocí skriptu ještě před odesláním(zpravidla validace pomocí JavaScriptu, která je) • Odeslaný formulář se zpracuje skriptem na straně serveru

3. Formuláře Kostra formuláře<form></form> Atributy: action URL adresa stránky pro zpracování methodmetoda odeslání dat - GET / POST (implicitně GET) accept formát souborů, který bude při zpracování akceptován seznam více formátů oddělený čárkou "image/gif,image/jpg" enctype kódování (formát) odchozích dat application/x-www-form-urlencoded, multipart/form-data onsubmitudálost v okamžiku odeslání dat Pokud ovládací prvky používáme pouze pro spolupráci se skripty na straně klienta, můžeme tag<form></form> vynechat!

4. Metody odesílání formuláře get • (krátké formuláře, bez diakritiky v názvech a hodnotách) • hodnoty odesílá jako součást URL adresy (vše se odehrává v jednom přenosovém kroku) • vhodná pro krátké formuláře, pokud v názvech a hodnotách není diakritika a nejedná se o citlivé údaje - hodnoty jsou přímo viditelné v URL adrese – NEBEZPEČNÉ post • (rozsáhlé formuláře, odesílání souborů, hesel, ...) • hodnoty odesílá na server v samostatném přenosu • vhodné pro rozsáhlé formuláře nebo soubory • transakci, v níž se přenášejí parametry lze zabezpečit • volá se vždy stejné URL, nezávisle na hodnotách formuláře • při reloadu se prohlížeč ptá uživatele, zda souhlasí se znovuodesláním dat

5. Ovládací prvky formuláře • Různé prvky jsou vhodné pro různé činnosti a typy informací • Každý ovládací prvek má jedinečné jméno v rámci formuláře • Atribut id je na jménu nezávislý !!! • Ovládací prvek má vždy nějakou aktuální hodnotu • Prvek může mít zadanou i nějakou výchozí hodnotu • Práce s ovládacími prvky často spočívá ve využití skriptů na straně klienta (validace, spolupráce mezi prvky) nebo na serveru (nastavování hodnot a plnění nabídek např. hodnotami z DB)

6. Input – vstupní prvek Vstupní prvek – input (vždy nepárový element) <input type="text" name="jmeno" value="Vasejmeno" size="10" maxlength="15" /> type typ ovládacího prvku (text, password, checkbox, radio, submit, reset, button, image, hidden, file) name název prvku (pouze pro účely odesílání formuláře) id identifikátor prvku (identifikace ve stylech, skriptech, …) value výchozí hodnota ovládacího prvku disabled „znepřístupnění“ prvku - nelze měnit jeho hodnotu

7. Select – rozbalovací nabídka Ohraničuje vysunovací nabídku. Obsahem nabídky jsou jednotlivé položky, každá reprezentovaná jedním elementem option Odesílá se vždy hodnota (value) vybrané položky <selectname="vyber_polozek" size="3" multiple> <optionvalue="1" selected>Volba 1</option> <optionvalue="2">Volba 2</option> <optionvalue="3">Volba 3</option> <optionvalue="4">Volba 4</option> </select> Pozor na syntaxi v XHTML (je nutno psát atributy včetně "hodnot") multiple="multiple" selected="selected"

8. Select, label size počet viditelných položek nabídky (bez vysunutí) multipleumožňuje označení (výběr) více položek současně optgroupvytvoření skupin uvnitř vysunovací nabídky. Skupiny nelze navzájem vnořovat. Popisek - label - Slouží pro vytváření popisku u formulářového prvku <label>Jméno: <input type="text" name="jmeno"></label> <label for="prvek">Jméno:</label> <input type="text" name="jmeno" id="prvek id="id_prvku"> Při tvorbě popisku s pomocí label se bude popisek chovat jako součást ovládacího prvku (např. pro zaškrtnutí checkboxu stačí kliknout na jeho popisek)

9. Skupina prvků - fieldset Skupina ovládacích prvků (oblast) – <fieldset></fieldset> - Vizuální seskupení ovládacích prvků s podobným účelem. - Napomáhá zpřehlednění a lepšímu vzhledu formuláře. Pojmenování skupiny prvků - <legend></legend> - Vytváří nadpis skupiny, vytvořené pomocí fieldset <form action="akce" method="post"> <fieldset> <legend>Přihlášení do systému</legend> <input type="text" name= "login" size="10"/> <input type="password" name= "heslo" size="10"/> <input type="submit" value="Odeslatúdaje" /> </fieldset> </form>

10. hr a &nbsp Vodorovná svislá čára <hr /> - podle nastavení atributů (v XHTML pomocí CSS stylu) vytvoří vodorovnou nebo svislou čáru Tvrdá mezera &nbsp; • Non-Breaking-SPace • do textu vloží vždy interpretovanou mezeru tvrdě spojující okolní text při lámání na konci řádku (typické použití po předložkách) • v PSPadu i Homesitu stejně jako ve Wordu: Ctrl+Shift+mezera • v rámci tabulky může reprezentovat „obsah“ prázdné buňky

11. Br (break) - odřádkování • <br /> • Interpretuje se v prohlížeči jako odřádkování • Nezneužívat k formátování a vytváření místa • Smysl má při formátování uvnitř odstavce atd..

12. Rámy (frames) • Frameset – definice rámů, jednotlivé rámy obsahovaly konkrétní stránky (obsah, hlavička, navigace) • V dobách kdy nebylo tolik rozšířené skriptování na straně serveru • Zánik hlavně kvůli nemožnosti odkázat na konkrétní stránku tak, aby se zobrazila i s rámy. • Dnes tento koncept považujeme za zastaralý a zásadně NEPOUŽÍVÁME!!