Formulár a jeho prvky
Tvorba formulárov
Prvok <form> slúži na vytváranie webových formulárov určených na odosielanie údajov od klienta serveru. Obyčajne slúži na zadávanie informácií o užívateľovi stránky, výbere z viacerých možností a podobne. Na tento účel je vyhradených niekoľko prvkov, ktoré si teraz popíšeme
Prvok form
Syntax:
<form accept=”…” accept-charset=”…” action=”…” enctype=”…” id=”…” method=”…” style=”…” target=”…” title=”…” >
prvky formuláru
</form>
Prvok input
Syntax:
<input accept=”…” accesskey=”…” alt=”…” checked=”checked” disabled=”disabled” id=”…” maxlenght=”…” name=”…” readonly=”readonly” size=”…” src=”…” style=”…” tabindex=”…” title=”…” type=”…” usemap=”…” value=”…” />
Príklady:
| 1. Príklad tlačidla <input type=”button” value=”tlacidlo”> |
|
| 2. Príklad zaškrtávacieho políčka: <input type=”checkbox”><input type=”checkbox”> |
|
| 3. Príklad políčka pre heslo: <input type=”password”> |
|
| 4. príklad textového políčka: <input type=”text”> |
|
| 5. Príklad zaškrtavácieho políčka s možnosťou jednej voľby: <input type=”radio” name=”radio1″><input type=”radio” name=”radio1″> |
|
| 6. Príklad odosielajúceho tlačidla: <input type=”submit”> |
Prvok label
Syntax:
<label accesskey=”…” id=”…” for=”…” name=”…” style=”…” title=”…”> … text popisky …</label>
Príklad:
| <label for=”radio1″>Radio 1</label><input type=”radio” id=”radio1″ name=”popis”> <label for=”radio2″>Radio 2</label><input type=”radio” id=”radio2″ name=”popis”> |
Prvok fieldset – skupina ovládacich prvkov formulára
Syntax:
<fieldset id=”…” style=”…” title=”…” >
<legend id=”…” style=”…” title=”…” accesskey=”…” >
nadpis skupiny prvkov formulára
</legend>
…
prvky formulára
…
</fieldset>
Prvok textarea – textové pole
Syntax:
<textarea accesskey=”…” cols=”…” disabled=”disabled” id=”…” name=”…” readonly=”readonly” rows=”…” style=”…” tabindex=”…” title=”…” >text</textarea>
Príklad:
| Textové pole o šírke 10 znakov a 5 riadkov. <textarea cols=”10″ rows=”5″></textarea> |
Prvok select – roletka
Syntax:
<select disabled=”disabled” id=”…” multiple=”multiple” name=”…” style=”…” size=”…” tabindex=”…” title=”…”>
…
<option class=”…” disabled=”disabled” id=”…” selected=”selected” style=”…” title=”…” value=”…” >…</option>
<option>…</option>
<option>…</option>
…
</select>
Príklad:
| Roletka obsajuje 5 položiek, je nastavená tak aby 3 bolo vidno. <select size=”3″> <option>položka 1</option> <option>položka 2</option> <option>položka 3</option> <option>položka 4</option> <option>položka 5</option> </select> |
položka 1 položka 2 položka 3 položka 4 položka 5 |
Prvok optgroup
Vytvorenie skupiny položiek v roletkovom menu
Syntax:
<optgroup>class=”…” disabled=”disabled” id=”…” label=”…” style=”…” title=”…” </optgroup>
Prvok button – tlačidlo
Syntax:
<button acceskey=”…” disabled=” disabled” id=”…” name=”…” style=”…” tabindex=”…” title=”…” type=”…” value=”…” >….</button>
Príklad:
| <button type=”button”>tlacidlo</button> |
Parametre prvkov: accept – zoznam mime typov alebo vzorcov prípustných pre pole typu file, ktoré je spracujúci script ochotný prijímať, je na prehliadači aby podľa prípony zkontroloval, či užívateľ zadal príslušný súbor
accept-charset – podporované kódovanie v prvkoch formulára, ktoré je script na serveri schopný spracovať
accesskey – zadanie prístupového znaku k prvku (funguje ako hot-key), po stlačení daného písmena sa
action – url skriptu, ktorý spracuje data z tabuľky
alt – alternatívny text, ktorým sa nahradí tlačidlo s obrázkom v prípade, že prehliadač nezobrazuje grafiku
checked – zaškrtnute zaškrtávacie políčko
class – definícia externého štýlu
cols – počet stĺpcov v znakoch
disabled – zneprístupnenie prvku
enctype – určuje akým spôsobom sú kódované údaje odosielané z formulára, má zmysel len pri odosielaní metódou POST
- application/x-www-form-urlencoded – kódovanie odosielaných údajov ako reťazec url(ako pri posielaní metódou GET
- multipart/form-data – špeciálne kódovanie používané pri uploade súborov na server pomocou prvku input typu file
for – id prvku, pre ktorý je daný prvok label
id – identifikátor prvku
label – popis skupiny prvkov
maxlenght – maximálny počet znakov v textovom políčku
method – spôsob odoslania dát
- get – doplnením na koniec aktívneho Url (implicitne, )
- post – v tele požiadavky
multiple – multiple znamená, že sa dá vybrať viac položiek zo zoznamu
name – meno použité v skripte
readonly – zabráni používateľovi meniť obsah prvkov input(text, textarea)
rows – počet riadkov v oblasti
selected – počiatočná vybraná voľba
size – veľkosť poľa, veľkosť text : size=”šírka” ,veľkosť textarea: size=”šírka, výška”, pri prvku select určuje počet fyzicky vyditelných volieb v okamžiku zobrazenia formuláru
src – url adresa
style – definícia priameho štýlu
tabindex – určuje poradie v akom sa pri stláčaní klávesu TAB stane prvok aktívnym
target – miesto otvorenie odkazu
title – názov formulára
type – môžu byť typy prvku input:
- text – textové políčko s jedným riadkom
- button – tlačidlo
- checkbox – zaškrtávacie políčko
- image – tlačidlo v tvare obrázka
- password – textové pole ale zobrazuje sa *** určené pre zadávanie hesla
- radio – zaškrtávacie políčko, kde zaškrtnuté môže byť len jedno
- reset – vymazanie textových políčok
- submit – odoslanie formulára serveru
- hidden – skryté pole, atributom value môžeme zadať pevnú hodnotu nezadávanú užívateľom
- file – pole pre zadanie mena súboru, umožňuje k výstupu formuláru pripojiť jeden alebo viacej lokálnych súborov, atribútom value môžeme špecifikovať implicitný názov súboru, atribútom accept môžeme vymedziť prípustné typy súborov, tento typ poľa vyžaduje v deklarácii formulára atribúty enctype=”multipar/form-data” method = post
type – typ tlačidla:
- button – jednoduche tlačidlo (určene k ovladaniu skriptu)
- submit – tlačidlo pre odosielani dat serveru
- reset – tlačidlo pre obnovenie implicitných hodnôt
usemap – url odkaz na definíciu citlivých ploch obrázku, perspektíny atribút pre typ image umožní použiť prvok input ako mapu s plochami citlivými na kliknutie
value – pre button názov butonu, pre checkbox a radio označená položka