WWW-lomakkeet - luento 8
Seuraavassa käsitellään WWW-lomakkeiden tekemistä ja niiden käyttämistä erilaisten kyselyjen tekemiseen.
Luennolla näytetyt lomake-esimerkit
Seuraavaan on listattu kaikki luennolla läpikäydyt esimerkit lomakkeista.
Mihin WWW-lomakkeita voi ja kannattaa käyttää?
Lomakkeita voi käyttää kaikenlaisten tietojen kysymiseen sivuston käyttäjiltä.
Lomakkeita voi käyttää WWW-sivuilla esimerkiksi seuraavissa tehtävissä.
- Erilaisten kyselyjen tekemiseen vs. sähköposti
- Yhteydenottopyynnön tekeminen vs. sähköposti
- Sivuston tai tapahtuman palautelomakkeena vs. sähköposti
- Tiedonhakuun sivustolta vs. sivukartta
- Tilausten vastaanottaminen vs. perinteinen tilauslomake
Lomakkeiden käytössäkin kannattaa pitää järki mukana,
koska niille kannattaa aina järjestää vaihtoehtoinen tapa.
Palautelomakkeen vaihtoehtona toimii hyvin esimerkiksi suora
sähköpostiosoite, puhelinnumero tai postiosoite.
WWW-lomakkeella saavutettavat hyödyt
- Tiedot saadaan talteen sähköisessä muodossa.
- Jatkokäsittelystä saadaan yksi työläs vaihe pois.
- Ei tarvitse käsitellä vastauspapereita.
- Arkistointi voidaan automatisoida.
- Toimii ohjelmarippumattomasti (vrt. mailto-linkki)
- Ajasta riippumattomuus.
WWW-lomakkeen käytöstä aiheutuvat haitat
- Käyttöliittymänä hyvin rajallinen ja hankala.
- Ei välttämättä saada omaa kopiota (esimerkiksi tilaus).
- Tietojen mahdollinen häviäminen bittitaivaaseen.
- Helppo jättää täyttämättä.
- Varmuuden lisäämiseksi tarvitaan erillinen lomakkeen käsittelevä ohjelma.
- Lomakkeen käsittelevä ohjelma on kohtuullisen monimutkainen itse tehtynä.
Lomakkeen tekeminen
Lomakkeiden tekemisessä kannattaa pitää mielessä seuraavat asiat:
- Tee lomakkeesta yksinkertainen!
- Älä "kikkaile" liikaa lomake-elementteillä!
Seuraavassa kuvassa on nähtävillä yleisimmät lomakkeella käytettävät elementit
sekä input-elementin erilaiset tyypit.
Seuraavassa käydään esimerkkien avulla tarkemmin läpi lomake-elementtejä ja niiden toimintaa.
form - lomake
- Kaikki lomakekentät täytyy laittaa form-elementin sisään.
- form-elementin sisään vain lomakkeeseen liittyviä asioita.
- form-elementin muutamia attribuutteja
- action sisältää osoitteen lomakkeen käsittelijään.
Attribuutin käyttöön on olemassa eri mahdollisuuksia,
joista kerrotaan myöhemmin.
- method attribuutilla voidaan määritellä millä metodilla data toimitetaan käsittevälle ohjelmalle.
Mahdollisia arvoja ovat post ja get. Metodien erot käydään läpi myöhemmin.
- Esimerkki yksinkertaisesta lomakkeesta.
label - kentän otsikko
- label toimii lomake-elementtien otsikkokenttänä.
- label yhdistetään for-attribuutilla lomake-elementin id-attribuuttiin.
- Esimerkki label-elementin käytöstä.
input - text, radio, checkbox, hidden ja submit
input-elementin avulla lomakkeelle saadaan toteutettua useita
erilaisia lomakekenttiä. Muuttamalla elementin type-attribuutin
arvoa saadaan elementistä tehtyä seuraavassa lyhyesti esiteltäviä lomakekenttiä.
Muutamia muita input-elementin attribuutteja
select - valintalista
select-elementtiä käytetään erilaisten valintalistojen tekemiseen.
Valintalistoilla saadaan määriteltyä vaihtoehtoisia valintoja tai pystytään käyttämään useamman asian valitsemiseen.
option-elementtien sisälle määritellään valintalistaan liittyvät valinnat.
Valintalistajen käytöllä saavutetaan seuraavia hyviä ja huonoja puolia:
- Säästävät tilaa esimerkiksi radio- tai checkbox-elementtiin verrattuna.
- Monivalinnan mahdollisuus, mutta monille käyttäjille hieman vaikea (CTRL-näppäin).
- Listan ryhmittelyä kannattaa käyttää selkeyttämään listaa (optgroup).
- Pitkät valintalistat ovat todella huonoja käytettävyyden kannalta.
- Esimerkki valintalistan käytöstä.
Valintalistaan liittyviä attribuutteja
- select-elementin attribuutteja
- name-attribuutilla annetaan nimi.
- multiple-attribuuttilla kerrotaan, että aktiiviseksi voidaan valita useampia listan kohtia (multiple="multiple")
- size-attribuutilla voidaan määritellä valintalistassa yhtäaikaa näytettävien lomakenttien määrä.
Jos size on määritelty, niin listaa en näytetä valintalistana,
vaan listaa voidaan ainoastaan vierittää.
- option-elementin attribuutteja
- selected-attribuutilla määritellään oletusvalinta valintalistaan (selected="selected").
- value-attribuutilla määritellään valinnan antama arvo.
- optgroup-elementin attribuutteja
- label-attribuutilla (optgroup) määritellään listassa näkyvän
ryhmän nimi.
textarea - tekstikenttä
Seuraavassa muutamia textarea-elementin attribuutteja
- name-attribuutilla annetaan nimi.
- rows-attribuutilla määritellään kentässä näkyvien rivien lukumäärä.
- cols-attribuutilla määritellään kentässä näkyvien merkkien lukumäärä.
button - yleispainike
Seuraavassa esimerkissä liitetään submit-painikkeen yhteyteen kuva.
<button name="submit" type="submit">
<img src="kuva.jpg" alt="Lähetä" />
</button>
fieldset ja legend - lomakkeen rakenne
Lomakkeen rakennetta voidaan selkeyttää fieldset- ja legend-elementtien avulla.
- fieldset-elementillä määritellään lomake-elementit kuulumaan samaan ryhmään.
- Ryhmiä kannattaa miettiä esimerkiksi lomakkeen kysymyksien aihealueen mukaisesti.
- legend-elementillä määritellään lomakeryhmän (fieldset) otsikko.
- Esimerkki ryhmittelyn käytöstä. Ryhmittelyä on käytetty kaikissa edellisissä esimerkeissä.
Lomakkeen käytettävyyden ja esteettömyyden parantaminen
Seuraavaan on koottu erilaisia lomakkeiden tekemisessä huomioitavia asioita
lomakkeiden esteettömyyden ja käytettävyyden lisäämiseksi.
- Lomakkeita ei saa taittaa tauluilla!! (Otsikot ja kentät eivät tällöin yhdisty!)
- Vain yksi lomake-elementti yhdellä rivillä!
- Lomakkeessa eteneminen täyttöjärjestyksessä täytyy olla mahdollista TAB-näppäimen avulla.
Lomake-elementit kannattaa laittaa siihen järjestykseen kuin ne täytettään.
- tabindex-ominaisuudella voidaan tarvittaessa määrittää lomakekenttien läpikäyntijärjestys.
- Lomakkeeseen (form) vain lomake-elementit ja niihin liittyvät täyttöohjeet.
- Ennen lomaketta on kerrottava kaikki täytössä tarvittavat tiedot.
- Ennen lomake-elementtiä tieto lomakkeeseen syötettävästä tiedosta ja sen muodosta.
- Helposti syötettäviä arvoja (esim. kuukaudet tai päivät) tekstikentiksi valintalistojen sijaan.
- Lomakkeen viimeiseksi elementiksi lähetyspainike (submit).
- Älä laita lomakkeelle tyhjennä-painiketta (reset)!
- Lisää lomakkeen kenttiin oletusarvot.
- title-elementillä voidaan selventää lomakkeen kentän merkitystä.
- Ryhmittele samaan asiaan liittyvät kenttäelementit (fieldset ja legend) sekä valintalistan kohdat (optgroup)
- accesskey-omaisuudella lomakkeen kentille voidaan määrittää pikanäppäinkomennot.
Ongelmista, joita tulee luettaessa lomake puhesynteesin avulla kertoo hyvin TIEKEn artikkeli
"Lomake luettuna" osoitteessa
<URL: http://www.tieke.fi/esteettomyysopas/3.10.html#lomkuv>.
Erilaisia ohjeita ja vihjeitä lomakkeiden suunnitteluun
Lomakkeen toiminta
- Selainohjelma pyytää palvelimelta lomakesivun.
- Palvelin toimittaa sivun selaimelle.
- Käyttäjä täyttää ja hyväksyy lomakkeen.
- Selain lähettää lomakkeen tiedot WWW-palvelimella sijaitselle CGI-ohjelmalle.
- Lomakkeella oleva data käsitellään CGI-ohjelman tekijän haluamalla tavalla.
Esimerkiksi seuraavasti:
- Erikoismerkit ja välilyönnit palautetaan takaisin.
- Voidaan tehdä tarpeelliset tarkistukset syötteelle.
- Jaetaan data halutulla tavalla.
- Tiedot lähetetään edelleen sähköpostitse.
- Tallennetaan tekstitietokannaksi.
- Tallennetaan suoraan WWW-sivuksi.
- CGI-ohjelma palauttaa käyttäjälle tietoja
- Kiitoksen esimerkiksi tilauksesta.
- Varmistuksen onnistumisesta.
- Tilauksen tai palautteen sisällön.
- Lomakkeen tietojen jatkokäsittelyyn käytetään erilaisia ohjelmistoja.
Lomakkeen tietojen lähettäminen vastaanottajalle
Seuraavassa käydään läpi erilaisia tapoja lähettää lomakkeen
tiedot vastaanottajalle.
Lähettämisessä käytettävät metodit
Lomakkeen tietojen lähettämiseen on kaksi erilaista metodia, joilla
kummallakin on oma käyttökohteensa. Metodien välinen ero huomioidaan
lomakkeen tiedot vastaanottavassa ohjelmassa.
- post-metodi
- Käytetään silloin, kun ei haluta tietoja URL:n joukkoon tai kun lähetettävä tietomäärä on suuri.
- Yleensä se "parempi" tapa!
- get-metodi
Tietojen lähettäminen suoraan sähköpostiin
Lomakkeen tiedot voidaan lähettää suoraan sähköpostiin seuraavan määrityksen avulla.
<form action="mailto:peheinon@mit.jyu.fi" method="post">
Tavan käyttäminen ei kannata, ellei ole aivan pakko, koska tavassa piilee seuraavia ongelmia.
- Vaatii käyttäjältä selaimen konfigurointia!
- Ongelmia voi myös esiityä lähetettävän tiedon muodossa!
Tietojen lähettäminen CGI-ohjelmalle
CGI-ohjelmalla mahdollistetaan tietojen jatkokäsittely mahdollisimman luotettavasti.
Jos suinkin mahdollista, niin jonkinlaista CGI-ohjelmaa kannattaa käyttää tietojen vastaanottamisessa.
<form action="http://appro.mit.jyu.fi/cgi-bin/laheta/laheta.cgi" method="post">
<input type="hidden" name="lomake_email" value="peheinon@mit.jyu.fi">
- Ei vaadi käyttäjältä selaimen konfigurointia!
- Voidaan antaa käyttäjälle palautetta!
- Varmin tapa saada tieto perille!
CGI-ohjelmien mukana tulevat tietoturvaongelmat
Jokainen käyttäjä voi tehdä oman lomakkeen, jolla kutsuu tekemääsi CGI-ohjelmaa!
Syventävää luentomateriaalia
Seuraavaan listaan on koottu lisämateriaalia luennon asioista: