WWW-lomakkeet

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

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

WWW-lomakkeella saavutettavat hyödyt

WWW-lomakkeen käytöstä aiheutuvat haitat

Lomakkeen tekeminen

Esimerkkilomake

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

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.

Seuraavassa listassa on lyhyesti esiteltynä erilaisia lomakekenttiä, joita lomakkeelle voidaan sijoittaa. Kuvauksen perässä on luvun numero, jossa elementtiä käsitellään tarkemmin.

Katso myös HTML5:n uudet input-elementin tyypit

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"
/>

accesskey-attribuutin avulla voidaan lomake-elementille määritellä pikanäppäin, jota painamalla siirrytään kenttään, jonka otsikkoon pikanäppäin on määritelty. Yleensä pikanäppäimen kanssa pitää painaa myös jokin toinen näppäin. Tämä näppäin riippuu jonkin verran käytettävästä käyttöjärjestelmästä ja selaimesta. Kts. accesskey (MDN)

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

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.

type-attribuutilla määritellään input-elementin käyttötarkoitus. Mahdollisia type-elementin arvoja ovat text, password, checkbox, radio, submit, reset ja hidden.

Tekstikenttä - text

Graphic3

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

<p><label
for="email">Email: </label> 
<input id=”email” type="text" name="email" value="Sahköpostiosoite" />
</p>

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

Graphic4
<p><label for="sotu">Sotu: </label>
<input
maxlength="11"size="11" id="sotu"
type="text" name="sotu" value="000000-000A" />
</p>

Salasanakenttä - password

Graphic5

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.

<p><label for="passwd">Salasana: </label>
<input id="passwd" type="password" name="salasana" value="" />
</p>

Valintaruutu - checkbox

Graphic6

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 -attribuutin arvon on oltava sama.

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

<p><label for="henkiloauto">henkilöautolla </label>
<input id="henkiloauto" type="checkbox"  name="tyomatka" value="hauto"
/><br />
<label for="bussi">bussilla </label>
<input id="bussi" type="checkbox" name="tyomatka" value="bussi" checked="checked" /><br/>
<label for="juna">junalla </label>
<input id="juna" type="checkbox" name="tyomatka" value="juna" /><br/>
<label for="pp">polkupyörällä </label>
<input id="pp" type="checkbox"name="tyomatka" value="pp" /><br/>
<label for="mp">moottoripyörällä </label>
<input id="mp" type="checkbox"name="tyomatka" value="mp" /><br/>
<label for="jalan">kävellen </label>
<input id="jalan" type="checkbox" name="tyomatka" value="jalan" /><br/>
</p>

Valintanappi - radio

Graphic7

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 -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")

<p>Ikäni on</p>
<p>
<label for="pk20">&lt; 20 vuotta.</label>
<input id="pk20" type="radio" name="ika" value="< 20" /><br/>
<label for="ika2030">20-30 vuotta.</label>
<input id="ika2030" type="radio" name="ika" value="20-30" /><br/>
<label for="ika3040">30-40 vuotta</label>
<input id="ika3040" type="radio" name="ika" value="30-40" /><br/>
<label for="ika4050">40-50 vuotta</label>
<input id="ika4050" type="radio" checked="checked" name="ika" value="40-50" /><br/>
<label for="sk50">&gt; 50 vuotta</label>
<input id="sk50" type="radio" name="ika" value="> 50" /><br/>
</p>

Lähetä-painike - submit

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

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

Tyhjennä-painike - reset

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

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

Piilokenttä - hidden

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

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

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.

Graphic8

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

<p><label for="desc">Tarkempi kuvaus ongelmasta</label><br/>
<textarea id="desc" name="kuvaus" rows="12" cols="50">
Tähän tarkempi kuvaus asiasta..
</textarea>
</p>

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.

select-elementti

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

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.

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

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.

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.

Seuraavassa esimerkissä on iän kysymiseen tarkoitettu valintalista. Iän oletusarvoksi on määritelty 20-30 vuotta.

