WWW-lomakkeet

Luennolla käsitellään WWW-lomaketekniikoiden nykyisiä mahdollisuuksia ja mahdottomuuksia HTML-dokumenteissa.

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 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/>
2017-10-19 08:31:44
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta