WWW-lomakkeet

Luennolla käsitellään WWW-lomaketekniikoiden nykyisiä mahdollisuuksia ja mahdottomuuksia HTML-dokumenteissa. Katso myös vanha videotallenne.

Kaikki hiemankaan monimutkaisemmat WWW-sovellukset käyttävät lomakkeita. Sovellusten toteuttaminen ei kuulu tämän kurssin aiheisiin vaan vasta esim. TIEA2120 Web-käyttöliittymien ohjelmointikurssille. Tällä kurssilla opetellaan toteuttamaan yksinkertaisia staattisia lomakkeita.

Lomakkeen tekeminen

Lomakelohko sijoitetaan body-elementin sisään form-elementillä:

<form action="http://palvelin/kasittelijaohjelma" method="post">
...
</form>

Lomakkeita tehdessä kannattaa pitäytyä pelkistetyissä, yksinkertaisissa muodoissa, eikä alkaa liikaa kikkailemaan elementeillä. Seuraavassa kuvassa on nähtävillä yleisimmät lomakkeella käytettävät elementit sekä osa input-elementin erilaisista tyypeistä. Seuraavassa käydään esimerkkien avulla tarkemmin läpi lomake-elementtejä ja niiden toimintaa.

Lomake-elementtien esittely

Esimerkkilomake

Lomake-elementit

WWW-lomakkeille voidaan lisätä hyvin monenlaisia elementtejä, joiden avulla lomakkeista saadaan käyttökelpoisia tehtäväänsä. Erilaisia elementtejä käyttämällä lomakkeesta voidaan saada monipuolinen ja pystytään jopa hieman rajoittamaan käyttäjän antamia syötteitä. Varsin usein lomakkeelle tehdään pelkästään erilaisia tekstikenttiä, mutta muitakin mahdollisuuksia kannattaa toki ajatella.

Lomakkeiden muodostamiseen käytetään seuraavia HTML-elementtejä

Kentän otsikko - label

label-elementti toimii lomake-elementtien otsikkona. 

<label>Nimi:
<input type="text" name="Nimi" value="Etunimi Sukunimi"
/></label>

for-attribuuttia käytetään yhdistämään otsikko varsinaiseen lomake-elementtiin jos lomake-elementtiä ei voida sijoittaa suoraan labelin sisään. Lomake-elementin id-attribuutin ja otsikon for-attribuutin arvojen on oltava samat. Arvojen on oltava yksikäsitteiset, joten otsikko voi viitata ainoastaan yhteen lomake-elementtiin. Seuraavassa esimerkki label-elementin käytöstä:

<label
for="name">Nimi:
</label><input id="name"
type="text" name="Nimi" value="Etunimi Sukunimi"
/>

Esimerkki label-elementin käytöstä

input-elementti

input-elementti on hyvin monipuolinen lomakkeella käytettävä elementti, jonka type-attribuutin arvoa vaihtamalla saadaan käyttöön erilaisia lomake-elementtejä.

Yleiset ominaisuudet

name-attribuutilla voidaan antaa kontrollille nimi. Nimen antamisen hyöty tulee näkyviin vasta lomakkeen käsittelyn yhteydessä, koska kontrollin arvo lähetetään lomakkeen tiedot käsittelevälle ohjelmalle muodossa name=kentan+sisalto .

value-attribuutilla voidaan kontrollille antaa oletusarvo. Lomakkeen lataamisen yhteydessä value-attribuutin arvo näkyy valmiiksi kontrollissa. Valintaruudun ja valintanapin yhteydessä value-attribuutin arvo välitetään lomakkeen tiedot käsittelevälle ohjelmalle.

Seuraavassa lyhyt esimerkki name- ja value-attribuutin käytöstä. Esimerkissä name-attribuutin arvona on kokonimi ja value-attribuutin arvona on teksti ”Etunimi Sukunimi”.

Graphic2

Kuten oheisesta kuvasta voi päätellä, niin value-attribuutin arvo näytetään oletuksena lomakekentässä.

