Transcript form

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.
2
Najjednoduchší formulár
• <form> značka sa používa na vytvorenie formulára
HTML:
<form action="stranka.html">
<input type=submit value=odeslat>
</form>
3
2.Najčastejšie typy vstupov:
• Textové polia
• Heslo
• Prepínač
• Zaškrtávacie políčka
• Tlačidlo pre odosielanie
4
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>
5
Heslo
• <input type=„password"> definuje pole pre
heslo
<form>
Heslo: <input type="password"
size="10"name="pwd">
</form>
6
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
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>
8
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>
9
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>
10
HTML <input> Tag
11
<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
HTML <textarea> Tag
• definuje viacriadkovú textovú vstupnú
kontrolu
<textarea rows=„2" cols=“20”>
</textarea>
13
HTML <button> Tag
• definuje klikacie tlačidlo
<button>
<button type="tlačidlo" onclick="alert('Hello world!')">
Click Me!
</button>
14
<button> môže obsahovať text aj obrázky
15
HTML <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
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>
17
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>
</optgroup>
</select>
18
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>
19
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
</label>
<input type="radio" názov="pohlavie" id="žena"
value="žena"><br><br>
<input type="submit" value="Submit">
</form>
20
Použitá literatúra:
• http://www.jakpsatweb.cz/html/formulare.html
• http://www.vsl.sk/vyuka/ajax10/formulare.pdf
• http://www.w3schools.com/
21
Ďakujeme za pozornosť
22