© Helsingin liiketalouden ammattikorkeakoulu, 2005 0 LOMAKKEET Käytetään vuorovaikutukseen Käyttäjä täyttää lomakkeen ja selainohjelma lähettää tiedot.

Esitys aiheesta: "© Helsingin liiketalouden ammattikorkeakoulu, 2005 0 LOMAKKEET Käytetään vuorovaikutukseen Käyttäjä täyttää lomakkeen ja selainohjelma lähettää tiedot."— Esityksen transkriptio:

1 © Helsingin liiketalouden ammattikorkeakoulu, 2005 0 LOMAKKEET Käytetään vuorovaikutukseen Käyttäjä täyttää lomakkeen ja selainohjelma lähettää tiedot HTTP-palvelimelle tai SMTP-palvelimelle (sp) Lomake koostuu kahdesta elementistä lukijalle näkyvä lomake ohjelmisto, joka käsittelee lomakkeen Lomake sisältää syötekenttiä, jotka käyttäjä täyttää tai valitsee sisällön esim. checkbox.

2 © Helsingin liiketalouden ammattikorkeakoulu, 2005 1 Lomakkeet Luodaan form-elementin sisään … Esim. <form name = "asuntohakemus" action = "http//www.jotain.fi/jotain/…." method = "POST"> …

3 © Helsingin liiketalouden ammattikorkeakoulu, 2005 2 Form: name, action name: lomakkeen nimi, tarvitaan esim. scripteissä action: ohjelman, scriptin tai sp-osoite, mihin lomake lähetetään ja missä se käsitellään

4 © Helsingin liiketalouden ammattikorkeakoulu, 2005 3 Form: method method: post: lomakkeen tiedot lähetetään body-osassa  pituus ei rajoitettu  suositeltava get: lomakkeen tiedot lähetetään URL-osoitteen osana ? -merkillä erotettuna, max 255 merkkiä, ei suositella Salasanakentän sisältö näkyy

5 © Helsingin liiketalouden ammattikorkeakoulu, 2005 4 Form: enctype, onsubmit enctype text/plain: kun lähetetään lomakkeen tiedot sp-osoitteeseen multipart/form-data: lomakkeen mukana lähetetään tekstitiedosto onsubmit: toiminto, jonka selain suorittaa suorittaa ennen lomakkeen lähestystä onreset: toiminto, jonka lomakkeen alustus aiheuttaa

6 © Helsingin liiketalouden ammattikorkeakoulu, 2005 5 Lomakekentät (field, control) Syöte eli input-kentät tekstikenttä salasanakenttä checkbox radio submit (Lähetä) ja reset (Tyhjennä) -painikkeet Select- valintalista Textarea

7 © Helsingin liiketalouden ammattikorkeakoulu, 2005 6 Lomakekentät Lomakekenttiä ovat input select textarea button Kentille annetaan nimi name-attribuutilla (määritteellä) Kentillä voi olla alkuarvo ja kunkinhetkinen nykyarvo, joka annetaan value-attributilla

8 © Helsingin liiketalouden ammattikorkeakoulu, 2005 7 Syöte- eli Input-kenttien tyypit Syötekentät=Input-elementin type-attribuutin arvot 1. text: tekstikenttä 2. password: salasana 3. hidden: piilotiedosto 4. checkbox: valintaruutu 5. radio: valintapainike 6. submit: lähetys-painike 7. reset: tyhjennys-painike 8. button: painike 9. image:kuva 10. file: linkitettävä tiedosto

9 © Helsingin liiketalouden ammattikorkeakoulu, 2005 8 Syötekenttien attribuutit type: kentän tyyppi name: syötekentän nimi size: selaimessa näkyvän kentän koko maxlength: syötettävän tiedon maksimi- pituus. Jos tieto ei mahdu kenttään, kenttää vieritetään value: elementin sisällön alkuarvo  painikkeisiin lisätään haluttu teksti