<input type="text" name="kokonimi" value="Etunimi Sukunimi" />

Jos edellisen esimerkin lomakkeen tiedot lähetetään käsittelevälle ohjelmalle oletusasetuksilla, niin tiedot ovat seuraavaa muotoa (name=value):

kokonimi=Etunimi+Sukunimi

size-attribuutilla voidaan määritellä kontrollille pituus. Pituus annetaan pikseleinä, mutta jos attribuutin type arvona on text tai password, niin arvo tarkoittaa kenttään mahtuvien merkkien lukumäärää.

id-attribuutilla voidaan elementille antaa yksikäsitteinen id-nimi, johon voidaan viitata esimerkiksi label-elementissä.

tabindex-attribuutilla voidaan elementeille määritellä tabulointijärjestys eli järjestys, jossa kentät aktivoituvat painettaessa tab-näppäintä. tabindex-attribuutin arvoksi voidaan antaa numerot välillä 0-32767.

input-elementin tyyppejä

type-attribuutilla määritellään input-elementin käyttötarkoitus. Voit käyttää seuraavia tyyppejä:

input-elementin attribuutteja

input-elementin toimintaan voi vaikuttaa tyypin valinnan lisäksi useilla muilla attribuuteilla. Tässä on lueteltu tämän kurssin kannalta niistä tärkeimmät:

Tekstikenttä - text

text-arvo luo yksirivisen tekstisyöttökentän. Seuraavassa on esimerkki tekstisyöttökentästä.

Syöttökentän pituutta ei ole oletuksena rajoitettu, joten riville voi syöttää tekstiä kohtuullisen paljon. Kentän pituutta voidaan rajoittaa maxlength-attribuutin avulla ja näkyvissä olevan tekstikentän koko lomakkeella voidaan määritellä size-attribuutin avulla. Seuraavassa esimerkissä sotun syöttämistä on haluttu rajoittaa. Sotu sisältää yksitoista merkkiä, joten kenttään halutaan tasan yksitoista merkkiä.

Salasanakenttä - password

password-arvo luo tekstikentän, johon voidaan syöttää merkkejä siten, että näytöllä merkkien kohdalle kirjoitetaan tähtimerkki (asteriski, *). Tämä ei anna oikeasti mitään salausta kirjoitetulle tekstille, koska kenttään kirjoitettu teksti tullaan lähettämään selkokielisenä lomakkeen käsittelevälle ohjelmalle. Oheisessa kuvassa seuraavan esimerkin mukainen salasanakenttä, johon on syötetty jo salasana.

Valintaruutu - checkbox

checkbox-arvo tekee elementistä valintaruudun. Valintaruudut ovat neliön muotoisia kenttiä, joita käyttäjä voi halutessaan valita päälle tai pois päältä. Ruutuja voidaan valita useampiakin, joten ne eivät ole toisensa pois sulkevia, kuten esimerkiksi valintanapit. Valintaruutuja voidaan valita useampia, joten kaikkien valittujen arvot lähetetään lomakkeen lähettämisen yhteydessä. Seuraavassa esimerkissä on oheisen kuvan mukainen valintaruuduilla toteutettu kysymys. Esimerkistä kannattaa huomata, että kaikkien samaan ryhmään kuuluvien valintaruutujen name-attribuutin arvon on oltava sama.

checked-attribuutilla valintaruudulle voidaan määritellä oletusarvo. Tällöin attribuutin arvoksi on laitettava checked.(checked="checked")

Valintanappi - radio

radio-arvo tekee elementistä valintanapin. Valintanappi on pyöreä kenttä. Käyttäjä voi valita saman ryhmän valintanapeista ainoastaan yhden arvon, koska asetettaessa uusi arvo päälle menee entinen valinta pois päältä. Esimerkistä kannattaa huomata, että kaikkien samaan ryhmään kuuluvien valintanappien name-attribuutin arvon on oltava sama. Jos arvo ei ole sama, niin valintanappeja voidaan valita useampiakin ”näennäisesti” samasta ryhmästä.

