Lomakkeet HTML5. Elina Ulpovaara. Testaus: IE9 Firefox7 Opera11 Chrome

Transkriptio

1 Lomakkeet HTML5 Elina Ulpovaara Testaus: IE9 Firefox7 Opera11 Chrome

2 SELAIN Käyttäjä täyttää lomakkeen ja painaa lähetys-painiketta. Selain lähettää käyttäjän antamat tiedot palvelimelle lomakkeessa määrättyyn osoitteeseen. Selaimessa näkyvä sivu korvautuu palvelimen lähettämällä vastaussivulla. Koodataan lomakkeen käyttöliittymä Tehdään mahdolliset tarkistukset kenttiin Koodataan lomakkeenkäsittelijä jollain ohjelmointikielellä. PALVELIN Lomakkeen tiedot käsitellään ja lähetetään eteenpäin lomakkeen mukana tulleiden ohjeiden mukaan. Käsitellyt tiedot lähetetään esim. lomakkeen tekijän sähköpostiin tai tallennetaan johonkin tietokantaan.

3

4 <form> - elementti Lomake kirjoitetaan form-elementtiin <form id= tilaus > <!-- tähän lomakkeen sisältö - -> </form> Lomake- elementit voivat sijaita lomakkeen ulkopuolella, jos ne kiinnitetty lomakkeeseen id-attribuutin välityksellä <form id= tilaus > <!-- tähän lomakkeen sisältö - -> </form> <input type= text form= tilaus >

5 form-elementin attribuutit yleiset attribuutit: mm. id, class, style, title name lomakkeen lähettäminen action action= url kertoo, mihin lomake lähetetään method arvot get tai post kertoo, miten lomake lähetetään: get tiedot välittyvät osana url:ia post tiedot välittyvät erikseen <form id= tilaus action= method= post > <!-- tähän lomakkeen sisältö - -> </form>

6 accept-charset hyväksytyt koodaukset autocomplete kenttien automaattinen täydennys arvot on tai off enctype lomakedatan esitystapa oletusarvo application/x-www-form-urlencoded multipart/form-data text/plain novalidate target _blank, _self,_parent, _top tai framen nimi kertoo, mihin avataan action-attribuutissa kerrottu osoite

7 <form>-elementin alielementit form input select textarea datalist keygen output syöttökentät optgroup option valintalistat tekstialue option valintalistan kiinnittäminen kenttään avainparit salausta varten laskennan tulosten esittäminen

8 Lomakkeen kirjoittamisesta Kenttien selitteille on hyvä käyttää <label>-elementtiä: tai: <label>nimi:</label><input type= text size= 10 > <label>nimi:<input type= text size= 10 ></label> <label>-elementtiin kuuluu for-attribuutti, jonka avulla kiinnitetään selite kenttään. Sen arvoksi annetaan kentän id-arvo. <label for= nimi >nimi:</label> <input type= text size= 10 id= nimi > label-elementin attribuutit yleiset form name

9 Ryhmittely fieldset-elementillä Joukko loogisesti yhteenkuuluvia kenttiä voidaan ryhmittää yhteen <fieldset>-elementillä. <legend>-elementillä annetaan ryhmälle nimi. <fieldset> <legend>henkilö:</legend> <label>nimi: <input type= text size= 15 ></label> <br> <label>osoite: <input type= text size= 20 ></label> </fieldset> fieldset-elementin attribuutit yleiset disabled form name

10 Lomakekenttien yleisiä attribuutteja Autocomplete Automaattinen täydennys Arvot on/off Selain tarjoaa vaihtoehtoja sen mukaan, mitä saman nimiseen kenttään on aiemmin kirjoitettu. Salasana, tunnusluku ja vastaaville kannattaa antaa autocomplete= off Autofocus Mikä lomakkeen kentissä on valittu, kun lomake on latautunut. Voidaan antaa vain yhdelle elementille yhtä sivua kohti. Disabled Input-elementille Elementti ei ole käytössä

11 Form Kiinnittää elementin johonkin tiettyyn lomakkeeseen. Arvona voidaan antaa pilkulla erotettuna useita eri lomakkeiden idarvoja Formnovalidate Kumoaa form-elementin novalidate-attribuutin Max Maksimiarvo Min Minimiarvo Name

12 Pattern Muototarkistus kentälle Säännölliset lausekkeet Placeholder Väistyvä aputeksti kentälle Readonly Required Pakollinen kenttä Chrome

13 Lomakkeen syöttökentät <input>-elementti Lomakkeen syöttökentät määritellään <input>-elementillä: <input type= text > Jos selain ei tue uutta input-tyyppiä, niin se käyttää tilalla arvoa type= text Uudet type-arvot kuvastavat sisällöllistä merkitystä -> parantavat HTML-koodin itsedokumentoituvuutta Useissa ssa on arvoissa oletetaan selaimen tekevän tarkistuksia ennen lomakkeen lähettämistä

14 <input type= text > tekstikenttä tarkentavat attribuutit name -kentän nimi size - koko merkkeinä <label>nimi:</label> <input type= text name= nimi size= 20 > maxlength -kenttään syötettävien merkkien enimmäismäärä, jotka voidaan lähettää palvelimelle value - alkuarvo readonly - kentän arvoa ei voi muuttaa attribuutille ei tarvitse antaa arvoa, pelkkä readonly riittää

15 <input type= > sähköpostiosoite selain ei hyväksy lomakkeen lähettämistä, jos kentän sisältö ei ole muodollisesti sähköpostiosoite asettaa kentän oletusleveyden sähköpostiosoitteelle sopivaksi multible-attribuutti antaa mahdollisuuden usean osoitteen antamiseksi pilkulla erotettuna <input type= name= osoite > Osoitteen tarkistus : Operassa Firefoxissa

16 <input type= tel > puhelinnumero muototarkistuksen lisäys pattern-attribuutilla <input type= tel name= puhelin pattern= \+?[0-9 () \-]+ > Muotoilun tarkistus : Chromessa

17 <input type= url > web-osoite selain varmistaa, että syötetty arvo on kelvollinen URL osoite Firefox Chrome Opera lisää alkuun jos se osoitteesta puuttuu.

18 <input type= number > <label for= koe >Koearvosana:</label><br> <input type= number value= 8 min= 4 luku, joka on max= 10 id= koe name= koe > kokonais- tai desimaaliluku (desimaalierottimena piste) <input type= number step= any > tarkentavat attribuutit min alaraja Chrome, Opera max yläraja value oletusarvo step lukujenväli alarajasta alkaen <input type= number > Sallii vain kokonaisluvut Firefox Opera

19 <input type= range > Luku valitaan liukusäätimellä väliltä min max. Oletuksena min=0 ja max=100 Käyttäjä ei voi tehdä tyhjää valintaa eikä näe valitsemaansa lukua Tarkentavat attribuutit: min ala-arvo max yläarvo step asteikon viivojen väli <label>anna yläraja puhelimen hinnalle ( )</label> <input type= range min= 100 max= 500 step= 100 id= puhhinta name= puhhinta > Opera, Chrome

20 <input type= color > Värin RGB-koodi rgb(r,g,b) #rrggbb tarkoituksena on tarjota käyttäjälle graafinen vaihtoehto värin valitsemiselle <label>anna väri</label> <input type= color id= vari name= vari > Opera

21 <input type= time > <input type= date > <input type= datetime > <input type= datetime-local > <input type= month > <input type= week > ajanilmaukset tarkentavia attribuutteja min alaraja max yläraja step Opera Chrome Huom. Selaimet, jotka eivät tue ajanilmauksia, tekevät niistä textkenttiä. Tällöin käyttäjän pitäisi osata kirjoittaa kentän sisältö oikeaa muotoon jatkokäsittelyä varten. ohjeet tai JavaScriptiä.

22 <input type= radio > radiopainike eli valintanappula, joista on vain yksi kerralla valittuna tarkentavat attribuutit name kertoo, mihin valintaryhmään nappula kuuluu, joten saman ryhmän nappuloilla se pitää olla sama. value kertoo, minkä valinnan kenttä saa, jos se on valittuna (pakollinen) checked -asettaa vaihtoehdon valituksi <label>valitse koko</label> <p><label> <input type= radio name= size value= pieni > Pieni </label></p> <p><label> <input type= radio name= size value= keski > Keskikokoinen </label></p> <p><label> <input type= radio name= size value= suuri checked> Suuri </label></p>

23 <input type= checkbox > valintaruudut, joista voi valita useita vaihtoehtoja tarkentavia attribuutteja name - antaa valintaryhmälle nimen value - kertoo, minkä arvon kenttä saa, jos se on valittuna (pakollinen) checked - asettaa vaihtoehdon valituksi <label>valitse lisätäyte</label><br> <label> <input type= checkbox name= lisat value= pekoni > pekoni</label><br> <label> <input type= checkbox name= lisat value= juusto > lisäjuusto </label><br> <label> <input type= checkbox name= lisat value= sipuli > sipuli </label><br> <label> <input type= checkbox name= lisat value= sieni > herkkusieni </label><br>

24 <input type= submit value= lähetä > painike, jolla tulokset lähetetään value-attribuutti kertoo, mitä painikkeessa lukee formaction-attribuutilla voidaan antaa osoite, johon tietoa lähetetään <input type= reset value= tyhjennä > painike, joka tyhjentää kentät oletusasetuksiin value-attribuutti kertoo, mitä painikkeessa lukee <input type= button value= teksti > painike, jolla ei ole oletustoimintoja, vaan siihen voidaan ohjelmoida tapahtumia <input type= image src= kuva.gif value= submit > oma valinnainen kuva submit-nappulaksi height ja width-attribuutit

25 <input type= hidden > piilokenttä, jota ei näytetä käyttäjälle voidaan esim. välittää tietoa lomakkeen mukana lomaketta käsittelevälle ohjelmalle value-attribuutilla <input type= password > Kuten tekstikenttä, mutta kenttään kirjoitettu teksti ei näy kuvaruudulla. Teksti lähetetään kuitenkin salaamattomana palvelimelle. <input type= file > tiedoston lataaminen mukaan lomakkeeseen multiple-attribuutilla useita tiedostoja

26 Valintalistat Valintalista määritellään <select>... </select>. Listan valinnat annetaan <option>-elementillä. Select- elementin attribuutit: multible mahdollistaa useamman kohdan valitsemisen kerralla size kertoo näkyvissä olevien kohtien lukumäärän Option-elementin attribuutit: selected esivalitsee halutun vaihtoehdon value määrää elementin oletusarvon. Jos ei ole annettu, arvoksi tulee optionelementin sisältö. <select name= jruoka > <option>omenapiirakka</option> <option>omenapaistos</option> <option>uuniomenat</option> <option>omena</option> <option>letut</option> </select> <select name= jruoka multiple size= 3 > <option>omenapiirakka</option> <option>omenapaistos</option> <option>uuniomenat</option> <option>omena</option> <option>letut</option> </select>

27 <optgroup> Ryhmittelee option-elementit <label>jälkiruuat</label> <select name= jruoka > <optgroup label="omena jälkkärit"> <option>omenapiirakka</option> <option>omenapaistos</option> <option>uuniomenat</option> <option>omena</option> <option>letut omenahillolla</option> </optgroup> <optgroup label="mansikka jälkkärit"> <option>mansikkakakku</option> <option>mansikkapirtelö</option> </optgroup> </select>

28 Tekstialue Mikäli halutaan kirjoitettavan paljon tietoa, niin kannattaa käyttää tekstikentän sijasta tekstialuetta. <textarea> </textarea> <label>mielipiteeni on:</label><br> Tarkentavat attribuutit: <textarea name= palaute rows= 8 name cols= 20 > Mielestäni...</textarea> rows - näkyvien rivien määrä cols - näkyvien sarakkeiden määrä maxlength merkkien maksimimäärä wrap

29 Valintalistan liitäminen kenttään Valintalistan voi liittää kenttään <datalist>-elementillä <input>-elementtiin attribuutti list, jolla viitataan <datalist>elementin id-attribuuttiin <option>-elementillä annetaan vaihtoehdot <label>valitse paikkakunat<label> <input type= text name= pkunta id= pkunta list= kunnat /> <datalist id= kunnat > <option value= Helsinki > <option value= Vantaa > <option value= Espoo > <option value= Kauniainen > <option value= Heinola > </datalist> Opera Firefox