Graphic9
<p><label for="ika">Ikäsi on</label>
<select id="ika" name="ika">
<option value="pk20">&lt; 20 vuotta</option>
<option selected="selected" value="ika2030">20-30 vuotta</option>
<option value="ika3040">30-40 vuotta</option>
<option value="ika4050">40-50 vuotta</option>
<option value="sk50">&gt;50 vuotta</option>
</select>
</p>
Graphic10

Seuraavassa esimerkissä on havainnollistettu valintalistaa, josta voi valita useamman eri vaihtoehdon. Iän kysymiseen tällainen valintalista ei kuitenkaan sovellu. Esimerkki on seuraavaa riviä lukuun ottamatta sama kuin edellä esitetty esimerkki.

<select id="ika" name="ika" multiple="multiple" size="3">

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.

Graphic11
<p>
<label for="versio">Versio on</label>
<select id="versio" name="ohjelma-versio">
<optgroup label="Word"> 
<option value="Word 6">Word 6</option>
<option value="Word 95">Word 95</option>
<option value="Word 97">Word 97</option>
<option value="Word 2000">Word 2000</option>
</optgroup>
<optgroup label="Excel">
<option value="Excel 5">Excel 5</option>
<option value="Excel 95">Excel 95</option>
<option value="Excel 97">Excel 97</option>
<option value="Excel 2000">Excel 2000</option>
</optgroup>
</select>
</p>

Lomake-elementtien ryhmittely - fieldset

Graphic12

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

<fieldset><legend>Henkilötiedot</legend>
<label accesskey="N" for="name">Nimi: </label>
<input id="name" type="text" name="Nimi" value="Etunimi Sukunimi" /><br />
<label for="email">Email: </label>
<input id="email" type="text" name="email" value="Sahköpostiosoite" /><br />
<label for="sotu">Sotu: </label>
<input maxlength="11" size="11" id="sotu" type="text" name="sotu" value="000000-000A" /><br />
</fieldset>

Elementtien ryhmän otsikko - legend

Elementtiryhmälle voidaan antaa otsikko legend-elementin avulla.

accesskey-attribuutin avulla voidaan legend-elementille määritellä pikanäppäin, jota painamalla siirrytään kyseisen lomakeryhmän alkuun.

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">

label - kentän otsikko

input

input-elementin avulla lomakkeelle saadaan toteutettua useita erilaisia lomakekenttiä. Muuttamalla elementin type-attribuutin arvoa saadaan elementistä tehtyä seuraavassa lyhyesti esiteltäviä lomakekenttiä.

input-elementin attribuutteja

select - valintalista

select-elementtiä käytetään erilaisten valintalistojen tekemiseen. Valintalistoilla saadaan määriteltyä vaihtoehtoisia valintoja tai pystytään valitsemaan useampi asia kerralla. option-elementtien sisälle määritellään valintalistaan liittyvät valinnat. Valintalistojen käytöllä saavutetaan seuraavia hyviä ja huonoja puolia:

Valintalistaan liittyviä attribuutteja

textarea - tekstialue

Seuraavassa muutamia textarea-elementin attribuutteja

button - yleispainike

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

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

fieldset ja legend - lomakkeen rakenne

Lomakkeen rakennetta voidaan selkeyttää fieldset- ja legend-elementtien avulla.

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

Seuraavassa käydään läpi erilaisia tapoja lähettää lomakkeen tiedot vastaanottajalle.

Tietojen lähettäminen ohjelmalle

Palvelimella suoritettavalla ohjelmalla mahdollistetaan tietojen jatkokäsittely mahdollisimman luotettavasti.

<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 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:

<form action="http://www.google.com/search" method="get">
<fieldset>
<legend>Haku</legend>
<input type="hidden" name="ie" value="iso-8859-1" />
<input type="hidden" name="oe" value="iso-8859-1" />
<input type="hidden" name="hl" value="fi" />
<input type="hidden" name="as_q" value="site:appro.mit.jyu.fi/www" />
<p><label for="hakusana">Hae kurssisivuilta</label>
<input type="text" size="20" id="hakusana" name="q" value="" /></p>
<p><input type="submit" value="Hae" /></p>
</fieldset>
</form>

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
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/itkp1011/luennot/forms/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2018-10-08 10:01:31
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta