Alica Takácsová Lenka Marčišová

Prezentace na téma: "Alica Takácsová Lenka Marčišová"— Transkript prezentace:

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

2 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.

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

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

5 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>

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

7 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>

8 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>

9 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>

10 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>

11 HTML <input> Tag

12 <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>

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

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

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

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

17 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>

18 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>

19 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> <input type="text"><br> Date of birth: <input type="text"> </fieldset>

20 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>

21 Použitá literatúra: http://www.jakpsatweb.cz/html/formulare.html

22 Ďakujeme za pozornosť