WWW-lomakkeet

ITKP1011 Web-julkaiseminen · korjattu ja laajennettu laitos

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

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

1. Mihin WWW-lomakkeita voi ja kannattaa käyttää?

Lomakkeita voi käyttää kaikenlaisten tietojen kysymiseen sivuston käyttäjiltä. Tyypillisiä käyttötilanteita ovat:

• Dynaamiset sivustot ja vuorovaikutus käyttäjän kanssa, jolloin sivun sisältö riippuu käyttäjän valinnoista.
  • Esimerkiksi W3C:n validaattori, jota olet käyttänyt kurssin alusta asti.
  • Esimerkiksi Karttapaikan osoitehaku.
• Erilaisten kyselyjen tekeminen sähköpostin sijasta.
• Sivuston tai tapahtuman palautelomake sähköpostin sijasta.
• Haku sivustolta tai hakukoneesta.
• Kirjautuminen ja tunnistautuminen.

1.1 Lomakkeella saavutettavat hyödyt

• Tietoja voi kysyä verkossa ajasta ja paikasta riippumatta.
• Tiedot saadaan talteen valmiiksi sähköisessä muodossa.
  • Jatkokäsittelystä jää yksi työläs vaihe pois.
  • Vastauspapereita ei tarvitse käsitellä.
  • Arkistointi voidaan automatisoida.
• Vuorovaikutus käyttäjän kanssa on mahdollista.
• Sivusto voi muuttua käyttäjän valintojen mukaan.

1.2 Lomakkeen käytöstä aiheutuvat haitat

• Käyttöliittymänä lomake on rajallinen ja usein hankala.
• Käyttäjä ei välttämättä saa omaa kopiota lähettämästään tiedosta, esimerkiksi tilauksesta.
• Tiedot voivat hävitä matkalla, eikä käyttäjä aina huomaa sitä.
• Verkossa tehtävä kysely on helppo ohittaa.
• Lomakkeen tietojen käsittelyyn tarvitaan yleensä erillinen ohjelma.
  • Käsittelijäohjelma on itse tehtynä kohtuullisen monimutkainen.
  • Erikoistilanteet, kuten ääkköset ja rivinvaihdot, vaativat huolellisuutta.

2. Lomakkeen tekeminen

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

<form action="https://palvelin.example/kasittelija" method="post">
  ... lomake-elementit ...
</form>

• action-attribuutti kertoo, minne lomakkeelle syötetyt tiedot lähetetään. Käytännössä se on osoite palvelimella olevaan ohjelmaan. Kirjoita osoite aina https-alkuisena; selain estää https-sivulta lähtevän http-lomakkeen.
• method-attribuutti kertoo tavan, jolla tieto lähetetään käyttäjältä käsittelijälle. Mahdollisia arvoja ovat post ja get. Erot käsitellään luvussa 14.

Yksinkertaisessa esimerkissä on pelkkiä tekstikenttiä (type="text"). Huomaa kolme asiaa, jotka toistuvat kaikissa hyvissä lomakkeissa:

• Jokaisella kentällä on otsikko label-elementillä.
• Kentissä on järkevät oletusarvot tai vinkit siitä, mitä niihin kuuluu.
• Kentät ovat siinä järjestyksessä kuin ne täytetään.

Lomakkeita tehdessä kannattaa pitäytyä pelkistetyissä ja yksinkertaisissa muodoissa eikä alkaa kikkailla elementeillä.

3. Lomake-elementit

WWW-lomakkeille voidaan lisätä monenlaisia elementtejä, joiden avulla lomakkeista saadaan käyttökelpoisia. Erilaisia elementtejä käyttämällä lomakkeesta saadaan monipuolinen, ja käyttäjän antamia syötteitä pystytään jonkin verran rajoittamaan. Varsin usein lomakkeelle tehdään pelkästään tekstikenttiä, mutta muitakin mahdollisuuksia kannattaa harkita.

