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.

Esimerkki erilaisista lomake-elementeistä. Välttämättä esimerkin elementin käyttäminen asian kysymiseen ei ole paras vaihtoehto, koska lomakkeen elementtejä on käytetty ainoastaan esimerkin omaisesti.
Esimerkki yksinkertaisesta lomakkeesta.
Esimerkki valintaruudun (engl. checkbox) ja -napin (engl. radiobutton) käytöstä
Esimerkki valintalistan käytöstä.
Esimekki laajemman tekstikentän käytöstä.
Esimerkkejä piilokenttien käytöstä.

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ä.

type - attribuutti voi saada seuraavia arvoja:
```
type= text | password | checkbox | radio | submit | reset |
       file | hidden | image | button 
```
- text - Vapaamuotoinen tekstikenttä.
- submit - Lomakkeen hyväksymispainike.
- reset - Lomakkeen tyhjentämiseen tarkoitettu painike.
- hidden - Piilotettua tietoa varten. Voidaan käyttää esimerkiksi lomakkeen käsittelevän ohjelman ohjaamiseen.
- radio - Yksivalintainen kontrolli. Kätevä pienissä listoissa.
- checkbox - Monivalintainen. Kätevä pienissä listoissa.

Muutamia muita `input`-elementin attribuutteja

value - yleensä oletusarvo elementille. Valintaruudussa ja -napissa välitettävä arvo.
name - määrittää elementille nimen.
size - kertoo elementin pituuden.
maxlength - kertoo elementin maksimipituuden (text, password).
checked - kertoo elementin (radio, checkbox) olevan valittu (checked="checked").
Esimerkki yksinkertaisesta lomakkeesta.
Esimerkki valintaruudun (engl. checkbox) ja -napin (engl. radiobutton) käytöstä

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ä

Vapaamuotoinen tekstikenttä.
Pelkästään yleisen tiedon kyselyyn.
Tekstikentän koko voidaan määritellä tarkkaan.
Esimerkki laajemman tekstikentän käytöstä.

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

Lomakkeet - TIEKE
How to Create Accessible Forms - Paul Bohman
Accessible Forms - James W. Thatcher

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
- Lähettää lomakkeen sisällön URL:n mukana.
```
http://palvelin/ohjelma.cgi?nimi=Heinonen+Petri&email=peheinon@mit.jyu.fi
```
- Lomakkeen tiedot siis näkyvät osoitteen perässä selainikkunassa.
- Käytetään esimerkiksi palveluissa, joihin voidaan viitata helposti myös toisilla lomakkeilla.
- Ei kannata käyttää suuremman tiedon siirtämiseen. (Kokorajoitus)

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!

Tiedostojen ja hakemistojen oikeudet oikein!
- Hakemistolle kaikille ainoastaan ajo-oikeus (x).
- Tiedostolle kaikille ainoastaan ajo-oikeus (x).
- Ei oikeuksia tarpeettomasti millekään ryhmälle.
Käyttäjän syöte tutkittava ainakin seuraavien erikoismerkkien varalta.
```
 & ; ´ ` \ " * ? ~ < > ^ () [] {} $ \n \r
```
Ymmärrä valmiiden ohjelmien toiminta ennen käyttöönottoa!
Lomakkeelta tulevia asioita ei saa laittaa suoraan komentoriville!
Kokoa skriptit yhden hakemiston alle.
Älä pidä skriptien keskeneräisiä versioita näkyvillä.
Käytä käännettäviä kieliä tulkittavien sijaan, jos mahdollista.

Syventävää luentomateriaalia

Seuraavaan listaan on koottu lisämateriaalia luennon asioista:

http://appro.mit.jyu.fi/tietoverkot/luennot/luento8/