Formuláře na webu
Martin Svoboda
Souhrn formulářových prvků
- <form> - vymezení oblasti formuláře
- <input> - formulářové políčko, jeho typ určuje type
- <select> - rolovací nabídka (drop-down menu)
- <textarea> - oblast pro zadání delšího textu
- <button> - tlačítko?!
- V HTML 5 se přiravuje pro <input> type: color, search...
těmto změnám se věnovat nebudu, z důvodů neustálého vývoje HTML 5
<form> - vymezení oblasti formuláře 1
… <form> … vstupní pole + html prvky + tlačítko odeslat … </form> …
Atributy:
- action: odkaz na URL se skriptem, kterému je formulář odeslán
- method: způsob, jak budou data odeslána:
- GET: odesílaná data jsou součástí URL za otazníkem a jsou „vidět“
- POST: data jsou odesílaná jako samostatný HTTP objekt
- většina skriptů nedělá rozdíly mezi POST a GET, doporučený způsob odesílání je POST, metoda GET je omezena velikostí dat
<form> - vymezení oblasti formuláře 2
- target: cílový rám (okno), ve kterém se budou výsledky zpracovávat
- enctype: určuje kódování formuláře:
- application/x-www-form-urlencoded: standardní hodnota
- multipart/form-data: zejména pro přenost souborů
- text/plain: vhodné při odesílání emailem - čistý ASCII text
<input> - formulářové políčko 1
Atribut type určuje o jaké vstupní políčko jde:
<input> - formulářové políčko 2
<input> - formulářové políčko 3
<select> - rolovací nabídka (drop-down menu)
- atribut multiple povolí výběr více položek
- při odeslání se zařadí za sebe: ?<name>=hodnota1&<name>=hodnota2
- položky seznamu jsou uváděny elementy <option>
- atribut value: odesílaná hodnota formulářem
- zobrazená položka v seznamu: <option>položka</option>
- tag <select> je párový!
<textarea> - oblast pro zadání delšího textu
- atribut rows určí výšku pole počtem řádků textu
- atribut cols určí šířku pole počtem znaků za sebou
- tag <textarea> je párový
<button> - tlačítko?!
- atribut type: submit, reset a button - stejné jako u input type
- atribut value: hodnota, která by se měla odesílat (zejména IE odesílá obsah tagu)
- pro formátování textu tlačítka lze používat html značky
- tag <button> je párový:
<button>Text <b>tlačítka</b></button>
Atribut name
- nejdůležitější atribut formulářových prvků
- identifikuje prvky a odesílá své jméno s daty
- Odeslání vypadá takto: ?name1=hodnota1&name2=hodnota2
- Existují již zmíněné výjímky :-)
Atribut value
- type: text a password - přednastavená hodnota, kterou lze změnit
- type: checkbox, radio a hidden - nezobrazovaná, neměnitelná, ale odesílaná hodnota
- type: submit a reset - zobrazovaná hodnota na tlačítku
- type: file - nefunguje z bezpečnostních důvodů
Atributy size, checked a selected
atribut size:
- type: text a password - udává počet znaků, kolik se může zobrazit bez posunu (doopravdy se vždy vejde více :-)
- u tagu <select> určuje počet zobrazených řádků seznamu
atributy checked a selected:
- checked: checkbox a radio - přednastavené zatržení políčka
- selected: u <select> určuje předvybrané položky seznamu
Zdokonalení vzhledu a pokročilejší funkce
- fieldset a legend
- label
- optgroup
- accesskey a tabindex
- disabled a readonly
- vzhled pomocí CSS
<optgroup>
- rozšiřuje tag <select> o „skupinkování“
- atributem label zadáváme popisek skupiny
- jde o párový tag (seskupí se <option> v něm uzavřené)
Atributy disabled a readonly
Vzhled pomocí CSS
- kaskádovými styly lze upravovat prakticky cokoli, ALE:
- zejména <select>, checkbox a radio v každém prohlížeči se zobrazují jinak :-) protože si to každý vykresluje sám
- <select> si nechává změnit, a to ne vždy, jen barvu písma a pozadí tagu <option>
- Pěkné porovnání prohlížečů jak zobrazují formulářové prvky na webu 456BereaStreet.com
- Malý přehled použití CSS na formuláře www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
JavaScripty ve formulářích
- umožňují s formulářovými prvky často velká kouzla :-)
- kontrola odesílaných dat
- dynamické vyplňování políček
- změna vzhledu stránky
- a další, co jen nás napadne ...
JavaScripty: kontrola odesílaných dat
- nejčastěji: <form name="fmail" onSubmit="return kontrola();">
- při odeslání formuláře se provede skript kontrola() a podle její návratové hodnoty (true/false) se provede odeslání
- function kontrola() {
var policko = self.document.forms.fmail.email.value;
if ( policko == "" ) { alert("A co email?"); return false; }
else return true; }
- Samozřejmě skript může být daleko sofistikovanější, kombinace několika, atd...
JavaScripty: dynamické vyplňování políček
- příklad:
- <form name="osoba"> <input type="text" name="jmeno" onkeyup="vypln();">
- function vypln() {
var jmeno = document.osoba.jmeno.value;
var prijmeni = document.osoba.prijmeni.value;
document.osoba.cele_jmeno.value = jmeno+" "+prijmeni;
}
- Opět jde o velmi jednoduchý příklad...
JavaScripty: změna vzhledu stránky
- příklad:
- <button onclick="zmen_barvu('red');">Červená</button>
- function zmen_barvu(barva) {
var body = document.getElementsByTagName("body");
body[0].style.backgroundColor = barva;
}
barva pozadí:
- Zase lze kombinovat, vymýšlet, dělat blbosti... :-)
JavaScripty: další
- spouštěcích událostí je spousta:
- k prvkům (X)HTML stránky přistupujeme pomocí DOM Object:
- to už se raději nezmiňuji o AJAXu ...
Skripty zpracovávající formuláře
- na straně serveru se musí odeslaná data „nějak“ zpracovat
- o to se musí postarat „nějaký“ program
- Programy pro zpracování dat z formulářů: