Formuláre v HTML

1. 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: <formaction="stranka.html"> <inputtype=submitvalue=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 • <inputtype="text"> definuje jeden riadok vstupného poľa, ktoré môže užívateľ zadať <form>Krstné meno: <inputtype="text" name="Krstné meno"><br>Priezvisko: <inputtype="text" name="Priezvisko"></form>

6. Heslo • <inputtype=„password">definuje pole pre heslo <form>Heslo: <inputtype="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 • <inputtype="submit">tlačidlo odoslať slúži na odoslanie dát formulára na server, na určenú URL adresu <formname="input" action="stránka.html" method="get">meno: <inputtype="text" name="user"><inputtype="submit" value="Submit"></form>

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

11. HTML <input> Tag

12. <formaction=„stranka.html"> Krstné meno: <inputtype="text" name="krstné meno"><br> Priezvisko: <inputtype="text" name="Priezvisko"> <br>   <inputtype="submit" value="Submit"> </form>

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

14. HTML <button> Tag • definuje klikacietlačidlo <button> <buttontype="tlačidlo" onclick="alert('Helloworld!')"> ClickMe! </button>

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

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

17. HTML <option> Tag • definuje voľbu v zozname vyberte • výberz 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> </optgroup> </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: <inputtype="text"><br> Email: <inputtype="text"><br> Dateofbirth: <inputtype="text"> </fieldset>

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

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

22. Ďakujeme za pozornosť