10 © Helsingin liiketalouden ammattikorkeakoulu, 2005 9 Syötekenttien attribuutit readonly  value-attribuutilla annetun alkuarvon muuttaminen estetty  käytetään tiedon välittämiseen lomakkeelta toiselle  (input ja textarea-kentissä) disabled: kentän käyttö estetty (input, select, textarea, option, button) checked: oletusvalinta tabindex: tabulointijärjestys tapahtuma-attribuutit: onblur, onfocus, onselect, onchange

11 © Helsingin liiketalouden ammattikorkeakoulu, 2005 10 Tekstikenttä: text Attribuutit name: syötekentän nimi. Liitetään lomakkeen lähettämisen yhteydessä kentän arvon (lomakkeessa syötetyn tiedon) yhteyteen Jos esimerkkilomake lähetetään sähköpostiosoitteeseen Nimi-kentän tiedot näkyvät viestissä seuraavasti: Nimi: Matti Mainio size: selaimessa näkyvän kentän koko maxlength: syötettävän tiedon maksimipituus. Jos tieto ei mahdu kenttään, kenttää vieritetään

12 © Helsingin liiketalouden ammattikorkeakoulu, 2005 11 Tekstikenttä: text Attribuutit value: kentässä näkyvä sisältö readonly: value-attribuutilla annetun alkuarvon muuttaminen estetty disabled: kentän käyttö estetty

13 © Helsingin liiketalouden ammattikorkeakoulu, 2005 12 Salasanakenttä, piilokenttä Salasana-kenttä on muuten kuten tekstikenttä tyyppi password Kenttään syötetty arvo näkyy salattuna Piilokentän sisältö ei näy selaimessa. Piilokentässä lähetetään tietoa palvelimelle. seuraavassa välitetään piilokentässä palvelimelle sähköpostiosoite, mihin lomakkeen tiedot lähetetään. maija.maki@yritys.fi

14 © Helsingin liiketalouden ammattikorkeakoulu, 2005 13 Checkbox Valintaruutu: voidaan valita useita vaihtoehtoja Lomaketta lähetettäessä lähtee arvopari Koko: 1h Attribuutit name-attribuutin arvo sama kaikilla ryhmän vaihtoehdoilla value-attribuutti sisältää vaihtoehdon arvo 1h

15 © Helsingin liiketalouden ammattikorkeakoulu, 2005 14 Checkbox Attribuutit checked: valmiiksivalittu vaihtoehto merkitään label: merkkaa selitetekstit käyttämällä label-elementillä  valintanapeissa ja –ruuduissa vaihtoehdon voi valita napsauttamalla selitettä (ei pelkästään ruutua) id: määritä id, jos käytät label-attribuuttia 1h

16 © Helsingin liiketalouden ammattikorkeakoulu, 2005 15 Radio-button Voidaan valita vain yksi vaihtoehto Attribuutit: name, value, checked, id, label kuten checkbox valintanappien ryhmässä tulisi olla yksi vaihtoehto valmiiksi valittuna Lomaketta lähetettäessä lähtee arvopari Omistusmuoto: Osaomistus Osaomistus <input id="os" type="radio" name="Omistusmuoto" value="Osaomistus” checked=”checked” /> Osaomistus

17 © Helsingin liiketalouden ammattikorkeakoulu, 2005 16 File Lomakkeen mukana lähetettävä tekstitiedosto Enctype-attribuutin arvoksi multipart/form …. Valitse tiedosto …

18 © Helsingin liiketalouden ammattikorkeakoulu, 2005 17 Submit, reset Submit lähettää lomakkeen action-attribuutilla määritettyyn osoitteeseen annetulla method:lla reset: tyhjentää lomakkeen …

19 © Helsingin liiketalouden ammattikorkeakoulu, 2005 18 Image, button Image: kuvatiedosto, johon voidaan liittää lähetä tai tyhjennä -toiminto Button:painike. Käytetään esim. JavaScriptien toimeenpanijana

20 © Helsingin liiketalouden ammattikorkeakoulu, 2005 19 Syötekenttien attribuutit Tapahtuma-attribuutit: onblur: aktiivinen kenttä muuttuu ei- aktiiviseksi onfocus: osoitin viedään kenttään: onfocus="select()”: valitsee kentän onclick: hiiren napsautus onchange: elementin arvo on muuttunut  käytetään input, select, textarea, button, label onselect: valitsee syötekentän  input, textarea ks. lisää suosituksesta

