Alica Takácsová Lenka Marčišová Formuláre v HTML Alica Takácsová Lenka Marčišová

1.Formuláre vo všeobecnosti používajú sa k výberu rôznych druhov užívateľských vstupov, pre prenos dát na server 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 môže obsahovať vstupné prvky ako sú textové polia, zaškrtávacie políčka, prepínače, tlačidlá pre odosielanie a ďalšie.

Najjednoduchší formulár <form> značka sa používa na vytvorenie formulára HTML: <form action="stranka.html">    <input type=submit value=odeslat> </form>

2.Najčastejšie typy vstupov: Textové polia  Heslo Prepínač Zaškrtávacie políčka Tlačidlo pre odosielanie

Textové polia <input type="text"> definuje jeden riadok vstupného poľa, ktoré môže užívateľ zadať <form> Krstné meno: <input type="text" name="Krstné meno"><br> Priezvisko: <input type="text" name="Priezvisko"> </form>

Heslo <input type=„password"> definuje pole pre heslo <form> Heslo: <input type="password" size="10"name="pwd"> </form>

Prepínač <input type="radio"> umožňuje užívateľovi vybrať iba jeden z obmedzeného počtu možností <form> <input type="radio" name="pohlavie" value="Muž">Muž<br> <input type="radio" name="pohlavie" value="Žena">Žena </form>

Zaškrtávacie políčka <input type="checkbox"> ovládací prvok umožňuje zvoliť si jednu alebo viac volieb/možností <form> <input type="checkbox" name="vozidlo" value="bicykel">Mám bicykel<br> <input type=„checkbox" name="vozidlo" value="auto">Mám auto </form>

Tlačidlo pre odosielanie <input type="submit"> tlačidlo odoslať slúži na odoslanie dát formulára na server, na určenú URL adresu <form name="input" action= "stránka.html" method="get"> meno: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

3.Význam tagov <form> prvok môže obsahovať jeden alebo viac z nasledujúcich prvkov formulára: <input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label>

HTML <input> Tag

<form action=„stranka.html">   Krstné meno: <input type="text" name="krstné meno"><br>   Priezvisko: <input type="text" name="Priezvisko"> <br>   <input type="submit" value="Submit"> </form>

HTML <textarea> Tag definuje viacriadkovú textovú vstupnú kontrolu <textarea rows=„2" cols=“20”> </textarea>

HTML <button> Tag definuje klikacie tlačidlo <button> <button type="tlačidlo" onclick="alert('Hello world!')"> Click Me! </button>

<button> môže obsahovať text aj obrázky

HTML <select> Tag <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

HTML <option> Tag definuje voľbu v zozname vyberte výber z možností nám ich zobrazí v jednom riadku <select name="platforma" size="1">  <option value="Volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> </select>

HTML <optgroup> Tag <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

HTML <fieldset> Tag slúži na zoskupenie súvisiacich prvkov vo formulári a nakreslí rámik okolo súvisiacich prvkov <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset>

HTML <label> Tag poskytuje použiteľnosť na zlepšenie hľadania pre užívateľa <form action=“stranka.html"> <label for="muž">Muž </label> <input type="radio" name="pohlavie" id="muž" value="muž"><br> <label for="žena">Žena <input type="radio" názov="pohlavie" id="žena" value="žena"><br><br> <input type="submit" value="Submit"> </form>

Použitá literatúra: http://www.jakpsatweb.cz/html/formulare.html http://www.vsl.sk/vyuka/ajax10/formulare.pdf http://www.w3schools.com/

Ďakujeme za pozornosť