checked-attribuutilla valintaruudulle voidaan määritellä oletusarvo. Tällöin attribuutin arvoksi on laitettava checked. (checked="checked")

Lähetä-painike - submit, Tyhjennä-painike - reset, Piilokenttä - hidden

submit-arvo luo painikkeen, jolla lähetetään lomakkeen tiedot käsittelevälle ohjelmalle. Painikkeessa lukeva teksti voidaan vaihtaa value-attribuutin arvoa muuttamalla.

<input type="submit" name="laheta" value="Lähetä kommenttisi" />

reset-arvo luo painikkeen, jolla lomakkeen kentät tyhjennetään ja kenttiin sijoitetaan oletusarvot. reset-painikkeen käyttöä lomakkeella kannattaa harkita tarkkaan, koska käyttävä voi vahingossa tyhjentää täyttämänsä lomakkeen ennen lähetystä. Älä laita lomakkeelle reset-painiketta

<input type="reset" name="tyhjenna" value="Tyhjennä lomake"/>

hidden-arvo luo piilotetun kentän, jota ei näytetä käyttäjälle selainikkunassa. Piilotettujen kenttien avulla lomakkeella voidaan välittää tietoa, joka on tarpeellista esimerkiksi lomakkeen käsittelyssä, mutta sitä on turha näyttää varsinaisella lomakkeella. Piilokenttään ei kannata sijoittaa mitään ”salaista” tietoa, kuten esimerkiksi salasanoja tai vastaavia, koska kenttä ja sen arvo nähdään sivun lähdekoodista. Seuraavassa lyhyt esimerkki piilokentän käytöstä.

<input type="hidden" name="ID" value="L0011"/>

Tekstialue - textarea

textarea-elementti mahdollistaa useampirivisen vapaamuotoisen tekstikentän lomakkeella. Elementtiä kannattaa käyttää erilaisten vapaamuotoisten tekstien kirjoittamispaikkana, koska kirjoittaminen useammalle riville on usein mielekkäämpää kuin yhdelle riville.

name-attribuutilla voidaan antaa textarea-elementille nimi. Kannattaa huomata, että textarea-elementillä ei ole value-attribuuttia, vaan oletussisältö kirjoitetaan elementin sisään ohessa olevan esimerkin mukaisesti.

rows-attribuutti määrittelee textarea-elementissä näkyvillä olevien rivien lukumäärän. Tämä ei kuitenkaan rajoita rivien lukumäärää, joille käyttäjä voi kirjoittaa. Jos kaikki rivit eivät mahdu kerralla textarea-elementin sisään, luodaan elementin oikeaan laitaan vierityspalkki.

cols-attribuutti määrittelee textarea-elementissä olevan rivin pituuden. Rivin pituudella tarkoitettaan riville mahtuvien ”keskiarvokirjainten” määrää. Arvo ei kuitenkaan rajoita riville kirjoitettavien merkkien lukumäärää. Jos rivi ei mahdu kerralla textarea-elementin sisään, luodaan elementin alalaitaan vierityspalkki.

Valintalista - select

Valintalista on lomakkeella yksi- tai useampivalintainen alasvetovalikko. Valintalistan käyttötilanteet ovat usein samanlaisia kuin radiopainikkeilla ja valintalaatikoilla, mutta valintalistat vievät fyysisesti paljon vähemmän tilaa lomakkeelta. Valintalista luodaan select-elementillä ja sen sisään täytyy laittaa vähintään yksi option-elementti, josta muodostuu varsinainen valinta.

Valintalistojen käytöllä saavutetaan seuraavia hyviä ja huonoja puolia:

select-elementti luo varsinaisen valintalistan rungon, jonka sisään tulevat valinnat toteutetaan option-elementeillä.

name-attribuuttilla voidaan antaa nimi select-elementille.