4. Kentän otsikko – label

label-elementti toimii lomake-elementtien otsikkona. Jokaisella kentällä on oltava otsikko. Ilman sitä ruudunlukijan käyttäjä ei tiedä, mitä kenttään kuuluu kirjoittaa, eikä otsikon napsauttaminen siirrä kohdistusta kenttään.

Otsikon voi liittää kenttään kahdella tavalla. Ensimmäinen on kapselointi, jolloin kenttä kirjoitetaan otsikon sisään:

<label>Nimi: <input type="text" name="nimi" /></label>

Toinen tapa on for-attribuutti, jota käytetään silloin, kun kenttää ei voida sijoittaa suoraan otsikon sisään. Lomake-elementin id-attribuutin ja otsikon for-attribuutin arvojen on oltava samat. Arvojen on oltava yksikäsitteisiä, joten otsikko voi viitata ainoastaan yhteen lomake-elementtiin.

<label for="nimi">Nimi:</label>
<input id="nimi" type="text" name="nimi" />

5. input-elementti

input-elementti on monipuolinen lomake-elementti, jonka type-attribuutin arvoa vaihtamalla saadaan käyttöön erilaisia kenttiä. Se on void-elementti, joten se suljetaan kauttaviivalla eikä sillä ole lopetustagia.

5.1 Yleiset ominaisuudet

Seuraavassa lyhyt esimerkki name- ja value-attribuutin käytöstä:

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

Jos edellisen esimerkin lomakkeen tiedot lähetetään käsittelijälle oletusasetuksilla, tiedot ovat muotoa name=value:

kokonimi=Etunimi+Sukunimi

5.2 input-elementin tyyppejä

type-attribuutilla määritellään kentän käyttötarkoitus. Oikean tyypin valinta kannattaa: selain osaa tarjota sopivan syöttötavan, mobiililaite avaa oikean näppäimistön ja selain tarkistaa arvon muodon automaattisesti.

5.3 input-elementin attribuutteja

5.4 autocomplete – anna selaimen täyttää kentät

autocomplete-attribuutti kertoo selaimelle, mitä tietoa kenttään kuuluu. Silloin selain osaa tarjota käyttäjän aiemmin tallentamia tietoja oikeisiin kenttiin. Tämä nopeuttaa täyttämistä huomattavasti ja auttaa erityisesti käyttäjiä, joille kirjoittaminen on työlästä. Se on myös saavutettavuusvaatimus.

<label for="etunimi">Etunimi</label>
<input id="etunimi" type="text" name="etunimi" autocomplete="given-name" />

<label for="sposti">Sähköposti</label>
<input id="sposti" type="email" name="sposti" autocomplete="email" />

<label for="postinro">Postinumero</label>
<input id="postinro" type="text" name="postinro" autocomplete="postal-code" />

Tavallisimpia arvoja ovat name, given-name, family-name, email, tel, street-address, postal-code, country ja bday. Arvo off estää täydennyksen; sitä kannattaa käyttää vain harvoin, esimerkiksi kertakäyttöisissä koodikentissä.

5.5 Tekstikenttä – text

text-arvo luo yksirivisen tekstisyöttökentän. Syöttökentän pituutta ei ole oletuksena rajoitettu, joten riville voi syöttää tekstiä kohtuullisen paljon. Syötteen pituutta voi rajoittaa maxlength-attribuutilla ja muotoa pattern-attribuutilla.

Seuraavassa esimerkissä kysytään postinumeroa, joka on Suomessa aina viisi numeroa:

<label for="postinro">Postinumero</label>
<input id="postinro" type="text" name="postinro"
       inputmode="numeric" pattern="[0-9]{5}" maxlength="5"
       autocomplete="postal-code"
       placeholder="40100" required="required" />

Huomaa, että type="number" ei sovi postinumerolle: se hylkäisi alkunollan, joka kuuluu moneen postinumeroon.

5.6 Salasanakenttä – password

