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 <form> 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:
<form action="login.jsp"
Prihlasovacie meno:
Prihlasovacie heslo:
<input type="submit"
</form>
method="get">
<input type="text" name="login">
<input type="password" name="heslo">
value="Prihlás ma!" />
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
<input></input> ale správne len <input />.
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
<input type="text" />
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.
<input type="password" />
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
<input type="button" />
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:
<input type="button" value="Pozdrav" onClick="alert('Hello world!');" />
Ďalšími z radu tlačítok je input element typu reset a input element typu submit.
<input type="reset" />
‚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.
<input type="submit" />
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.
<input type="image" />
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
<input type="checkbox" />
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.
<input type="checkbox" name="znalost" value="java" checked />Java<br/>
<input type="checkbox" name="znalost" value="html" checked />HTML<br/>
<input type="checkbox" name="znalost" value="asp"
/>ASP <br/>
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á
<input type="radio" />
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.
<input type="radio" name="pohlavie" value="M" checked />Muž <br/>
<input type="radio" name="pohlavie" value="Z"
/>Žena<br/>
Upload súboru
<input type="file" />
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
<input type="hidden" />
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.
<textarea rows="2" cols="20" >
</textarea>
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 <textarea> a aj ukončovací tag </textarea>.
Výber / Menu / ComboBox
<select>...</select>
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:
<select name="language" multiple size="7">
<optgroup label="markup">
<option value="html">HTML</option>
<option value="css" >CSS </option>
<option value="xml" >XML </option>
</optgroup>
<optgroup label="non-markup">
<option value="java">Java </option>
<option value="java">Python</option>
</optgroup>
</select>
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:
<html>
<body>
<script type="text/javascript">
function kontrola(form) {
if (form.login.value.length == 0) {
alert("Nevyplnili ste prihlasovacie meno");
form.login.focus();
return false;
}
return true;
}
</script>
<form action="/RegisterServlet" method="post">
Prihlasovacie meno: <input type="text" name="login" />
Prihlasovacie heslo: <input type="password" name="heslo" />
<input type="submit" onClick="return kontrola(this.form);"/>
</form>
</body>
</html>
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(
"<HTML>\n" +
" <BODY>\n"
);
...
}
Download

HTML formuláre