size-attribuutilla määritellään näkyvissä olevan listan koko. Koko ei ole eri vaihtoehtojen lukumäärä vaan se on pelkästään näkyvillä olevien vaihtoehtojen lukumäärä. Jos vaihtoehtoja on useampia kuin size-attribuutissa on määritelty, niin elementin oikeaan laitaan luodaan vierityspalkki. Jos size on määritelty, niin listaa ei näytetä valintalistana, vaan listaa voidaan ainoastaan vierittää.

multiple-attribuutilla voidaan mahdollistaa elementin useamman vaihtoehdon valinta aktiiviseksi yhtä aikaan. Jos attribuuttia ole määritelty voidaan elementistä kerrallaan valita vain yksi kohta aktiiviseksi.

option-elementti

option-elementillä määritellään valintalistan (select-elementin) sisään tulevat vaihtoehdot. Näkyville tuleva vaihtoehto kirjoitetaan option-elementin sisään eli aloitus- ja lopetus-elementin väliin.

selected-attribuutti ilmaisee onko jokin option-elementillä määritelty kohta valittu aktiiviseksi oletuksena. Attribuutin arvoksi pitää antaa selected. (selected=”selected”)

value-attribuutti antaa oletusarvon kontrollille. Jollei kontrollille ole asetettu mitään arvoa, käytetään sen sisältöä oletusarvona.

Valintalistan ryhmittely - optgroup

Valintalistan ryhmittelyyn voidaan käyttää optgroup-elementtiä. Elementillä saadaan kätevästi ryhmiteltyä valintoja pienempiin ja selkeämpiin kokonaisuuksiin.

label-attribuutilla määritellään otsikko koko optgroup-ryhmälle.

Lomake-elementtien ryhmittely - fieldset

fieldset-elementillä voidaan ryhmitellä lomakkeilla olevia kenttiä loogisiksi kokonaisuuksiksi. Ryhmittelyn tarkoituksena on havainnollistaa käyttäjälle lomakkeella kysyttävien tietojen tarkoitusta.

Seuraavassa esimerkissä on käytetty fieldset-elementtiä lomakkeen tietojen ryhmittelemiseen. legend-elementillä kerrotaan kyseisen elementtiryhmän otsikko, joka on sijoitettu ensimmäiseksi elementiksi fieldset-ryhmään. Lomakkeella voi olla muitakin fieldset-ryhmiä

Elementtien ryhmän otsikko - legend

Elementtiryhmälle voidaan antaa otsikko legend-elementin avulla.

Esimerkki ryhmittelyn käytöstä. Ryhmittelyä on käytetty kaikissa esimerkin kysymyksissä.

button - yleispainike

button-elementti on yleinen painike. Buttonilla voi olla kolme eri tyyppiä (type): submit, joka lähettää lomakkeen palvelimelle, reset, joka tyhjentää lomakkeen sekä button, jolloin painike ei oletuksena tee mitään.

Seuraavassa esimerkissä liitetään submit-painikkeen yhteyteen kuva. 

<button name="laheta" type="submit">
<img src="kuva.jpg" alt="Lähetä" />
</button>

Esimerkkejä

Lomake-elementit esimerkkeineen
ElementtiKoodiEsimerkki
Kentän otsikko ja tekstikenttä
<label for="lempinimi" accesskey="L">
Lempinimi: </label>
<input id="lempinimi" type="text" name="nick"
 maxlength="11" size="20" value="Kutsumanimi" 
 title="Anna lempinimi, jota käytät palvelussa" />
Salasana
<label for="salasana">Salasana: </label>
<input id="salasana" type="password" 
 name="passwd" value="" />
Valintaruutu
<label for="kissa">Kissa</label>
<input id="kissa" type="checkbox" 
 name="lemmikit" value="kissa"
 checked="checked" /><br />
<label for="koira">Koira</label>
<input id="koira" type="checkbox" 
 name="lemmikit" value="koira" />
Valintanappi
<label for="mies">Mies</label>
<input id="mies" type="radio" 
 name="sukupuoli" value="mies" /><br />
<label for="nainen">Nainen</label>
<input id="nainen" type="radio" 
 name="sukupuoli" value="nainen"
 checked="checked" />
