Avtor: -primož-
16.11.09
| HTML obrazci |
| HTML vodiči | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 HTML kode za obrazce.Obrazci so na spletnih straneh zelo priročni, saj skrbijo za komunikacijo med uporabnikom, strežnikom in bazo ter upravljalci spletne strani. Obrazci uporabniku omogočijo, da se registrira in prijavi v spletno stran, da administratorju pošlje svoje mnenje ali svoja vprašanja, se prijavi na novice in še mnogo drugih stvari bi lahko našteli. Pa si oglejmo, kako s pomočjo HTMLja postavimo obrazce na spletno stran. HTML obrazci:
Obrazec je na spletni strani definiran s kodo <form>, ki se zapre s </form>. Med ti dve oznaki nato dodamo elemente obrazca (polje z besedilo, izbirni gumb, ...). Poleg teh elementov lahko med <form> in </form> uporabljamo tudi ostalo HTML kodo. Tako poskrbimo, da je obrazec, kar najlepše urejen. Za bolj podrobno oblikovanje obrazcev vam priporočam, da uporabljate CSS. 1. Polje z besedilomPolje z besedilom je na spletnih straneh najpogostejša vrsta obrazca. Polje z besedilom določimo z atributom type="text" v oznaki <input>. HTML primer 1: <html>
<head> </head> <body> <form> Ime: <input type="text" name="ime"> <br><br> Priimek: <input type="text" name="priimek"> </form> </body> </html> PRIKAZ polja z besedilom *Za polje za geslo uporabite type="password" in vneseni znaki se bodo prikazali, kot krogci. 2. Področje z besedilomTa vrsta obrazca se uporablja predvsem za besedila, daljša od ene besede (npr. kot kontaktni obrazec).HTML primer 2: PRIKAZ področja z besedilom 3. Izbirni gumbTo vrsto obrazca uporabljamo v primerih, da uporabniku ponudimo več možnosti, med katerimi lahko izbira a izbere lahko le eno od ponujenih (npr. anketa, izbira spola). Tip obrazca Izbirni gumb določimo z atributom type="radio" v oznaki <input>. HTML primer 3: <html>
<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <form> <input type="radio" name="spol"> Moški <br> <input type="radio" name="spol"> Ženska </form> </body> </html> PRIKAZ izbirnega gumba 4. Potrditveno poljeZa obrazce tipa potrditvenega polja se odločimo takrat, ko lahko uporabnik izbere poljubno število ponujenih možnosti. Ta vrsta obrazca pride prav pri anketah ali naprednem iskanju po spletni strani in drugod. Tip obrazca določite z atributom type="checkbox". HTML primer 4 <html>
<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <form> Išči med:<br> Photoshop: <input type="checkbox" name="iskanje"> <br> HTML: <input type="checkbox" name="iskanje"> <br> CSS: <input type="checkbox" name="iskanje"> </form> </body> </html> PRIKAZ potrditvenih polj 5. Spustni seznamSpustni seznam je vrsta obrazca, pri kateri uporabnik iz seznama, ki se mu odpre izbere eno izmed že določenih možnosti. Ta vrsta obrazca se ponavadi uporablja za datum rojstva. Spustni seznam ima malo drugačno obliko, kot zgornji obrazci. Začne se z oznako <select> in konča z oznako </select>. Vmes nizamo možnosti in sicer vsako možnost med <option> in </option>. Če želimo, da se na začetku prikaže posebna možnost dodamo selected v oznako <option>. HTML primer 5: <html>
<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <form action=""> Rodili ste se leta: <select name="letnica"> <option>1970</option> <option>1980</option> <option selected>1990</option> <option>2000</option> <option>2010</option> </select> </form> </body> </html> PRIKAZ spustnega seznama 6. Gumb Pošlji in gumb ZbrišiGumb Pošlji (type="submit") potrebuje vsak obrazec, saj klik na ta gumb izvede pošiljanje vsebine obrazca. HTML koda sama ni zadosti za to, da bi gumb deloval! Gumb Počisti (type="reset") izbriše vse znake, ki jih je vnesel uporabnik. Ta gumb se uporablja predvsem v kombinaciji s textarea oz. področjem za besedilo. HTML primer 6: <html>
<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <form> <textarea rows="10" cols="30"></textarea> Besedilo <br> <input type="reset" value="Zbriši" /> <input type="submit" value="Pošlji" /> </form> </body> </html> PRIKAZ gumba Submit in gumba Reset HTML oznake za obrazce so šele začetek pri spoznavanju vseh možnosti, ki jih obrazci ponujajo. Če imate s svojo stranjo velike načrte boste obrazce slej, ko prej potrebovali. Oglejte si še vodič Urejanje obrazcev s CSSjem. Komentiraj:
!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved." |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
mogoče bi sliko olja spremenil tako, da konopljino olje izginja v belo barvo (preliv).
.| Sorodni vodiči | |
Moje-Mesto.com
Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.