password-arvo luo tekstikentän, jossa syötettyjen merkkien tilalla näytetään piste tai tähti. Tämä ei salaa mitään: kenttään kirjoitettu teksti lähetetään käsittelijälle sellaisenaan. Ainoa suoja on se, että yhteys salataan, eli osoitteen on oltava https.

<label for="salasana">Salasana</label>
<input id="salasana" type="password" name="salasana"
       autocomplete="current-password" required="required" />

5.7 Valintaruutu – checkbox

checkbox-arvo tekee elementistä valintaruudun. Valintaruudut ovat neliön muotoisia kenttiä, joita käyttäjä voi valita päälle tai pois päältä. Ruutuja voi valita useita, joten ne eivät ole toisensa poissulkevia kuten valintanapit. Kaikkien valittujen arvot lähetetään.

Saman ryhmän valintaruuduilla on sama name-attribuutin arvo, ja kullakin oma value. checked-attribuutilla ruutu voidaan valita oletuksena (checked="checked").

<fieldset>
  <legend>Mitä lemmikkejä sinulla on?</legend>

  <input id="kissa" type="checkbox" name="lemmikit" value="kissa" />
  <label for="kissa">Kissa</label>

  <input id="koira" type="checkbox" name="lemmikit" value="koira" />
  <label for="koira">Koira</label>
</fieldset>

5.8 Valintanappi – radio

radio-arvo tekee elementistä valintanapin. Valintanappi on pyöreä kenttä. Käyttäjä voi valita saman ryhmän napeista ainoastaan yhden, koska uuden valinnan tekeminen poistaa edellisen.

Kaikkien samaan ryhmään kuuluvien valintanappien name-attribuutin arvon on oltava sama. Jos arvot eroavat, napit eivät kuulu samaan ryhmään ja niitä voi valita useita, vaikka ne näyttäisivät ryhmältä.

<fieldset>
  <legend>Kuinka usein käytät palvelua?</legend>

  <input id="usein" type="radio" name="tiheys" value="usein" />
  <label for="usein">Viikoittain</label>

  <input id="harvoin" type="radio" name="tiheys" value="harvoin" />
  <label for="harvoin">Harvemmin</label>
</fieldset>

5.9 Lähetä-painike, tyhjennyspainike ja piilokenttä

submit-arvo luo painikkeen, jolla lomakkeen tiedot lähetetään käsittelijälle. Painikkeen teksti tulee value-attribuutista.

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

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

hidden-arvo luo piilotetun kentän, jota ei näytetä käyttäjälle. Piilokentällä voidaan välittää tietoa, joka on tarpeen käsittelyssä mutta jota on turha näyttää lomakkeella. Piilokenttään ei saa sijoittaa salaista tietoa, koska kenttä ja sen arvo näkyvät sivun lähdekoodissa kenelle tahansa.

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

6. Tekstialue – textarea

textarea-elementti on useampirivinen vapaamuotoinen tekstikenttä. Sitä kannattaa käyttää vapaamuotoisten tekstien kirjoittamiseen, koska useammalle riville kirjoittaminen on mielekkäämpää kuin yhdelle.

textarea-elementillä ei ole value-attribuuttia, vaan oletussisältö kirjoitetaan elementin sisään. Se ei myöskään ole void-elementti, joten se on aina suljettava lopetustagilla.

<label for="kommentti">Vapaat kommentit</label>
<textarea id="kommentti" name="kommentti" rows="5" cols="40"></textarea>

Koon voi määritellä myös CSS:llä, jolloin se skaalautuu paremmin eri näyttökokoihin.

7. Valintalista – select

Valintalista on yksi- tai useampivalintainen alasvetovalikko. Käyttötilanteet ovat samanlaisia kuin valintanapeilla ja valintaruuduilla, mutta valintalista vie vähemmän tilaa.