Tekstialue 
<label for="txtalue">Vapaat kommentit:</label>
<textarea id="txtalue" name="kommentti" 
 rows="5" cols="20">Sana on vapaa...</textarea>
Valintalista ryhmittelyillä 
<label for="ruokapaikat">Ruokailupaikkani</label>
<select id="ruokapaikat" name="ruokap">
<optgroup label="Pizza">
<option value="kotipizza">Kotipizza</option>
<option value="rax">Rax</option>
<option value="rosso" 
 selected="selected">Rosso</option>
</optgroup>
<optgroup label="Burger">
<option value="mcd">McDonald's</option>
<option value="hese" 
 selected="selected">Hesburger</option>
</optgroup>
</select>

Lomake-elementtien ryhmittely
<fieldset>
<legend>Valintoja</legend>
<input type="text" name="testi" />
</fieldset>
Valintoja
Kuva-painike
<input type="image" src="laheta.png" name="laheta"
 value="klikattukuvaa" alt="[Lähetä]"
 title="Lähettää lomakkeen tiedot" />

Tiedosto-painike 
<label for="filerequest">Valitse tiedosto:</label>
<input type="file" id="filerequest" 
name="siirrettava_tiedosto"
accept="application/rtf" />

Piilokenttä
<input type="hidden" name="ohjaus"
 value="lomake8" />
Lähetä-painike
<input type="submit" name="laheta"
 value="Lähetä tiedot" />
Tyhjennä-painike
<input type="reset" name="tyhjenna"
 value="Tyhjennä lomake" />
Hakukenttä 
<input name="haku" type="search"/>
Puhelinnumero 
<input name="puhnro" type="tel" />
number 
<input name="paino" type="number" 
 min="1" max="200" step="0.1" value="70"/>
range 
<input name="ika" type="range" 
 min="1" max="120" step="1" value="30"  />
datalist 
<input name="luvut" type="text" 
 value="30" list="lukuja" />
<datalist id="lukuja">
  <option value="10" label="10"/>
  <option value="20" label="20"/>
  <option value="30" label="30"/>
</datalist>
URL 
<input name="url" type="URL"  />
Päivämäärä 
<input name="pvm" type="date">
Päivä ja kellonaika 
 <input name="aika" type="datetime-local">
Kuukausi 
<input name="kuukausi" type="month">
Viikko 
<input name="viikko" type="week" />
Aika 
<input name="aika" type="time" />
Väri 
 <input name="vari" type="color">
Sähköpostiosoite 
<input name="email" type="email">

Lomakkeiden ulkoasu

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.

Erilaisia ohjeita ja vihjeitä lomakkeiden suunnitteluun

Dive Into HTML5 - A Form of Madness: selitystä uusista HTML 5:n lomakeominaisuuksista esimerkkien kera

Lomaketietojen käsittely

Lomakkeen käsittely

  1. Selainohjelma pyytää palvelimelta lomakesivun.
  2. Palvelin toimittaa sivun selaimelle.
  3. Käyttäjä täyttää ja hyväksyy lomakkeen. Selain lähettää lomakkeen tiedot WWW-palvelimella suoritettavalle ohjelmalle.
  4. Lomakkeelta tuleva data käsitellään ohjelman tekijän haluamalla tavalla. Ohjelma voi tehdä esimerkiksi seuraavia toimenpiteitä:
    • Erikoismerkkien käsittely (esim. ääkköset, rivinvaihdot).
    • Tarkistukset syötteelle (esim. onko jokin kenttä oikean muotoinen, onko kaikkiin kohtiin vastattu).
    • Tiedot tallennetaan tietokantaan, lähetetään sähköpostitse, tallennetaan suoraan osaksi jotain www-sivua jne.
    • Lomakkeen tietojen jatkokäsittelyyn voidaan käyttää monenlaisia erilaisia ohjelmistoja.
  5. Ohjelma palauttaa käyttäjälle tietoja:
    • Varmistuksen tietojen lähetyksen onnistumisesta.
    • Tiedon, jos syötteessä oli jotakin virheitä.
    • Tilauksen tai palautteen sisällön.

