Prehľad o tvorbe formulárov

Základy formulárov Vytváranie formulárov Textové polia a ich atribúty Element <input /> Textové políčka (text boxes) Heslo (password) Zaškrtávacie políčko (checkbox) Prepínacie tlačidla (radio buttons)

Skryté políčka (hidden fields) Tlačidlo vymazania Tlačidlo odoslať Obrázkové tlačidlo odoslania Ostatné tlačidlá Vytváranie ponuky Zhodnotenie Príklad formulára

Tvorba formulárov

Myšlienka HTML formulárov a jeho komponentov je jednoduchá a to je získavanie informácií od návštevníckou webových stránok. Užívatelia môžu byť opytovaný tromi spôsobmi:

Zadávanie odpovedí do polí ako meno či email alebo zložitejších formulárov ako komentáre a pripomienky,
výber z viacerých odpovedí zo zoznamu možností pomocou menu voľby, zaškrtávacích polí (check box),
alebo výber jednej odpovedi z niekoľkých možností pomocou prepínacích tlačidiel (radio button).

Formulár sa vytvára v párových elementoch <form>, ktorý sa zapisuje:

<form>
.... prvky formulára .....
<form>

Väčšinou má element form dva atribúty method a action.

Atribút method slúži k zadaniu ako bude formulár odosielaný na server. Jeho hodnoty sú post a get.
Metoda get zjednodušene znamená, že dáta budú pridané k URL(odkaz na pojmy) adrese spracovaného skriptu. Často je však dĺžka URL obmedzená na 100 znakov. Tento spôsob sa hodí iba pre kratšie dáta: vyhľadávané slovo alebo zaškrtávacie políčko. Ale táto metóda sa moc nepoužíva.

Napr.:

<form method="get" action="mailto:ycon@ycon.sk" >

Ak potrebujete mať dlhší formulár s viacerými údajmi (viac ako 100 znakov), je vhodnejšie požiť metódu post. Tá odosiela formulárové údaje zvlášť a nieje obmedzená prenášanou velikosťou.

Napr.:

<form method="post" action="mailto:ycon@ycon.sk" >

Druhý atribút action obsahuje url adresu skriptu, ktorý vyhodnocuje zaslané dáta z formulára. Do action zadávame často krát aj mailovú adresu.

Okrem týchto dvoch atribútov element <form> akceptuje aj niekoľko ďalších, ktoré moc nepoužívame.

Prvým z nich je atribút enctype (encoding type, druh kódovania), jeho hodnotou je MIME, značka popisujúca typ odosielaného obsahu. Toto sa využíva hlavne vtedy ak nahrávate súbory na server pomocou elementu <input> alebo odosielaním dát na mail. Pre tento účel uveďte enctype="multipart/form-data".

Atribút name a id slúžia k označeniu formulára pre skripty alebo pre kaskádové štýly. Náhradou v XHTML staršieho atribútu name je id, kvôli spätnej kompatibilite sú však podporované obidva. Pre staršie prehliadač udávajte oba dva atribúty: name="formular1" id="formular1".

Vytváranie formulárov

V tejto časti sa zoznámime z samostatnými ovládacími prvkami formulára medzi ktoré patria bežné typy ako textové polia (text area), výberové menu, zaškrtávacie políčko (chech box), prepínacie tlačidla (radio buttons), ale takisto aj tlačidla pre odoslanie a vymazanie formulára (input).

!Pozor žiaden z ovlácacích prvkov nefunguje mimo elementu <form>!

Textové polia a ich atribúty (text area)

Textové pole je jeden z najčastejšie používaných ovládacích prvkov formulára do ktorého užívateľ môže napísať viacriadkový text, napr. pripomienky, oznámenia o chybách a pod. K tomu slúži element <textarea>. Velikosť textového pola čiže riadkov a stĺpcov, sa zadáva prostredníctvom atribútu rows (riadok), cols (stĺpec).

Napr.:

<textarea name="meno" rows="riadok" cols="stlpec" >
Upresňujúci text, čo ma užívateľ do textového pola uviesť.
</textarea>

