Luento 8 - WWW-lomakkeet

Luennolla näytetyt lomake-esimerkit

Mihin WWW-lomakkeita voi käyttää?

Hyödyt

Tiedot saadaan talteen sähköisessä muodossa.
- Jatkokäsittely on vaivattomampaa
- Ei tarvitse käsitellä "paperisaastetta".
- Varmempi tapa tietojen keräämiseen kuin mailto-linkki.
Ajasta riippumattomuus.

Haitat

Tietojen mahdollinen häviäminen.
Helppo jättää täyttämättä.
Lomakkeen käsittelevä ohjelma on monimutkainen

Lomakkeen tekeminen

Seuraavassa kuvassa on nähtävillä yleisimmät lomakkeella käytettävät elementit sekä input-elementit erilaiset tyypit.
lomake-elementit

form

Kaikki lomakkeen kentät form-elementin sisään!
Attribuutit
- Action - eri mahdollisuudet
- Method
Esimerkki yksinkertaisesta lomakkeesta.

Metodit

post

Lähettää lomakkeen sisällön siten, että se pitää lukea STDIN:stä.
Kaikki isompi siirtäminen tehdään näin!

get

Lähettää lomakkeen sisällön URL:n mukana ympäristömuuttujaan.

http://palvelin/ohjelma.cgi?nimi=Heinonen+Petri&email=peheinon@mit.jyu.fi

Lomakkeen tiedot näkyvät osoitteen perässä selainikkunassa.
Ei kannata käyttää suuremman tiedon siirtämiseen. (Kokorajoitus)

label

Elementtien otsikkokenttä.
Liitetään elementtiin for-attribuutilla elementin id-attribuuttiin.
Esimerkki labeleiden käytöstä

input

Attribuutit
- type - Mahdollistaa hyvin monipuolisten lomake-elementtien tekemisen.
```
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. Esimerkiksi CGI:n konfigurointia varten.
  - radio - Yksivalintainen kontrolli. Kätevä pienissä listoissa.
  - checkbox - Monivalintainen. Kätevä pienissä listoissa.
- value - Yleensä oletusarvo elementille. Valintaruudussa ja -napissa välitettävä arvo.
- name - Yhdistää elementin nimen ja arvon.
Esimerkki yksinkertaisesta lomakkeesta.
Esimerkki valintaruudun ja -napin käytöstä

select - valintalista

Erilaisia monivalintoja varten
Todella tilaa säästävä
Monivalinnan mahdollisuus. Monipuolisempi kuin valintaruutu tai -nappi.
Listan ryhmittely mahdollista (optgroup).
Esimerkki valintalistan käytöstä.

textarea

Vapaamuotoinen tekstikenttä.
Pelkästään yleisen tiedon kyselyyn.
Esimerkki laajemman tekstikentän käytöstä.

Lomakkeen käytettävyyden ja esteettömyyden lisääminen

Kenttien oletusarvot
Title-elementin käyttäminen kentässä
Elementtin ryhmittely
- Selkeyttää kyselylomaketta huomattavasti!
- Ryhmittely onnistuu fieldset-elementillä.
- legend-elementillä annetaan ryhmälle otsikko.
accesskey-omaisuuden käyttäminen
tabindex-ominaisuuden käyttäminen

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 lähettäminen vastaanottajalle

Lomakkeen tietojen lähettämisessä kannattaa käyttää CGI-ohjelmaa.

Mailto - Älä käytä ellei pakko!

<form action="mailto:peheinon@mit.jyu.fi" method="post">

Ongelmat

Vaatii käyttäjältä selaimen konfigurointia!
Application/X-WWW-FORM-URLENCODED
Tilattu+auto=Mik%E4+rotisko%3F

Enctype-attribuutti helpottaa tilannetta

<form action="mailto:peheinon@mit.jyu.fi" enctype="text/plain" method="post">

Tilattu auto=Mikä rotisko?

CGI-ohjelma

<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/2001/syksy/tietoverkot/luennot/luento8/index.html