Formuláre v HTML
description
Transcript of Formuláre v HTML
![Page 1: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/1.jpg)
Formuláre v Formuláre v HTMLHTML
Alica TakácsováLenka Marčišová
![Page 2: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/2.jpg)
1.Formuláre vo všeobecnosti1.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.
2
![Page 3: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/3.jpg)
• <form> značka sa používa na vytvorenie formulára HTML:
<form action="stranka.html">
<input type=submit value=odeslat> </form>
3
Najjednoduchší formulárNajjednoduchší formulár
![Page 4: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/4.jpg)
• Textové polia
• Heslo
• Prepínač
• Zaškrtávacie políčka
• Tlačidlo pre odosielanie
4
2.Najčastejšie typy vstupov:
![Page 5: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/5.jpg)
Textové poliaTextové 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>
5
![Page 6: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/6.jpg)
HesloHeslo
• <input type=„password"> definuje pole pre heslo
<form> Heslo: <input type="password" size="10"name="pwd"></form>
6
![Page 7: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/7.jpg)
Prepínač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>
7
![Page 8: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/8.jpg)
Zaškrtávacie políčkaZaš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>
8
![Page 9: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/9.jpg)
Tlačidlo pre odosielanieTlač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>
9
![Page 10: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/10.jpg)
3.Význam tagov3.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>
10
![Page 11: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/11.jpg)
11
HTML <input> TagHTML <input> Tag
![Page 12: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/12.jpg)
<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>
12
![Page 13: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/13.jpg)
HTML <HTML <textareatextarea> Tag> Tag
• definuje viacriadkovú textovú vstupnú kontrolu
<textarea rows=„2" cols=“20”></textarea>
13
![Page 14: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/14.jpg)
HTML <HTML <buttonbutton> Tag> Tag
• definuje klikacie tlačidlo
<button><button type="tlačidlo" onclick="alert('Hello world!')">Click Me!</button>
14
![Page 15: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/15.jpg)
<button> môže obsahovať text aj obrázky
15
![Page 16: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/16.jpg)
HTML <select> TagHTML <select> Tag
<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option> <option value="audi">Audi</option></select>
16
![Page 17: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/17.jpg)
HTML <option> TagHTML <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>
17
![Page 18: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/18.jpg)
<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></optgroup></select>
18
HTML <optgroup> TagHTML <optgroup> Tag
![Page 19: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/19.jpg)
HTML <fieldset> TagHTML <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>
19
![Page 20: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/20.jpg)
HTML <label> TagHTML <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</label><input type="radio" názov="pohlavie" id="žena"
value="žena"><br><br><input type="submit" value="Submit"></form>
20
![Page 21: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/21.jpg)
Použitá literatúra:Použitá literatúra:
• http://www.jakpsatweb.cz/html/formulare.html• http://www.vsl.sk/vyuka/ajax10/formulare.pdf• http://www.w3schools.com/
21
![Page 22: Formuláre v HTML](https://reader030.fdocument.pub/reader030/viewer/2022020117/56813bef550346895da52038/html5/thumbnails/22.jpg)
Ďakujeme za pozornosťĎakujeme za pozornosť
22