http://www.vsl.sk/vyuka/ajax10/

HTML formuláre Odporúčané tutoriály: http://www.jakpsatweb.cz/html/formulare.html http://www.w3schools.com/html/html_forms.asp http://www.w3.org/TR/html401/interact/forms.html

Čo sú HTML formuláre HTML formuláre umožňujú interaktívnu komunikáciu medzi webovým klientom a servrom. Typickým príkladom bývajú webové stránky, kde užívateľ zadáva rôzne údaje, a potom ich prostredníctvom potvrdzovacieho tlačítka zašle na server.

HTML formulár HTML formuláre (ďalej len formuláre) slúžia na posielanie údajov z klienta na server. Formulár je reprezentovaný tagom a určuje ovládacie polia daného formulára, ktoré sa odošlú spoločne na server pri potvrdení formuláru. Ovládacie polia formulára sa určujú pomocou elementov typu input, textarea a select/option. Každý ovládací prvok formulára potrebuje mať, pre zachovanie správnej funkčnosti, definované meno (atribút name). Toto meno sa použije pri spracovaní formulára na servri a býva k nemu priradená aj príslušná hodnota z daného ovládacieho prvku. Pre prehľadnosť je vhodné preto pre každý ovládací prvok formulára použiť jedinečné meno, s výnimkou niektorých prípadov. Základné atribúty formulára Atribút

Význam

Hodnoty

action

adresa skriptu (obvykle PHP, CGI, ASP, JSP) alebo napríklad aj servletu, ktorý spracuje dáta. Pokiaľ nie je uvedená, tak sa dáta odošlú tej istej stránke.

adresa URL

target

cieľové okno alebo rám pre zaslanie odpovede zo servra

_self | _blank | _top | _parent | názov okna alebo rámu

method

spôsob posielania dát

get | post

enctype spôsob kódovania dát pri zasielaní pomocou HTTP metódy post

application/x-www-form-urlencoded | multipart/form-data | ľubovoľná mime deklarácia

http://www.vsl.sk/vyuka/ajax10/ Metóda GET a POST Pri get metóde sa odovzdávanie dát z klienta na server uskutočňuje pridaním dvojíc name=value do URL adresy za otáznik "?" a oddelením pomocou znaku "&", prípadne len pridaním konkrétnych name, kde name je názov formulárového ovládacieho prvku a value je jeho hodnota. Teda napríklad pri zasielaní tohto fiktívneho formulára zo stránky www.vsl.sk:

sa môže vyskladať takáto URL adresa: http://www.vsl.sk/login.jsp?login=janko&heslo=hrasko Posielanie dôverných údajov (napr. hesiel) pomocou get metódy, tak ako to bolo uvedené v predchádzajúcom prípade, je nevhodné z viacerých dôvodov. Vyskladané URL adresy sa uchovávajú v histórií prehliadača a ani použitie šifrovania (napr. SSL) ich nazakóduje proti prípadnému odchyteniu. Adresy URL sa taktiež zvyknú archivovať v rôznych logoch (napr. log prístupov na aplikačnom servri). Riešením pre takého nechcené zapamätávanie je použitie post metódy, ktorá neodovzdáva dáta z klienta na server pomocou prepisovania URL adresy, ale radšej ich odovzdá cez telo requestu.

Rodina input elementov Formulár môže obsahovať viacero dôležitých input elementov, ktorých vzhľad a správanie je určené pomocou atribútu type. Do skupiny input elementov zaraďujeme hlavne rôzne políčka pre zadanie textu, tlačítka a zaškrtávacie polia. Táto rodina input elementov sa vyznačuje tým, že sa jedná o tzv. nepárové elementy. Nepárové elementy potrebujú pre správne zobrazenie ich definovanie bez koncového tagu a teda nie formou dvojičky ale správne len . Spoločné atribúty input elementov Atribút

Význam

Hodnoty

type

druh input elementu

text | password | button | submit | reset | radio | checkbox | image | file | hidden

name

meno input elementu,

ľubovoľné meno

value

pôvodná hodnota poľa, prípadne text ktorý sa zobrazuje na tlačítku

ľubovoľná hodnota

http://www.vsl.sk/vyuka/ajax10/ Textové polia Políčko pre zadávanie jednoriadkového textu sa definuje pomocou input elementu typu text. Šírku textového poľa vieme určiť pomocou atribútu size. Lepšie je ju však určiť pomocou css vlastnosti width, ktorá má vyššiu prioritu. Maximálny počet znakov určujeme pomocou atribútu maxlength. Podobne funguje aj input element typu password, avšak s tým rozdielom, že vpisované znaky sú nahradzované čiernymi krúžkami, a teda sa tým zabraňuje odpozorovať citlivé údaje (väčšinou vpisované heslo) z obrazovky monitora. Tlačítka Obyčajné tlačítko, ktorého funkčnosť si treba oprogramovať pomocou JavaScriptu (vačšinou prekrytím onClick handlera) sa definuje pomocou input elementu typu button. Takého tlačítko štandardne nerobí nič, a preto bez dodania funkčnosti má značne obmedzené použitie. Príklad oživenia tlačítka pomocou JavaScriptu:

