ICT1TN004. Lomakkeet. Heikki Hietala

Transkriptio

1 Lomakkeet Heikki Hietala

2 Lomakkeet Lomakkeita käytetään keräämään tietoa käyttäjältä ja siirtämään se palvelimelle Lomakkeen luominen ei yksin riitä, vaan pitää luoda myös lomakkeenkäsittelijä Lomakkeen käsittely tapahtuu palvelimella Siksi täytyy olla pääsy palvelimeen Palvelimella täytyy koodata jollain menetelmällä lomakkeen tietojen käsittely 2

3 Lomakkeen osat <form> </form> on lomakkeen pääelementti Sillä on useimmiten kolme attribuuttia: action, name, method Action on pakollinen attribuutti action = url Kertoo mihin lomake lähetetään name kertoo lomakkeen nimen method kertoo miten data lähetetään Arvot ovat get ja post get on yksinkertaisempi tapa, jossa data koodataan URLiin ja lähetetään sellaisenaan Ei periaatteessa hyvä idea jos lomakkeen datassa on skandeja tai muita erikoismerkkejä Näyttää tilarivillä salasanat ja mahtuu vain 255 merkkiä post-metodissa lomakkeen sisältö koodataan osaksi sanomaa get näkyy myös vastauksen URLissa joka ei aina ole hyvä idea. 3

4 Lomakkeen enctype-attribuutti enctype-attribuutti kertoo, kuinka lomakkeen sisältö koodataan Perusoletus (jota ei siis tarvitse erikseen kirjata) on application/x-www-form-urlencoded Kaikki lähetettävän lomakkeen erikoismerkit koodataan HEX-ASCIImerkeiksi ja välilyönnit koodataan plusmerkeiksi multipart/form-data Mitään ei koodata Tätä pitää käyttää, jos lomakkeessa on tiedostonlähetyskenttä text/plain Välilyönnit koodataan plusmerkeiksi, mutta ei muuta Käytetään kun lähetetään lomakkeen tiedot sp-osoitteeseen <form name="lomake" method="post" enctype="text/plain"> 4

5 Lomakkeen kentät Lomakkeen kentät koodataan <fieldset>-elementtiin tai muuhun lohkoelementtiin Fieldset-elementillä voi olla kenttien joukkoa kuvaava <legend>-elementti Lomakkeen elementtejä ovat Button, painike Input, jolla on muutama alityyppi Text, muokkauskenttä Radio, yksittäin valittava arvopainike Checkbox, tosi/epätosi -valintaruutu Submit, lähetyspainike Reset, lomakkeen tyhjennyspainike Hidden, piilokenttä, jolla välitetään tietoa palvelimelle Image, kuvan käyttö painikkeena File, tiedoston lataamiseen käytettävä selauspainike ja tiedostokenttä Textarea, tekstialue Select, luetteloruudut Label, otsikkotieto 5

6 Input / text Text on tekstikenttä <input type=text name="kentän nimi" maxlength="tekstin maksimipituus" size="laatikon koko" value="oletusarvo /> Tuottaa tekstikentän, jonka nimi toimii lomakkeenkäsittelijässä erottelevana tekijänä Maxlength kertoo montako merkkiä teksti saa maksimissaan sisältää (usein 255) Size kertoo kuinka pitkä ruutu on (usein 40 merkkiä) Value on ruudussa valmiina oleva oletusteksti, joka poistuu napsautettaessa Jos type on password, kyse on salasanasta, muuten käyttö on samanlaista 6

7 Input / radio Radio on systeemi joka antaa valita yhden arvon painikeryhmän useasta vaihtoehdosta <input type= radio name= painikkeen_nimi" value= tähän se teksti, joka näkyy lomakkeessa /> Name on taas se erotteleva tekijä lomakkeenkäsittelijässä Kaikilla painikeryhmän radiopainikkeilla tulee olla sama nimi, muuten kyseessä on joukko yhden painikkeen painikeryhmiä Tämä eroaa Checkboxista, jossa jokaisella pitää olla oma, yksilöllinen nimi Boolean-arvolla checked voidaan ennakkovalita yksi arvo 7

8 Input / checkbox Valintaruutu on valinnan mukaan joko tosi (valittuna) tai epätos (ei valittuna) <input type= checkbox name= valintaruudun_nimi" value= tähän se teksti, joka näkyy lomakkeessa /> Name on taas se erotteleva tekijä lomakkeenkäsittelijässä Jokaisella valintaruudulla pitää olla oma, yksilöllinen nimi, koska ruudun arvo on joko tosi tai epätosi Boolean-arvolla checked voidaan ennakkovalita arvoja 8

