EesmärkSelles ja järgmises peatükis vaatame mis asjapulgad on vormi elemendid, kuidas need töötavad, millised elemendid eksisteerivad, kuidas neid luua, millised on nende parameetrid ja mida uut toob HTML5 Mis on HTML vorm?Vorm (form, web form) HTML element, mis võimaldab kasutajal saata erinevaid andmeid veebiserverile. See võimaldab näiteks kasutada otsingukasti, logida või registreerida end veebilehel, anda tagasisidet jne. Veebilehe administraatorid kasutavad näiteks vorme uudiste lisamiseks. HTML5 versiooniga arendatakse välja Forms 2.0 Kuidas vormid töötavad Vormid koosnevad kahest osast. - Esimene osa on see mida kasutaja näeb veebilehel - HTML tekstiväljad, nupud, valikukastid jne
- Teise osa moodustab andmeid töötlev veebiserver, mis reeglina saadab vastuse tagasi kasutajale. (näiteks php)
Võtame näiteks lihtsa registreerimisvormi: - kasutaja täidab nõutud HTML vormi väljad
- HTML siseselt määratakse milliste tekstiväljadega on tegemist (tekst, parool ja e-post)
- HTML siseselt kontrollitakse kas paroolid ja e-post ühtivad
- vajutades nupule 'Registreeru' saadetakse nimi, parool ja email veebiserverile
- veebiserverisse paigaldatud php lisab uue kasutaja andmebaasi ja saadab kasutajale teksti õnnestumise kohta.
HTML abil saame luua vaid seda vormi visuaalset osa. Selle mooduli eesmärgiks ongi vaadata millised on vormi osad ja mis on nende võimalused, sest HTML5 on teinud päris palju muudatusi. Vormi loomineVormi loomisel tuleb kõik elemendid lisa <form> siltide vahele. Lisaks vormi elementidele võib siia lisada ka teisi HTML elemente - näiteks pealkirjad, tabelid, pildid jne. Kindlasti on keelatud asetada üks <form> element teise <form> sisse. -
<form> -
<!-- vormi elemendid siia --> -
</form> Selleks, et vormi andmeid töödelda, tuleb meil kirja panne fail, mis seda teeb. Selleks kasutame <form> elemendi parameetreid action ja method. -
<form action="reg.php" method="post"> -
<!-- vormi elemendid siia --> -
</form> - action - võimaldab meil lisada protsessifaili URL aadressi. Reeglina .php, .asp või .jsp faililaiendiga.
- method - määrab ära andmete saatmise viisi serverisse - POST või GET
HTML5 versiooniga lisandus <form> elemendile juurde 2 parameetrit: - autocomplete - hetkel toetab seda ainult Opera 9.0+. See võimaldab kasutajal eelsalvestatud andmeid kohe väljadele lisada.
-
<form action="reg.php" method="post" autocomplete> -
<!-- vormi elemendid siia --> -
</form>  - novalidate - kasuta, kui sa ei soovi, et vormi valideeritakse
Vormielementide grupeerimineVormi elemendid on mõtekas grupeerida, eriti kui andmeid on palju. Kindlasti ei ole see kohustuslik. Loome registreermislehe, kus esimese osa väljad on kohustuslikud. Grupi loomiseks kasutame <fieldset> elementi ning grupile nime andmiseks <legend> elementi. -
<form action="reg.php" method="post" autocomplete> -
-
-
<!-- vormi elemendid siia --> -
</fieldset> -
</form>  SisestusväljadSisestusväljad on HTML vormi elemendid, mille abil saab kasutaja serverile infot saata. Sisestusvälja elemendid lisatakse <input> siltide vahele. Vastavalt type parameetrile saab need jagada gruppideks: - tekstid
- numbrid
- paroolid
- ripploendid
- valikukastid
- nupud
- kuupäevad
- emailid
- telefoninumbrid
- faili sirvimised
- veebiaadressid
- jne
TekstTeksti välja määramiseks kasutame type="text" parameetrit. -
<form action="reg.php" method="post" autocomplete> -
<fieldset> -
<legend>Kohustuslik info</legend> -
<input type="text"> -
</fieldset> -
</form> 
Ilma muude parameetritega luuakse vaikimisi pikkusega kast, kuhu saate sisestada ükskõik milliseid sümboleid. Aga selleks, et kasutaja ka teaks, millist infot sa soovid, siis tuleb igale sisestusväljale panna juurde silt <label> -
<form action="reg.php" method="post" autocomplete> -
<fieldset> -
<legend>Kohustuslik info</legend> -
<label>Kasutajanimi: </label><input type="text"><br> -
</fieldset> -
</form> 
Vormi elemendid on kõik reasisesed ning seega kui soovid, et elemendid hakkaks uuelt realt kasuta reavahetust <br>. -
<form action="reg.php" method="post" autocomplete> -
<fieldset> -
<legend>Kohustuslik info</legend> -
<label>Kasutajanimi: </label><br /> -
<input type="text"><br> -
</fieldset> -
</form> 
Sisestusvälja nimi Kuna sisestusvälju on veebilehel rohkem kui üks, siis tuleb neile anda ka nimed. Kasutage selleks name parameetrit Nime valimisel vältige täpitähti, tühikuid ja muid erisümboleid. -
<input name="kasutaja" type="text"> ParoolidParoolivälja eesmärk on kuvada sisestatud parool tärnidena, et kõrvalseisjad iskud, ei näeks sinu parooli. -
<form action="reg.php" method="post" autocomplete> -
<fieldset> -
<legend>Kohustuslik info</legend> -
<label>Kasutajanimi: </label><input name="kasutaja" type="text"><br> -
<label>Parool: </label><input name="parool" type="password"><br> -
</fieldset> -
</form> 
E-kiri ja veebiaadressKasutades sisestusvälja tüübina type="email" või type="url", saame kaasa automaatse väljade valideerimise, juhuks kui kasutaja tegi selle sisestamisel vea. -
<form action="reg.php" method="post" autocomplete> -
<fieldset> -
<legend>Kohustuslik info</legend> -
<label>Kasutajanimi: </label><input name="kasutaja" type="text"><br> -
<label>Parool: </label><input name="parool" type="password"><br> -
<label>E-kiri: </label><input name="ekiri" type="email"> -
</fieldset> -
<fieldset> -
<legend>Lisa info</legend> -
<label>Veebiaadress: </label><input name="www" type="url"><br> -
</fieldset> -
<input value="registreeru" name="reg" type="submit"> -
</form>  Nuppude lisamineEt vorm saaks saata andmeid serverile saata, peab vormile lisama submit nupu. Eelmist koodi jälgides me seda juba tegime ja et nupul oleks ka mingisugune tekst lisame parameetri value. Ja nupud jäävad ka <form> elemendi sisse. -
<input value="registreeru" name="reg" type="submit"> Teine nupp mida vorm vahel vajab on väljade puhastamise nupp ehk reset. -
<input value="registreeru" name="clr" type="reset"> Sisestusväljade parameetridLisaks endistele on HTML5 lisanud palju uusi huvitavaid parameetreid sisestusväljadele. Enamus vormi elemente töötab hetkel vaid valitud veebilehitsejatega ja sedagi erinevalt. Hetkel on siis veebiarendajal soovitus proovida vormid läbi erinevate veebilehitsejatega. Kui ära karda neid kasutada, sest HTML5 on ülesehitatud selliselt, et kui ta antud parameetrit ära ei tunne, siis käivitab ta vaikimisi seaded ja vorme saab ikka kasutada. - autofocus - töötab Google Chrome'iga, võimaldab veebilehe laadimisel muuta lahter kohe aktiivseks
- placeholder - töötab Google Chrome'iga, lahtrisse lisada abiteksti
- autocomplete - töötab Opera 9.0+, võimaldab kasutada eelsalvestatud andmeid
- required - töötab Opera 9.0+, selle lisades, ei tohi kasutaja välja tühjaks jätta
- maxlength - määrab maksimum lubatud märkide arvu
- novalidation - keelab igasuguse andmete valideerimise sinu elemendis
Lisame need parameetrid meie vormielementidele: -
<form action="reg.php" method="post" autocomplete> -
-
-
<label>Kasutajanimi: </label><input name="kasutaja" type="text" placeholder="siia kasutajanimi" maxlength="6"><br> -
<label>Parool: </label><input name="parool" type="password" placeholder="min 8 märki" required><br> -
<label>E-kiri: </label><input name="ekiri" type="email" placeholder="emailile saadetakse kinnitus"> -
</fieldset> -
-
-
<label>Veebiaadress: </label><input name="www" type="url" autofocus placeholder="http://www.kodukas.ee" alt="http protokoll nõutav"><br> -
</fieldset> -
<input value="puhasta väljad" name="clr" type="reset"> -
<input value="registreeru" name="reg" type="submit"> -
</form> 
|
