1 / 15

Formuláre

Formuláre. Diana Bednárová Jana Kamenská. Čo sú to HTML formuláre?. HTML formuláre slúžia na posielanie údajov z klienta na server umožňujú interaktívnu komunikáciu medzi webovým klientom a serverom

ciel
Download Presentation

Formuláre

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Formuláre Diana Bednárová Jana Kamenská

  2. Čo sú to HTML formuláre? • HTML formuláre slúžia na posielanie údajov z klienta na server • umožňujú interaktívnu komunikáciu medzi webovým klientom a serverom • využitie: webové stránky, kde užívateľ zadáva rôzne údaje, a potom ich prostredníctvom potvrdzovacieho tlačidla zašle na server

  3. Formulár je reprezentovaný tagom <form> • <HTML><body><form>      ...dalsieprikazy pre tvorbu formulara...</form></body></HTML>

  4. Najdôležitejším elementom vo formulároch je element input • <input> nepárový tag

  5. <form> Meno: <inputtype="text" name="firstname"><br> Priezvisko: <inputtype="text" name="lastname"> <br> Heslo: <inputtype="password" name="heslo"> <br> <br> Pohlavie: <inputtype="radio" name="pohlavie"> Muž <inputtype="radio" name="pohlavie"> Žena <br> Zvoľte: <inputtype="checkbox" name="vozidlo" > Bicykel <inputtype="checkbox" name="vozidlo"> Auto <br> <inputtype="submit" name="odoslanie" value="odoslat" > </form>

  6. <form> <textarea rows="10" cols="30"> Televízia vysiela posledný rozhodujúci zápas futbalovej ligy. Hlava rodiny vzrušene pozerá na obrazovku, keď niekto zaklope. - Dovolíte, aby som u vás sledoval zápas? - pýta sa sused. - Pravdaže! Poďte ďalej. Pokazil sa vám televízor? - Ale kde! V našom byte vypukol požiar a od dymu som nič nevidel.</textarea> <br> <buttontype="button">Klik</button> </form>

  7. Tag<fieldset> • párový tag • slúži na zoskupenie súvisiacich prvkov vo formulári • nakreslí rámik okolo súvisiacich prvkov • <legend> tagdefinuje nadpispre <fieldset>

  8. <!DOCTYPE HTML> <html> <body style="background-color:peachpuff"> <div style="font-size: 60px;font-weight: bold; text-align: center;">Dotazník </div><br> <form> <fieldset> <legend>Údaje</legend> Meno: <inputtype="text"><br> Vek: <inputtype="text"><br> </fieldset> </form> </body> </html>

  9. Tagy<select> a <option> • párové tagy • používa sana vytvorenie rozbaľovacieho zoznamu. • vtagu<select> pomocoutagu <option> môžeme definovať dostupné možnosti v zozname

  10. <p>Na akej fakulte študuješ?</p> <select> <option class="f1">Strojnícka fakulta</option> <option class="f2">Elektrotechnická fakulta</option> <option class="f3">Stavebná fakulta</option> <option class="f4">Fakulta prevádzky a ekonomiky dopravy a spojov</option> <option class="f5">Fakulta humanitných vied</option> <option class="f6">Fakulta špeciálneho inžinierstva</option> <option class="f7">Fakulta riadenia a informatiky</option> </select>

  11. Tag <optgroup> • párový tag • používa sana zoskupenie súvisiacich možností v rozbaľovacomzozname • ak jedlhý zoznam možností, pomocou tohto tagu sa vytvoria skupiny súvisiacich možností a tým sa uľahčí prístup užívateľovi k daným možnostiam

  12. <p>Na akej katedre študuješ?</p> <select> <optgrouplabel="Elektrotechnická fakulta"> <option class="k1">KF</option> <option class="k2">KMAE</option> <option class="k3">KME</option> <option class="k4">KRIS</option> <option class="k5">KTAM</option> <option class="k6">KTEBI</option> <option class="k7">KVES</option> </optgroup> </select>

  13. Tag<label> • párový tag • definuje návesť na <input> element • poskytuje zlepšenie pre užívateľa myši, pretože ak užívateľ klikne na text v rámci značky <label>, prepína kontrolu

  14. <p>Rocník</p> <label title="1.bc"></label> <inputtype="radio" name="rocnik"> 1.bc <br><label title="2.bc"></label> <inputtype="radio" name="rocnik">2.bc <br> <label title="3.bc"></label> <inputtype="radio" name="rocnik“>3.bc <br> <label title="1.ing"></label> <inputtype="radio" name="rocnik"> 1.ing <br> <label title="2.ing"></label> <inputtype="radio" name="rocnik">2.ing

  15. Ďakujeme za pozornosť

More Related