Ďalšími z radu tlačítok je input element typu reset a input element typu submit. ‚Reset‘ tlačítko nastaví všetkým elementom formulára pôvodnú hodnotu, ktorú mali priradenú pri prvom zobrazení formulára. Zadanie URL adresy do atribútu action v elemente form je v prípade tlačítok typu "button" a aj tlačítok typu "reset" nepovinné. Tieto tlačítka nepotvrdzujú (nezasielajú) formulár, a teda sa daná URL adresa nepoužije. Potvrdzovanie formulára (tzv. submit) sa zvyčajne robí pomocou potvrdzujúceho tlačítka, ktoré odošle vyplnené údaje z formulára na server. Dáta sa posielajú na určenú adresu URL, ktorú sme si nadefinovali vo formulári pomocou atribútu action.

http://www.vsl.sk/vyuka/ajax10/ Okrem tohto ‘submit’ tlačítka existuje aj iné formulár-potvrdzujúce tlačítko, a to ‘submit’ tlačítko s obrázkom. Pomocou takého tlačítka sa štandardne odošle formulár, podobne ako je tomu v prípade klasického ‘submit’ tlačítka, avšak doplní sa ešte informácia ohľadom x,y súradníc miesta kliknutia na obrázok v tomto tlačítku vychádzajúce z ľavého horného rohu obrázku. Na server sa súradnice zašlú vo forme dvojice name.x=clickX a name.y=clickY, kde name je hodnota z atribútu name aktuálne kliknutého input elementu typu image a clickX, clickY sú súradnice z miesta kliknutia na obrázok. Obrázok sa definuje podobne ako v prípade img elementu, a teda pomocou atribútu src. Zaškrtávatka Zaškrtávacie pole (skrátane checkbox) sa definuje pomocou input elementu typu checkbox. Tento ovládací prvok užívateľovi umožňuje zvoliť si jednu alebo viac volieb/možností. Vo formulári môže mať viacero checkbox-ov rovnaký názov a tým vieme docieliť priradenie viacerých hodnôt rovnakej vlastnosti.

Java
HTML
ASP


Pomocou atribútu checked určíme, ktorý checkbox bude vyznačený (‘zafajknutý’). Pri implementovaní servrovskej funkcionality je potrebné si zapamätať, že po potvrdení formulára sa posielajú hodnoty len zo zaškrtnutých checkbox-ov. Rádiové tlačidlá Rádiové tlačidlá, bežne označované ako radiobutton-y) sa definujú pomocou input elementu typu radio a majú podobnú funkčnosť ako checkbox-y. Väčšinou slúžia pre označovanie jednej z viacerých možností. Rozdielom oproti checkbox-om je to, že ak má viacero radiobutton-ov rovnaký názov, tak vtedy sa tieto komponenty stávajú previazané a len jeden radiobutton môže byť zvolený. Pri takejto previazanosti sa po vyznačení posledného radiobutton-u odznačia ostatné z rovnakej skupiny – je teda vylúčené mať zvolené viaceré voľby z takejto množiny komponentov. Muž
Žena


Upload súboru Pre uploadovanie súboru z klienta na server sa dá použiť input element typu file. Pri použití tohto elementu sa zobrazí needitovateľné políčko s cestou vybraného súboru a zároveň aj tlačidlo pre výber súboru. Nastavením formulárového atribútu enctype na hodnotu "multipart/form-data" sa po potvrdení formulára pošle obsah vybraných súborov v samostatných sekciách tzv. multipart dokumentu.

http://www.vsl.sk/vyuka/ajax10/ Príklad obsahu tela requestu pri zasielaní dát formou "multipart/form-data": -----------------------------7dabb376e50aee Content-Disposition: form-data; name="file"; filename="dokument.doc" Content-Type: text/plain < binary data here, 40423 bytes total > -----------------------------7dabb376e50aee Content-Disposition: form-data; name="znalost" java -----------------------------7dabb376e50aee Content-Disposition: form-data; name="znalost" html -----------------------------7dabb376e50aee--

Skryté polia Niekedy môže byť výhodné vymieňať si medzi klientom a servrom informácie pomocou skrytých polí, napríklad za účelom autorizácie požiadaviek cez preposielanie si informácií o danej session. Skryté polia sa definujú pomocou input elementu typu hidden a ako už ich názov napovedá, tak sa na webovej stránke priamo nezobrazujú. HTTP protokol je vo svojej podstate bezstavový, ale pomocou skrytých polí sa dá táto jeho vlastnosť čiastočne kompenzovať.

Ďalšie ovládacie prvky formulára Okrem input elementov existujú ešte ďalšie ovládacie prvky formulára: textarea a select. Viacriadkové textové políčko TextArea Keď je nám pre zadávanie textu jeden riadok málo, alebo potrebujeme zalamovať riadky enterom, tak nám určite nebude vyhovovať input element typu text. Vtedy sa naskytuje priestor pre použitie elementu určeného pre viacriadkové zadávanie textu – textarea elementu. V ňom pomocou nastavenia atribútu rows určíme počet zobrazovaných riadkov textu a pomocou nastavenia atribútu cols určíme počet zobrazovaných stĺpcov textu. Dobré je mať na zreteli, že textarea je tzv. párový element, na rozdiel od input elementov, čo znamená že potrebuje začiatočný tag a aj ukončovací tag . Výber / Menu / ComboBox ... Výber z viacerých možností (menu) poskytuje užívateľovi voľby z ktorých si môže vybrať. Takéto menu vieme v html vytvoriť pomocou elementu select. Element je párový a vyskytuje sa len v prítomnosti kombinácie vnorených elementov option a optgroup. Pre výber viacerých položiek z menu slúži atribút multiple a pre určenie počtu zobrazených riadkov v menu slúži hodnota atribútu size.

http://www.vsl.sk/vyuka/ajax10/ Príklad použitia select elementu s možnosťou výberu viacerých položiek a so zvýraznením skupín: HTML CSS XML Java Python

Nastavením atribútu size na hodnotu 1 môžme dať elementu tvar combobox-u.

Validácia formulára na klientovi pomocou JavaScriptu Formulár s ovládacími prvkami už vieme ako vytvoriť, ešte by to chcelo urobiť jednoduchú kontrolu jeho ovládacích prvkov. Kontrola sa dá urobiť na klientovi a aj na servri. Kontrola formulára na klientovi odľahčuje častokrát vyťažený server a zároveň je aj zvyčajne rýchlejšia, keďže netreba strácať čas tým, že sa najprv pošlú údaje na server, tam sa skontrolujú a následne sa na klienta vráti chybové upozornenie ohľadom chybného vyplnenia (prípadne úplného nevyplnenia) formulára. Po úspešnej kontrole formulára na klientovi sa posielajú dáta na server, kde sa môžu podľa potreby znovu skontrolovať, prípadne vykonať ďalšie rozširujúce kontroly. Príklad jednoduchej validácie formulára pomocou JavaScriptu: function kontrola(form) { if (form.login.value.length == 0) { alert("Nevyplnili ste prihlasovacie meno"); form.login.focus(); return false; } return true; } Prihlasovacie meno: Prihlasovacie heslo:

Po stlačení potvrdzujúceho "submit" tlačítka sa vykoná JavaScript definovaný v onClick. V prípade úspešnej validácie, pomocou definovanej JavaScript metódy "kontrola", je návratová hodnota true, čo spôsobí že dôjde k odoslaniu formulára na server. Návratová hodnota false, spôsobí, že k odoslaniu formulára na server nedôjde.

http://www.vsl.sk/vyuka/ajax10/

Spracovanie HTML formulára v java servlete Predchádzajúci príklad (venujúci sa validácii formulára) zasiela údaje od používateľa na server, kde sa spracujú pomocou java servletu. Spracovanie dát z formulárov v java servletoch (ďalej len servlet) je jednoduché. Rovnako ako pri zasielaní údajov pomocou get metódy, tak aj pri zasielaní údajov pomocou post metódy, sa v java servletoch tieto údaje naplnia do objektu request, ktorý sa spracuje buď v metóde doGet alebo v metóde doPost (v závislosti od zvolenej get/post metódy). Po stlačení potvrdzujúceho "submit" tlačítka dôjde v prípade úspešnej kontroly formulára ku vyzbieraniu hodnôt z ovládacích prvkov, ktoré sa následne pošlú na server použitím adresy URL, ktorá je uvedená v atribúte action. Spracovanie formulára sa vykoná v metóde doPost definovaného servletu – mapovanie URL na konkrétny servlet sa rieši formou konfigurácie na aplikačnom servri. Príklad spracovania formulára v servlete: protected void doPost(HttpServletRequest request, HttpServletResponse response){ ... String login = request.getParameter("login"); String heslo = request.getParameter("heslo"); PrintWriter out = response.getWriter(); out.println( "\n" + " \n" ); ... }