9 Input / submit ja reset <input type="submit" value="lähetä /> <input type="reset" value="tyhjennä /> Submit lähettää lomakkeen käyttäen menetelmää METHOD ja lomakkeenkäsittelijää, joka on annettu attribuutilla ACTION Reset poistaa kenttien sisällöt ja palauttaa pudotusvalikot 9

10 Input / hidden <input type= hidden name= nimi value= haluttu_arvo /> Hidden-kenttään voidaan merkitä arvo, joka välitetään palvelimen lomakkeenkäsittelijälle, mutta jota ei näytetä käyttäjälle Usein sitä käytetään lomakkeissa, jotka käyttäjä ensin täyttää, ja jotka sitten palvelimen käsittelyn jälkeen palautetaan muokattaviksi Tällöin oletusarvot voidaan välittää piilokenttien arvoina 10

11 Usein käytettyjä attribuutteja Lomakkeiden yhteydessä voi käyttää tapahtuma-attribuutteja Esimerkiksi ennen lomakkeen lähettämistä voidaan tarkistaa lomakkeen sisältö funktiolla, ja sisältö voidaan lähettää funktiolle onsubmit-attribuutin avulla. Käytettäviä ovat onblur skripti suoritetaan kun elementti menettää fokuksen. onchange elementti muuttuu. onfocus elementti saa fokuksen. onreset lomake tyhjennetään. onselect lomake valitaan. onsubmit- lomake lähetetään. 11

12 Textarea <textarea name= tekstialue rows= 5 cols= 40 >Tässä on tekstialueen oletusteksti ja kentän koko 40 saraketta ja 5 riviä</textarea> Textarea käytetään suuremman tekstimassan kirjoittamiseen. Textarea saa vierityspalkin, jos tekstiä kirjoitetaan niin paljon että ruutu tulee täyteen 12

13 Select ja option <select> <option value= Arvo1 >näkyvä teksti 1</option> <option value= Arvo2 >näkyvä teksti 2</option> <option value= Arvo3 >näkyvä teksti 3</option> <option value= Arvo4 >näkyvä teksti 4</option> <option value= Arvo5 >näkyvä teksti 5</option> </select> Luo pudotusvalikon, jossa luettelon elementteinä näkyy näkyvä teksti 1 5 mutta lomake lähettää arvon Arvo 1 5 Jos elementille select annetaan attribuutti multiple= multiple niin pudotusvalikon sijaan muodostuu luetteloruutu, ja attribuutti size kertoo montako riviä näkyy Luetteloruudusta voi sitten valita useita arvoja pitämällä Ctrl-näppäintä alhaalla attribuutilla selected voi esivalita luettelosta arvon 13

14 Esimerkkilomake Nimi-kenttä: <input type="text" size="60" name="nimi" value="jos muistat sen..."/> Salasana-kenttä: <input type="password" size="60" name="salasana" /> Elämäntehtävä-tekstialue: <textarea cols="40" rows="8" name="elamankerta"> Vuodata sytämesi Seiskalle</textarea> 14

15 Esimerkkilomake Kiinnostukset-checkboxit (huomaa kaikilla eri nimi:) <input type="checkbox" name="ristipistokellunta /> Ristipistokellunta<br/> <input type="checkbox" name="judokudonta /> Judokudonta<br/> <input type="checkbox" name="kirveenheitto /> Kirveenheitto<br/> <input type="checkbox" name="eukonlepytys /> Eukonlepytys 15

16 Esimerkkilomake Numeerinen arvio (huomaa kaikilla SAMA nimi:) <input type="radio" name= numeroarvio" value="1 />1<br/> <input type="radio" name= numeroarvio" value="2 />2<br/> <input type="radio" name= numeroarvio" value="3 />3<br/> <input type="radio" name= numeroarvio" value="4 />4<br/> <input type="radio" name= numeroarvio" value="5 />5<br/> <input type="radio" name= numeroarvio" value="6 />6 16