• Säästää tilaa radio- ja checkbox-elementteihin verrattuna.
• Monivalinta on mahdollinen, mutta monille käyttäjille vaikea, koska se vaatii Ctrl-näppäimen käyttöä.
• Ryhmittely optgroup-elementillä selkeyttää pitkää listaa.
• Hyvin pitkät valintalistat ovat käytettävyydeltään huonoja. Alle viisi vaihtoehtoa kannattaa yleensä esittää valintanappeina, jolloin kaikki vaihtoehdot näkyvät kerralla.

Valintalista luodaan select-elementillä, ja sen sisään tulee vähintään yksi option-elementti.

<label for="paikkakunta">Paikkakunta</label>
<select id="paikkakunta" name="paikkakunta">
  <option value="">Valitse</option>
  <option value="jkl">Jyväskylä</option>
  <option value="tre">Tampere</option>
</select>

7.1 option-elementti

option-elementillä määritellään valintalistan vaihtoehdot. Näkyville tuleva teksti kirjoitetaan elementin sisään. option ei ole void-elementti, joten sitä ei saa kirjoittaa muodossa <option ... />.

• value-attribuutti kertoo, mikä arvo lähetetään käsittelijälle. Jos sitä ei ole, lähetetään elementin sisältö sellaisenaan.
• selected-attribuutti valitsee vaihtoehdon oletuksena (selected="selected").

7.2 Valintalistan ryhmittely – optgroup

optgroup-elementillä valinnat saadaan ryhmiteltyä pienempiin ja selkeämpiin kokonaisuuksiin. label-attribuutilla määritellään otsikko koko ryhmälle.

<select id="ruokapaikka" name="ruokapaikka">
  <optgroup label="Pizza">
    <option value="kotipizza">Kotipizza</option>
    <option value="rosso">Rosso</option>
  </optgroup>
  <optgroup label="Burger">
    <option value="hese">Hesburger</option>
  </optgroup>
</select>

7.3 Ehdotuslista – datalist

datalist-elementti tarjoaa tekstikenttään ehdotuksia, mutta sallii myös muun arvon kirjoittamisen. Se on eri asia kuin select, jossa käyttäjä voi valita vain annetuista vaihtoehdoista. Kenttä yhdistetään listaan list-attribuutilla, jonka arvo on listan id.

<label for="kaupunki">Kaupunki</label>
<input id="kaupunki" type="text" name="kaupunki" list="kaupungit" />

<datalist id="kaupungit">
  <option value="Jyväskylä"></option>
  <option value="Tampere"></option>
  <option value="Oulu"></option>
</datalist>

8. Ryhmittely – fieldset ja legend

fieldset-elementillä ryhmitellään lomakkeen kentät loogisiksi kokonaisuuksiksi. Ryhmittely havainnollistaa käyttäjälle, mitä kokonaisuutta kysytään, ja se on ainoa tapa kertoa ruudunlukijalle valintanappi- tai valintaruuturyhmän kysymys.

legend-elementti on ryhmän otsikko, ja sen on oltava fieldset-elementin ensimmäinen lapsi. Myös sisäkkäiset ryhmittelyt ovat mahdollisia.

<fieldset>
  <legend>Yhteystiedot</legend>

  <label for="nimi">Nimi</label>
  <input id="nimi" type="text" name="nimi" autocomplete="name" />

  <label for="sposti">Sähköposti</label>
  <input id="sposti" type="email" name="sposti" autocomplete="email" />
</fieldset>

9. button – yleispainike

button-elementti on yleinen painike. Sillä voi olla kolme tyyppiä: submit lähettää lomakkeen, reset tyhjentää sen ja button ei oletuksena tee mitään.

button-elementin etu input type="submit"-kenttään verrattuna on, että sen sisään voi laittaa muutakin kuin pelkkää tekstiä, esimerkiksi kuvan. Haittana on, että type-attribuutti on muistettava kirjoittaa: ilman sitä painike toimii lähetyspainikkeena, mikä yllättää usein.

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

Esimerkissä kuvan alt-teksti on tyhjä, koska painikkeen merkitys selviää jo sen tekstistä. Jos painikkeessa on pelkkä kuva, kuvalle on annettava alt-teksti, joka kertoo mitä painike tekee.

10. Selaimen sisäänrakennettu tarkistus

Selain osaa tarkistaa lomakkeen kentät ennen lähetystä ilman mitään ohjelmointia. Tarkistus perustuu kenttien tyyppiin ja muutamaan attribuuttiin. Jos jokin kenttä ei kelpaa, selain estää lähetyksen, siirtää kohdistuksen ensimmäiseen virheelliseen kenttään ja näyttää siitä viestin omalla kielellään.

<label for="ika">Ikä vuosina</label>
<input id="ika" type="number" name="ika"
       min="0" max="120" step="1" required="required" />

11. Esimerkkejä

12. Lomakkeen käytettävyys ja saavutettavuus

Lomake on sivuston vaikein osa käyttää. Seuraavat asiat ratkaisevat suurimman osan ongelmista.

12.1 Rakenne

• Jokaisella kentällä on label, joka on yhdistetty kenttään joko kapseloimalla tai for- ja id-attribuuteilla. Tarkista yhdistyminen napsauttamalla otsikkoa: kohdistuksen pitäisi siirtyä kenttään.
• Ryhmittele samaan asiaan liittyvät kentät fieldset- ja legend-elementeillä ja valintalistan kohdat optgroup-elementillä.
• Vältä taulukkoa lomakkeen asettelussa. Asettelu tehdään CSS:llä. Taulukkoon aseteltu lomake hajoaa kapealla näytöllä ja johtaa helposti siihen, että otsikko ja kenttä eivät yhdisty.
• Kentät siihen järjestykseen, jossa ne täytetään. Silloin järjestys on oikea myös sarkainnäppäimellä liikuttaessa, eikä tabindex-attribuuttia tarvita.
• Lähetyspainike viimeiseksi.
• Lomakkeeseen vain lomake-elementit ja niihin liittyvät täyttöohjeet.

12.2 Ohjeet käyttäjälle

• Kerro ennen lomaketta kaikki täytössä tarvittavat tiedot: mihin tietoja käytetään, kauanko täyttäminen kestää ja mitä tapahtuu lähetyksen jälkeen.
• Kerro ennen kenttää, mitä siihen syötetään ja missä muodossa. Kirjoita ohje näkyväksi tekstiksi äläkä title-attribuuttiin: vihjeteksti ei näy kosketuslaitteilla eikä näppäimistöllä liikuttaessa, eivätkä kaikki apuvälineet lue sitä.
• Jos ohje on pitkä, liitä se kenttään aria-describedby-attribuutilla, jolloin ruudunlukija lukee sen kentän kohdalla.
• Merkitse pakolliset kentät näkyvästi ja kerro, mitä merkintä tarkoittaa.
• Lisää kenttiin järkevät oletusarvot silloin, kun jokin arvo on selvästi tavallisin.

<label for="tunnus">Käyttäjätunnus</label>
<p id="tunnus-ohje">Vähintään kuusi merkkiä, vain kirjaimia ja numeroita.</p>
<input id="tunnus" type="text" name="tunnus"
       aria-describedby="tunnus-ohje"
       pattern="[A-Za-z0-9]{6,}" required="required" />

12.3 Vältä näitä

12.4 Ohjeita ja vihjeitä lomakkeiden suunnitteluun

• MDN: Web forms ja Client-side form validation.
• Creating Accessible Forms (WebAIM).
• Forms Tutorial (W3C Web Accessibility Initiative).
• Esteettömyysopas (TIEKE).
• Saavutettavuusvaatimukset.fi.

13. Lomaketietojen käsittely

Lomakkeen elinkaari menee näin:

1. Selain pyytää palvelimelta lomakesivun.
2. Palvelin toimittaa sivun selaimelle.
3. Käyttäjä täyttää ja lähettää lomakkeen.
4. Selain lähettää tiedot palvelimella suoritettavalle ohjelmalle.
5. Ohjelma käsittelee tiedot ja palauttaa käyttäjälle vastauksen.

Käsittelijäohjelma voi tehdä esimerkiksi seuraavia asioita:

• Käsitellä erikoismerkit, kuten ääkköset ja rivinvaihdot.
• Tarkistaa syötteen: onko kenttä oikean muotoinen, onko kaikkiin kohtiin vastattu.
• Tallentaa tiedot tietokantaan, lähettää ne sähköpostitse tai liittää ne osaksi www-sivua.
• Palauttaa käyttäjälle varmistuksen onnistumisesta, tiedon virheistä tai yhteenvedon lähetetystä sisällöstä.

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

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

Tietojen lähettämiseen on kaksi metodia, post ja get. Kummallakin on oma käyttökohteensa, ja ero huomioidaan myös vastaanottavassa ohjelmassa.

<form action="https://palvelin.example/cgi-bin/kasittelija.cgi" method="post">
<form action="https://palvelin.example/haku" method="get">

15. Harjoitustyössä käytettävä käsittelijäohjelma

Harjoitustyössä käytettävä ohjelma on asennettu valmiiksi kurssipalvelimelle. Aseta lomakkeesi action-attribuutin arvoksi:

https://appro.mit.jyu.fi/cgi-bin/view.cgi

Käsittelijä näyttää lomakkeelle syötetyt tiedot mutta ei tallenna niitä minnekään.

<form action="https://appro.mit.jyu.fi/cgi-bin/view.cgi" method="post">
  <fieldset>
    <legend>Palaute</legend>

    <label for="nimi">Nimi</label>
    <input id="nimi" type="text" name="nimi" autocomplete="name" />

    <label for="viesti">Viesti</label>
    <textarea id="viesti" name="viesti" rows="5" cols="40"></textarea>
  </fieldset>

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

16. Hakulomake

Sivustohaun toteuttaminen itse vaatii melko hyvää ohjelmointitaitoa. Valmiita palveluita voi kuitenkin käyttää: hakukoneelle tehdään lomake, joka rajaa haun omille sivuille. Hakulomake käyttää aina get-metodia, koska haku ei muuta mitään ja hakutuloksen osoitteen halutaan olevan jaettavissa.

Nykyisin sivustohaun saa tehtyä Google Programmable Search Engine -palvelulla, joka antaa valmiin hakulomakkeen omalle sivustolle rajattuna.

Google ei kovin avoimesti mainosta, että haun voi kohdistaa vain tiettyyn osoitteeseen, mutta seuraava tapa toimii edelleen.

1. Lisää sivullesi uusi lomake:

   <form action="https://www.google.com/search" method="get">
     <div>
       <label for="hakusanat">Hakusanat</label>
       <input type="search" size="20" id="hakusanat" name="q" value="" />
       <input type="submit" value="Hae" />
     </div>
   </form>

   • action viittaa Googlen hakuohjelmaan.
   • Kentän name="q" viittaa hakusanoihin, jotka välitetään hakuohjelmalle.
   • method="get", koska haku ei muuta mitään ja hakutuloksen osoitteen pitää olla jaettavissa. Katso lomakeluennon luku 14.
2. Kokeile, miten haku toimii.

3. Rajoitetaan haku vain kurssin osoitteeseen. Lisää lomakkeen sisään piilokenttä:

   <input type="hidden" name="as_q"
          value="site:appro.mit.jyu.fi/itkp1011/" />

   • hidden-tyyppistä kenttää ei näytetä sivulla.
   • as_q lisää muiden hakusanojen lisäksi uuden hakutermin.
   • site:-määreellä haku rajataan tiettyyn sivustoon. Osoitteen on tultava heti kaksoispisteen jälkeen ilman välilyöntiä.

4. Kokeile hakua.