Lomakkeen tietojen käsitteleminen

Lomakkeen tietojen käsitteleminen edellyttää joko oman ohjelman kirjoittamista tai jonkin valmiin lomakekäsittelijän käyttämistä. Tällä kurssilla käytetään vain valmiista lomakekäsittelijää. Omia lomakkeenkäsittelijöitä ohjelmoidaan TIEA2120- ja TIES4080-kursseilla.

Tietojen lähettäminen ohjelmalle

Lomakkeen tiedot lähetetään yleensä www-palvelimella sijaitsevalle ohjelmalle. Lomake on mahdollista käsitellä myös suoraan selaimessa, mutta se opitaan vasta TIEA2120-kurssilla. 

<form action="http://palvelin/cgi-bin/kasittelija.cgi" method="post">
...
</form>

Lähettämisessä käytettävät tavat

Lomakkeen tietojen lähettämiseen on kaksi erilaista metodia (post ja get), joilla kummallakin on oma käyttökohteensa. Metodien välinen ero huomioidaan lomakkeen tiedot vastaanottavassa ohjelmassa.

post-metodi

<form action="http://palvelin/cgi-bin/kasittelija.cgi" method="post">
...
</form>

get-metodi

<form action="http://palvelin/cgi-bin/kasittelija.cgi" method="get">
...
</form>

Harjoitustyössä käytettävä CGI-ohjelma

Harjoitustyössä käytettävä CGI-ohjelma on asennettu valmiiksi kurssipalvelimelle. Käyttäminen on yksinkertaista. Aseta lomakkeesi action-attribuutin arvoksi: http://appro.mit.jyu.fi/cgi-bin/view.cgi. Käsittelijä näyttää lomakkeelle syötetyt tiedot mutta ei tallenna niitä minnekään.

<form action="http://appro.mit.jyu.fi/cgi-bin/view.cgi" method="post">

Hakulomake

Sivustohaun toteuttaminen vaatii melko hyvää ohjelmointitaitoa. Voimme kuitenkin käyttää hakukoneiden tarjoamia rajapintoja hakulomakkeen tekemiseksi. Tarvitsemme hakupalvelun, joka antaa rajoittaa haun omille sivuillemme. Lähtökohtana voimme tutkia, mitä parametreja osoiteriviltä löytyy tai millainen lomake hakukoneen Advanced search -sivulta löytyy. Näiden tietojen perusteella voimme tehdä oman hakulomakkeen ja laittaa sen käsittelijän osoittamaan hakukoneen ohjelmaan.

Google

Google search basics: More search help -sivulta löydämme, että jos hakutermissä on site:, niin tällä voi rajoittaa hakua WWW-osoitteen mukaan.

Search Protocol Reference - Request Format ja Googlen webbikäyttöliittymän ja haun kielikoodit -sivuilta löydämme myös, että parametri q on hakutermi. Parametrilla as_q voidaan lisätä myös muita hakutermejä. Referenssidokumentteja tutkimalla löydämme myös parametrit ie (hakutermien merkistökoodaus), oe (hakutulosten merkistökoodaus) ja hl (Googlen käyttöliittymän kieli). Näiden perusteella teemme lomakkeen, joka rajoittuu kurssisivustolle:

esimerkki omalla sivulla

Omille sivuille tehtävissä hauissa käy joskus niin, että Google ei löydä yhtään hakutulosta millään hakusanalla. Tähän syynä on se, että Google ei ole vielä indeksoinut sivuasi tietokantaansa. Automaattinen indeksointi vaatii sen, että joltain jo indeksoidulta sivulta on linkki sivullesi. Google tekee indeksoinnin yleensä noin kerran viikossa, eli ihan heti uudet sivut eivät Googlen avulla löydy mitenkään.

Käyttäjien kommentit

Kommentoi Lisää kommentti