Formulár do ktorého napíšete dotaz a odošlete na mail:

<form method="post" action="" action="mailto:ycon@ycon.sk" >
<textarea name="Komentar" rows="4" cols="40" >
Sem, prosím, zadávajte Váš komentár k webovej stránke. Pripojte prosím aj mailovú adresu.
</textarea>
</form>

Príklad v skutočnosti:

Ako vidíte text sa správa ako predom naformátovaný text elementu <pre>, čo znamená že sa zanechávajú v texte medzery, ktoré sú zapísané v zdrojovom kóde.

Hodnota v atribúte name je identifikátor textového pola a preto musí byť pre celý formulár jedinečná. Pri odoslaní dát skriptu, ktorý ho má spracovať bude zadaná hodnota dostupná pod týmto menom.

Ešte je tu jeden málo ale predsa využívaný atribút readonly, ktorý zakáže užívateľovi editovať obsah textového poľa a preto bude odoslaný iba Upresňujúci text. Tento atribút nemá hodnotu, v HTML sa preto zadáva ako readonly="readonly".

Element <input />

Element <textarea> je skôr pre zadávanie neurčeného ľubovoľného textu. Často krát však budete musieť návštevníkov obmedziť napr. čo môžu do formulára napísať, nastaviť typ a množstvo akceptovaných dát. Na to nám slúži element <input />, ktorý má veľa podôb určených hodnotou atribútu type, ktorý dokáže vystupovať ako tieto prvky:

Textové políčka (text boxes) - (type="text") Vhodné pre zadanie kratšieho textu ako meno adresa.
Hesla (passwords) – (type="password") Určené hlavne pre zadávania hesiel, pretože znaky sa zamieňajú na hviezdičky.
Zaškrtávacie políčko (check boxes) – (type="checkbox") Tento ovládací prvok slúži k označeniu alebo zrušeniu výberu ľubovoľnej položky zo skupiny. Je možné aj viacej zaškrtnutých polí.
Prepínacie tlačidla (radio button) – (type="radio") Slúži k výberu iba jednej položky zo skupiny.
Skryté políčka (hidden fields) – (type="hidden") Špeciálny druh políčka, ktoré je neviditeľné a slúži iba pre tvorcu stránky k poslaniu hodnoty pre skript.
Ovládacie tlačidla (control buttons) – (type="reset", type="submit", alebo type="button") Vytvára tlačidla s odlišným významom určeným pre vymazanie obsahu prvku z formulára(reset), odosielanie dát (submit), alebo iný nastaviteľný účel (button).

Príklad:

<input type="prvok" name="meno" size="velikost" maxlength="max_dlzka" >

Jediné povinné prvky sú atribúty type a name. Niektoré varianty <input /> vyžadujú aj atribút value, ktorá nastavuje hodnotu, ktorú bude mať užívateľ na výber. <input /> má ešte radu ďalších atribútov špecifikovaných podľa druhu prvku ale tie si vysvetlíme jednotlivo.

Textové políčka (text boxes)

Jednou s povolených hodnôt atribútu type je text, ktorý nám vytvorí jednoriadkové textové pole s možnosťou obmedzenia na maximálnu dĺžku textu (maxlenght). Dĺžka pola (size) ako takého a maximálna dĺžka textu v poli sa udávajú samostatne v dvoch rôznych atribútoch. Je teda možné vytvoriť políčko, ktoré bude dlhé (veľkosťou), ale obmedzené na maximálny počet znakov. Je tu ešte jeden atribút a ten je value, ktorý v tomto prípade nastavuje predvolenú hodnotu, ktorú samozrejme môže alebo nemusí užívateľ zmeniť. Atribút value nieje až taký dôležitý ako ostatné atribúty.

Napr.

Mesto: <input type="text" name="mesto" size="40" value="Bratislava" />

Keď tento element <input /> vložíte do kontajneru <form>, získate textové políčko ako vidíte pod textom.

Heslo (password)