17 Esimerkkilomake Valitse tästä omasi -valintaluettelo <select name="pudotus" multiple= multiple size= 6"> <option value= "Tykkaan_sotahistoriasta"> Tykkään sotahistoriasta </option> <option value= "Tennis_on_kivaa">Tennis on kivaa</option> <option value= "Luen_Waltaria">Luen Waltaria </option> <option value= Olen_keskiajasta_kiinnostunut">Keski aika miellyttää</option> <option value= "Kummeli_rulettaa">Se Kahilainen on kamalan hauska</option> <option value= "Monty_Python_rules">Monty Python on ihkuqqqq</option> </select> 17

18 ASP-lomakkeenkäsittelijä Yksinkertaisin mahdollinen lomakkeenkäsittelijä on <% for each x in request.form() käsitellään lomakkeen kokoelma Next %> If request.form(x) <> then jos silmukassa on eityhjä osa End if Response.write (x & = & request.form(x) & <br> Tulostetaan siis kaikki avaimet x ja avainta vastaava lomakkeen osa. Tällainen käsittelijä on olemassa osoitteessa Ja tämän voi siis laittaa lomakkeen action-attribuutiksi Se palauttaa kunkin kentän sisällön, mutta ei tee muuta 18

19 Tehtävä: luo lomake eläintarhalle Korkeasaari kerää rahaa uuteen apinahäkkiin. Nyt pitäisi luoda lomake, jossa on Nimikentät etu- ja sukunimelle Salasanakenttä Checkboxit niille apinalajeille, joita haluat tukea Gibbonit Orankit Gorillat - Simpanssit Radiopainike, jolla säädellään maksutapaa Visa MasterCard - American Express Summakenttä, eli paljonko rahaa lahjoitat Tekstialue, jossa vapaa sana ja terveiset apinatalon arkkitehdille Ja pudotusvalikko, jossa valitset nimen tulevalle talolle: Apinalaakso Monkey Valley Affenhaus Apornas Hus Lopuksi lähetys- ja nollauspainikkeet 19

20 Valmis lomake (ilman tyylejä) Seuraavaksi pitäisi lisätä Method ja Action Actioniksi Methodiksi post, voit myös kokeilla get-arvoa, niin näet kuinka arvo kirjoitetaan URLiin 20

21 Koodi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>apinatalon tukilomake</title> </head> <body> <form id= apinatalo" method="post" action=" <fieldset> <table border="1"> <tr> <td>etunimi</td> <td><input name="etunimi" type="text" id="etunimi" size="40" maxlength="40" /></td> </tr> <tr> <td>sukunimi</td> <td><input name=" sukunimi" type="text" id= sukunimi" size="40" maxlength="40" /></td> </tr> <tr> <td>salasana</td> <td><input name= salasana" type="password" id= salasana" size="40" maxlength="40" /></td> </tr> 21

22 jatkuu <tr> <td>tuettavat apinalajit</td> <td> <input type="checkbox" name="gibbonit" id="gibbonit" /> <label for= gibbonit >Gibbonit</label><br/> <input type="checkbox" name="orankit" id="orankit" /> <label for= orankit >Orankit</label><br/> <input type="checkbox" name="gorillat" id="gorillat" /> <label for= gorillat >Gorillat</label><br/> <input type="checkbox" name="simpanssit" id="simpanssit" /> <label for= simpanssit >Simpanssit</label> </td> </tr> 22

23 jatkuu <tr> <br/> <br/> <br/> </td> <td>maksutapa</td> <td> </tr> <input type="radio" name= maksutapa" value= Visa" id="visa /> Visa <input type="radio" name= maksutapa" value= Mastercard" id="mastercard" /> Mastercard <input type="radio" name= maksutapa" value= AmExpress" id="amexpress" /> American Express 23

24 jatkuu <tr> <td>summa</td> <td><input name= summa" type="text" id= summa" size="40" maxlength="40" /></td> </tr> <tr> <td>vapaa sana arkkitehdille</td> <td><textarea name="vapaasana" id="vapaasana" cols="45" rows="6"></textarea></td> </tr> <tr> <td>haluamasi nimi talolle</td> <td><select name="talonnimi" id="talonnimi"> <option value="apinalaakso">apinalaakso</option> <option value="monkeyvalley">monkey Valley</option> <option value="affenhaus">affenhaus</option> <option value="apornashus">apornas Hus</option> </select></td> </tr> 24

25 Loput roinat <tr> <td colspan="2"> <input type="submit" name="submit" id="submit" value="lähetä" /> <input type="reset" name="peruuta" id="peruuta" value="peruuta" /> </td> </tr> </table> <fieldset> </form> </body> </html> 25