21 © Helsingin liiketalouden ammattikorkeakoulu, 2005 20 Pudotusvalikko, select valitaan yksi vaihtoehto monivalintalista: voi valita useita vaihtoehtoja Espoo Helsinki Vantaa Muu pääkaupunkiseutu Espoo Helsinki Vantaa Muu pääkaupunkiseutu

22 © Helsingin liiketalouden ammattikorkeakoulu, 2005 21 Select: attributit name: kentän nimi multiple: voi valita useita vaihtoehtoja size: pudotusvalikon korkeus riveinä. Jos size-attribuutin arvo > 1, toteutetaan yleensä listana Jos voi valita useita vaihtoehtoja, valikon korkeus > 1 width: leveys disabled tabindex

23 © Helsingin liiketalouden ammattikorkeakoulu, 2005 22 Select: option Attribuutit: value, selected, label, disabled Espoo Helsinki Vantaa Muu pääkaupunkiseutu

24 © Helsingin liiketalouden ammattikorkeakoulu, 2005 23 Textarea usean rivin tekstikenttä attribuutit: name, rows, cols Kirjoita toivomuksia

25 © Helsingin liiketalouden ammattikorkeakoulu, 2005 24 Lomakkeen laatiminen checkbox, radio ja pudotusvalikoiden vaihtoehdot nousevaan järjestykseen: aakkos- tms. järjestykseen kentän nimi ennen textboxia, ei kaksoispistettä nimen jälkeen checkbox tai radio-painike aina, jos vaihtoehtoja vähän eli vaihtoehdot näkyviin pudotusvalikko vain pitkissä listoissa EI: Haluan tilata tuotteen Kyllä Ei VAAN: Haluan tilata tuotteen Tyhjennä-painiketta ei loppuun Lähetä-painikkeen lähelle, vaan esim. alkuun ja erinäköisenä kuin Lähetä

26 © Helsingin liiketalouden ammattikorkeakoulu, 2005 25 Fieldset, legend Fieldset kokoaa lomakkeen kenttiä kokonaisuudeksi pakollinen legend-elementti selaimet piirtävät reunaviivan sisällön ympärille sopii valinta- ja asetusnappien kokoamiseen Omistusmuoto Omistusasunto Osaomistus Vuokra-asunto

27 © Helsingin liiketalouden ammattikorkeakoulu, 2005 26 Lomaketyylit input ja textarea-kentän fontin suurentaminen input, select, text-area { font-size:100%; font-weight: 100; } checkboxin ja radio-buttonin suurentaminen input.box { width: 1.5em; height: 1.5em; } Koko 1.5em

28 © Helsingin liiketalouden ammattikorkeakoulu, 2005 27 Lomaketyylit lomakkeen muotoilu: taustaväri form { background: #efe; color: black; border: solid thin gray; padding: 0.4em;} tyhjennä-napin muotoilu input.reset { background: white; color: #c00; font-style: italic; } lähetä-napin muotoilu input.submit { border-width: 0.3em; }

29 © Helsingin liiketalouden ammattikorkeakoulu, 2005 28 Lomakkeen rajoituksia Syötetietoja ei voi rajoittaa. Syötetietoja ei voi esikäsitellä. Kenttien olemassaoloa ei voit tehdä riippuvaiseksi siitä, mitä toisessa kentässä tehdään. Kentän sisältöä ei voi tehdä riippuvaiseksi toisen kentän sisällöstä (JavaScript?). Lomaketta ei voi helposti tulostaa paperille Lomakkeen tietoja ei voi tallentaa käyttäjän koneelle.

30 © Helsingin liiketalouden ammattikorkeakoulu, 2005 29 Mihin lomake ei sovi Ei paperille tulostettavaksi ja täytettäväksi Ei hyvin ruudulla täytettäväksi ja tulostettavaksi Tarkoitettu täytettäväksi ruudulla ja lähetettäväksi verkon yli, allekirjoitusta ei saa mukaan