Lomakkeen perusominaisuudet
Tässä luvussa esitellään XHTML Basic-suosituksen mukaisen lomakkeen sisältämät elementit ja ominaisuudet. Luvussa 0.3 esitellään lomakkeen ominaisuuksia XHTML Basic-suositusta laajemmin.
Lomake - form
form-elementti määrittelee lomakkeen varsinaisen alkamis- ja loppumiskohdan. form-elementin sisään sijoitetaan kaikki varsinaiset lomake-elementit (tekstikentät, valintaruudut, yms.), jotka tulevat näkyviin lomakkeelle. form-elementin attribuuteilla eli ominaisuuksilla voidaan määritellä tarkemmin lomakkeen käyttäytymistä. Seuraavassa lyhyt esimerkki form-elementin käytöstä:
<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN""http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi"><head><title>Esimerkkilomake</title></head><body><h1>Esimerkkilomake</h1><form action="http://palvelin/teepase.cgi" method="post">.. lomake-elementit tulevat tänne..</form></body></html>
action-attribuutti
action-attribuutti kertoo lomakkeelle osoitteen, jossa lomakkeen käsittelevä CGI-ohjelma sijaitsee. Seuraavassa muutama esimerkki action-attribuutin käytöstä. Ensimmäisessä esimerkissä on perinteinen absoluuttinen hakemistoviittaus ohjelmaan, joka käsittelee lomakkeelle syötetyn datan.
<form action="http://palvelin/teepase.cgi" method="post">Toinen esimerkki on tilanteesta, jossa lomakkeen sisältö lähetetään suoraan sähköpostitse lomakkeen tekijälle. Tämä tapa on huomattavasti epävarmempi kuin tietojen lähettäminen ohjelmalle, koska selaimen asetusten täytyy olla oikein ennen tiedon lähettämistä sähköpostitse sekä selaimen on tuettava kyseistä tapaa. Varmin ja monipuolisin tapa on käyttää lomakkeen käsittelyyn jotakin erillistä ohjelmaa, kuten tehtiin ensimmäisessä esimerkissä.
<form action="mailto:peheinon@mit.jyu.fi" method="post"> Edellisen esimerkin mukaisesti lähetettynä data tulee koodattuna (application/x-www-form-urlencoded) sähköpostitse, joten se ei ole sellaisenaan kovinkaan käyttökelpoinen. Seuraavassa on esitetty muoto, jossa data tulee sähköpostitse. Datan lähettämiseen on käytetty lomaketta, jonka rakenteesta löytyy kuvaus tämän luvun lopusta. Lomakkeen kenttinä kysyttiin käyttäjän nimeä, sähköpostiosoitetta ja kommenttia.
Nimi=Etunimi+Sukunimi&email=Sahk%F6postiosoite&kommentti=t%E4h%E4n+kommentti&laheta=L%E4het%E4+kommenttisiKolmannessa esimerkissä form-elementissä käytetään enctype-attribuuttia, jonka avulla saadaan lomakkeen tiedot selvemmässä muodossa nähtäville. Kyseessä on ainoastaan pieni parannus edellisen esimerkin tapaukseen, koska enctype-attribuutin käyttö ei poista selaimen toiminnasta aiheutuvaa epävarmuutta.
<form action="mailto:peheinon@mit.jyu.fi" method="post" enctype="text/plain">Seuraavassa lomakkeen tiedot, jotka tulevat sähköpostitse edellisen esimerkin enctype-attribuutin arvoa käyttämällä.
Nimi=Etunimi Sukunimiemail=Sahköpostiosoitekommentti=tähän kommenttilaheta=Lähetä kommenttisi
Antamalla enctype-attribuutin arvoksi multipart/form-data voidaan lähettää lomakkeelta sähköpostitse myös liitetiedosto, mutta tavan toiminta on edelleenkin kiinni selaimesta.
method-attribuutti
method-attribuutti kertoo kuinka lomakkeen sisältämä data toimitetaan datan käsittelevälle ohjelmalle. Attribuutin mahdolliset arvot ovat post ja get.
method-attribuutti arvolla get saa aikaan lomakkeella olevien tietojen siirtämisen URL:n yhteydessä. Seuraavassa on esitelty muoto, jossa tiedot siirretään lomakkeen käsittelevälle ohjelmalle. Lomakkeelta siirrettävät tiedot ovat nähtävillä selaimen osoitepalkissa (location, address). Esimerkkinä on käytetty luvun lopussa kuvattua lomaketta.
http://palvelin/teepase.cgi?Nimi=Etunimi+Sukunimi&email=Sahk%F6postiosoite&kommentti=t%E4h%E4n+kommentti&laheta=L%E4het%E4+kommenttisiURL:n mukana tulevien tietojen muoto näyttää ensi silmäyksellä sekavalle. Kuitenkin sieltä on helposti erotettavissa lomakkeen tiedot. Lomakkeen käsittelevän ohjelman osoite ja lomakkeen tiedot on erotettu kysymysmerkillä (?). Eri kenttien tiedot on erotettu et-merkillä (&). Lomakkeen nimi ja arvo on erotettu yhtä suuri kuin -merkillä (=). Lomakkeessa olevat skandit (ä,ö,å) ja erikoismerkit on koodattu heksadesimaaliluvuiksi ja välilyöntien paikalla on plus-merkki (+).
-metodin käyttäminen soveltuu ainoastaan hyvin pienille lomakkeille, koska kaikki sen sisältämät tiedot siirretään URL:n mukana. Joissakin tapauksissa, joissa lomakkeen toiminta halutaan tallentaa selaimen kirjanmerkkeihin, kannattaa käyttää -metodia.
post-metodia käytettäessä tiedot eivät siirry URL:n mukana, vaan vastaanottavan ohjelman on luettava ne STDIN-muuttujasta. post-arvoa kannattaa käyttää erityisesti suuren tietomäärän siirtämiseksi lomakkeelta käsittelevälle ohjelmalle. Lomakkeelta siirtyvät tiedot eivät myöskään ole käyttäjän nähtävissä käytettäessä post-metodia. Yleensä lomakkeen tietojen eteenpäin laittamisessa kannattaa käyttää post-metodia.
Seuraavassa yksinkertainen esimerkki lomakkeesta ja siihen tarvittavista elementeistä. Seuraavassa käydään tarkemmin läpi esimerkkilomakkeen sisältöä.
<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN""http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi"><head><title>Esimerkkilomake</title></head><body><h1>Esimerkkilomake</h1><form action="http://palvelin/teepase.cgi" method="post"><p><label for="name">Nimi: </label><input id="name" type="text" name="Nimi" value="Etunimi Sukunimi" /></p><p><label for="email">Email: </label><input id="email" type="text" name="email" value="Sahköpostiosoite" /></p><p><label for="kommentti">Kommentti: </label><input id="kommentti" type="text" name="kommentti" value="tähän kommentti" /></p><p><input type="submit" name="laheta" value="Lähetä kommenttisi" /></p></form></body></html>
Käyttäjien kommentit