Typ type="password" je skoro rovnaký ako type="text", až na to, že u password sa zapisované znaky do políčka nezobrazujú vôbec alebo namiesto nich sa zobrazujú hviezdičky či bodky. Tým pádom predurčuje tento typ hlavne pre zadávanie hesiel alebo tajných informácii. Vďaka tomu, že nieje vidieť, čo je v políčku zadané nemôže heslo nikto cudzí odkukať(cez rameno užívateľa).

Napr.

Meno: <input type="text" name="meno" size="25" />
Heslo: <input type="password" name="heslo" size="25" />

Zaškrtávacie políčko (checkbox)

Typ type="checkbox" elementu <input /> vytvára do formulára zaškrtávacie políčka, v ktorých si môžete vybrať áno/nie. Tento ovládací prvok sa hodí pre otázky na ktoré ide odpovedať iba jednou z dvoch hodnôt. Už pri vytváraní políčka môžete rozhodnúť, či bude políčko už predom zaškrtnuté pomocou atribútu checked="checked" (niečo podobné ako predvolená hodnota).

Napr:

Odkiaľ ste sa o tejto stránke dozvedeli? <br />
<input type="checbox" name="google" checked="checked" /> Z googla<br />
<input type="checbox" name="kamarat" /> Od kamaráta<br />
<input type="checbox" name="iné" /> Odinakiaľ<br />
Chcete dostať informácie ako doblada anketa? <br />
<input type="checbox" name="odpoveď" />

Všimnite si že v tejto ukážke je zaškrtnuté prvé políčko. Ďalej si všimnite že každé políčko je samostatne pomenované čo znamená, že môžu byť súčastne a nezávisle od seba vybrané položky.

Prepínacie tlačidla (radio buttons)

Podobne ako checkbox, slúži aj radio k výberu hodnoty z preddefinovaných možností. Rozdiel je však, že radio povoľuje vybrať iba jedinú variantu zo skupiny. Naproti tomu v políčku checkbox môže byť vybraných viacej možností. Prepínacie tlačidlá vyžadujú zadanú hodnotu v atribúte value, ktorá musí byť v skupine unikátna. Pri odoslaní bude k premennej name priradená hodnota value vybranej položky.
Jeden zásadný rozdiel je v tom, že prepínacie tlačidla patria do rovnakej skupiny a preto musia mať rovnakú hodnotu v atribúte name. Je to kvôli tomu, aby prehliadač rozpoznal, ktoré tlačidla do akej skupiny patria a tým pádom znemožnil výberu viacerých možností v jednej skupine.

Napr.

Odkiaľ ste sa o tejto stránke dozvedeli? <br />
<input type="radio" name="oblubenost" value="google" checked="checked" /> Z googla<br />
<input type="radio" name="oblubenost" value="kamos" /> Od kamaráta <br />
<input type="radio" name="oblubenost" value="ine" /> Odinakiaľ <br />

U jedného z tlačidiel je nutné zadať hodnotu checked, pretože sa tým predíde možným chybám pri spracovaní formulára. A menej roboty pre užívateľov ak by súhlasili z odpoveďou.

Skryté políčka (hidden fields)

Tento druh <input type="hidden"/> nieje tak celkovo ovládací prvok. Tento špeciálny druh políčka, ktorý je neviditeľný, slúži iba pre tvorcu stránky k poslaniu hodnoty pre skript. Autor potom vie kde začína napr. nový formulár. Skryté tlačidlo samozrejme akceptuje atribúty name a value.

Napr.

<input type="hidden" name="cislo_formulára" value="form2" />

Tlačidlo vymazania

Okrem textových, zaškrtávacích a skrytých poličiek môžete element <input /> použiť k vytvorenie tlačidla (buttons). Pokiaľ nastavíte type="reset", do formulára sa automaticky pridá tlačidlo, ktoré po stlačení vymaže obsah celého formulára.

Napr.

<input type="reset" value="Vymazat" >

Hodnota v atribúte value nám v tomto prípade zobrazí text v tlačidle.

Tlačidlo odoslať

Hodnota submit vytvorí tlačidlo, ktoré po stlačení odošle dáta z formulára. Je to signál, že užívateľ formulár vyplnil a chce ho spracovať. Jediným atribútom tlačidla je value, ktorým môžete zmeniť text v ňom.

Napr.

<input type="submit" value="Odoslať" />

Ak chcete zväčšiť rozmery tlačidla, používa sa k tomu malý trik. Pridávaním vhodným počtom medzier pred a za text. Lebo tlačidlo funguje ako element <pre>

Napr.

<input type="submit" value="      Odoslať     " />

Obrázkové tlačidlo odoslania

Odosielacie tlačidlo môže mať takisto podobu obrázku, ktorí si sami nakreslíte. Stačí nastaviť typ="image", URL obrázku a náhradný text.

Napr.

<input type="image" src="images/odoslat.jpg" alt="Odoslať" />

Tento spôsob je veľmi jednoduchý ale je tu aj iný spôsob ktorý je krajší ale elegantnejší.

Ostatné tlačidlá

HTML ponúka ešte jeden spôsob vytvárania tlačidiel. Na to nám slúži element <button>. Tento element prijíma v atribúte type hodnoty reset, submit a image. Rozdiel od predchádzajúceho postupu <input />je ten, že <button> je kontajnerový element a medzi jeho tagy ide napísať napr. text.

Napr.

<button name="odoslat" type="submit" >
<span style="font-family: Courier; font-variant: small-caps; font-size: 12pt;" >Odoslať</span>
</button>

Vytváranie ponuky

Ďalším ovládacím prvkom je menu ponuky vytvárané elementom <select>. Tento element vie vytvoriť dve základné typy ponuky menu: vyskakovacie (pop-up) menu a rolovacie (scrolling) menu. Obidve slúžia k výberu z predom nadefinovaných možností, tým pádom užívateľ nemôže zadávať vlastnú odpoveď. Element <select> vyžaduje atribút namepre určenie mena prvku a size nastavujúci koľko možností sa v prvku zobrazia.

Jednotlivé možnosti ponuky sa do teľa <select> vkladá elementom <option> s povinným atribútom value. Pri odoslaní sa potom premenné v name elementu <select> priradí hodnota value vybranej voľby <option>. Tým pádom nemusíme do elementu <option> zadávať name. K nastaveniu predvolenej hodnoty nám pomôže atribút selected="selected".

Napr.

Ako často navštevujete túto stránku ? <br />
<select name="navstevnost" >
<option value="1" selected="selected" >Prvý krát som tu </option> <br />
<option value="denne" > Denne </option> <br />
<option value="mesacne" > Mesačne </option> <br />
</select>

Kliknutím na rozbalovaciu šípku spôsobíme, že vyskočí menu ponuky. Užívateľ si potom vyberie jednu z možností. Atribút size v <select> ovplyvňuje veľkosť ponuky a teda aj koľko volieb sa bude naraz zobrazovať.

Napr.

Ako často navštevujete túto stránku ? <br />
<select size="3" name="navstevnost" >
<option value="1" selected="selected" >Prvý krát som tu</option> <br />
<option value="denne" > Denne </option> <br />
<option value="mesacne" > Mesačne</option> <br />
</select>

Tu vidíme že menu nevyskakuje ale sa rovno zobrazí stanovený počet volieb. Ak je ich viac, ako sa do plochy zobrazenia vojde, dá sa ponuka skrolovať.

Keď chceme umožniť výber viac ako jednej voľby spravíme to atribútom v elemente <select> multiple="multiple", ktorý spôsoby že menu bude rolovacieho typu bez ohľadu na to či bol atribút size zadaný (size ešte stále určuje koľko volieb ponuky sa zobrazí).

Zhodnotenie

Teraz využijeme všetky vedomosti získané v časti formuláre a vytvoríme skutočný formulár určený pre pripomienky a názor návštevníkov s pomocou už známych elementov.

Pod týmto tlačidlom nájdete príklad hotového formulára - Príklad formulára -

Naučili sme sa základy vytvárania formulárov, ktoré sa dajú využiť úplne všade fungujú vo všetkých prehliadačoch rovnako. Takéto formuláre obsahujú firemné stránky, každého kto chce komunikovať s užívateľmi.

Partneri:

Horoscope