Tämä dokumentti on keskeneräinen.

Lomakkeiden täyttäminen Web-sivuilla
Internet Exploreria Exploreria käytettäessä

Aiheena itse sivuilla olevat lomakkeet (HTML-lomakkeet)

Tämä juttu käsittelee Web-sivuilla (WWW-sivuilla, verkkosivuilla) olevia lomakkeita (forms) käyttäjän kannalta: miten lomakkeet ilmenevät käyttäjälle, miten niitä täytetään ja miten täytetyt tiedot lähetetään sekä mitä vaikutuksia lähettämisellä voi olla.

Tässä on puhe itse Web-sivun osana olevista lomakkeista, joita sanotaan HTML-lomakkeiksi ja joita käsitellään suoraan Web-selaimella. Aivan eri asioita ovat esimerkiksi PDF-muotoiset lomakkeet. Niistä kertoo Lomake.fi-palvelussa oleva lomakkeiden käytön ohjeisto. Lomake.fi:ssä käsitellään lyhyesti myös HTML-lomakkeita; siinä kutsutaan niitä nimellä verkkolomake ja niiden tunnuksena käytetään symbolia, jossa on merkit WWW. Monissa muissa yhteyksissä taas verkkolomake-sana tarkoittaa yleensä verkossa olevaa lomaketta sen muodosta ja käsittelytavasta riippumatta.

Tässä esitettävät ohjeet koskevat ensisijaisesti Internet Explorerin (IE) käyttöä Windows-ympäristössä, mutta useimmissa selaimissa käyttö on pääosin samanlaista tai ainakin samantapaista.

Miten lomake ilmenee: esimerkki

Web-sivulla oleva lomake voisi näyttää seuraavalta:

Tällä lomakkeella voit olla tilaavinasi kuun taivaalta:

Tässä tapauksessa lomake sisältää sanallisen selityksen, kaksi tekstinsyöttökenttää ja lähetyspainikkeen. Ne ilmenevät eri selaimissa eri tavoin, mutta tavalla tai toisella voi käyttäjä kirjoittaa tietoa tekstinsyöttökenttiin ja käyttää lähetyspainiketta lomakkeen lähettämiseen.

On hyvin mahdollista, että tällä sivulla selaimesi näyttää lomakkeet niin, että niillä on erityinen taustaväri ja lisäksi reunaviiva ympärillä. Tämä ei ole lomakkeiden yleinen ominaisuus vaan johtuu sivun ominaisuuksista; joskus on jopa hankalaa hahmottaa, onko sivulla lomake ja jos on niin mikä kaikki kuuluu siihen.

Esimerkki lomakkeen käytöstä

Tyypillisessä käyttötilanteessa voit täyttää ja lähettää edellisen kohdan lomakkeen näin:

  1. Napsauta hiirellä ensimmäisen syöttökentän alueelle.
  2. Kirjoita näppäimistöllä haluamasi merkkijono.
  3. Napsauta hiirellä toisen syöttökentän alueelle.
  4. Kirjoita näppäimistöllä haluamasi merkkijono.
  5. Napsauta hiirellä Tilaa-painiketta.

Tällöin saat vastaukseksi sivun, jolla ovat antamasi tiedot taulukkomuodossa. Tässä tapauksessa lomakkeen käsittely siis on vain tietojen "kaiuttamista". Pääset sitten takaisin tälle sivulle selaimesi sillä toiminnolla, jolla muutoinkin palataan sivulla, jolta oli tultu, siis esimerkiksi Takaisin- tai Back-painikkeella.

Tämän sivun muutkin lomakkeet ovat vain havainnollistuksia. Jos lähetät lomakkeen vahingossa tai tahallasi (kokeillaksesi), ei tapahdu muuta kuin se, että saat nähdäksesi lomakkeen tiedot. Todelliset lomakkeet Web-sivuilla voivat aiheuttaa ihan muita asioita!

Lomakkeen täyttäminen vain näppäimiä käyttämällä

Lomakkeen voi täyttää myös pelkkää näppäimistöä käyttämällä, jos lomake on tehty oikein. Usein on kätevämpää käyttää näppäimiä kuin hiirtä esimerkiksi kentästä toiseen siirtymiseen, kun näppäimistöä kuitenkin tarvitaan tekstien kirjoittamiseen lomakkeen kenttiin. Lisäksi hiiri voi olla rikki tai puuttua tai olla hankalakäyttöinen, kuten kannettavissa tietokoneissa usein on. Jokin käyttäjän vamma, esimerkiksi käden tarkan liikuttamisen häiriöt, voivat myös tehdä hiiren käytön mahdottomaksi tai vaikeaksi.

Keskeisessä asemassa on tab-näppäin ("sarkainnäppäin"), joka on yleensä näppäimistön vasemmassa reunassa ja jossa oikealle suuntautuva nuoli ja mahdollisesti sen yllä vasemmalle suuntautuva nuoli. Kun näpäytät sitä, niin IE siirtyy linkistä tai lomakkeen kentästä seuraavaan linkkiin tai lomakkeen kenttään. Jos pidän tasonvaihtonäppäintä (shift) alhaalla, kun näpäytät tab-näppäintä, IE siirtyy vastaavasti taaksepäin, edelliseen linkkiin tai kenttään. Sivun alkuun pääsee näppäimellä, jossa on teksti "Home".

Voit siis täyttää pitkänkin lomakkeen ilman, että kosket hiireen. Kirjoitat vain tekstinsyöttökenttään ja näpäytät tab-näppäintä, jolloin pääset seuraavaan kenttään (ellei välissä ole linkkiä).

radio, check, nuolinäpp. space toggles.

Mitä lomakkeella voi tehdä?

Kun täytät ja lähetät lomakkeen, niin tiedot menevät johonkin verkossa olevaan palvelimeen. Palvelimessa toimiva ohjelma käsittelee tiedot ja tekee sitten jotakin. Riippuu aivan ohjelmasta, mitä se tekee. Tyypillisiä esimerkkejä ovat seuraavat:

Mistä sitten tiedät, mitä lomakkeen lähettäminen vaikuttaa? Se pitää lomakkeen tekijän kertoa. Jos sitä ei ole kerrottu, et myöskään voi joutua vastuulliseksi siitä, mitä aiheutuu. Jos asiat on hoidettu hyvin, niin lomakkeen sisältävällä sivulla kerrotaan yleisesti, mitä lomakkeen käyttö vaikuttaa, ja lisäksi lähettämiseen tulee kuittaus, joka voi kertoa tarkemmin asiasta, vaikkapa tilatun tavaran arvioidun saapumispäivän.

Lomakkeen mahdolliset kentät

Yleisesti lomakkeessa voi olla seuraavan esimerkin mukaisia kenttiä. Kunkin kenttätyypin käyttöä käsitellään jäljempänä erikseen.

  1. Rivinsyöttökenttä, johon voi kirjoittaa rivin tekstiä:
  2. Salasanakenttä, johon voi kirjoittaa rivin tekstiä, joka ei tule näkyviin normaalisti vaan esimerkiksi tähtinä:
  3. Tekstialue, johon voi kirjoittaa tekstiä useita rivejä:
  4. Valikkokenttä, josta on valittava yksi (tai joskus useita) annetuista vaihtoehdoista:
  5. Valintanappeja ("radionappeja", radio buttons, joista on tarkoitus valita yksi:
    en halua kertoa
    mies
    nainen
  6. Asetusnappeja (checkboxes), joista voi valita yhden tai useampia:
    valkosipuli
    basilika
    peperone
  7. Tiedostonvalintakenttä, jossa voi valita omalta kovalevyltä (tai yleisemmin omasta tietokonejärjestelmästä) tiedoston mukaan liitettäväksi:
  8. Lähetyspainike (submit button), jolla lomakkeen voi lähettää:
  9. Kuvamuotoinen lähetyspainike (image submit button), jolla myös voi lähettää lomakkeen:
  10. Palautuspainike (reset button), jolla lomakkeen kentät voi palauttaa alkuarvoihinsa:
  11. Yleispainike, jonka mahdollinen vaikutus riippuu selaimen tukemista ns. skriptikielistä ja joka voi näyttää aivan samanlaiselta kuin lähetyspainike:
  12. Vielä yleisempi painike, jonka mahdollinen vaikutus myös riippuu selaimen tukemista skriptikielistä mutta jonka ulkoasu voi vaihdella suuresti ja esimerkiksi sisältää kuvan. Painikkeen toiminta on jokin edellä mainituista, esimerkiksi lomakkeen lähetys:

Useimmissa lomakkeissa on vain osa edellä kuvatuista kenttätyypeistä. Seuraavassa kuvataan kuitenkin kaikkien tyyppien käsittely, osittain siksi, että tavallisten tyyppien käyttö on melko hyvin arvattavissa mutta harvinaisemmat vaativat selityksiä.

Yksirivisen syöttökentän täyttö

Jos käytät hiirtä, napsauta kentän alueelle, jolloin kyseinen kenttä muuttuu aktiiviseksi eli "saa fokuksen". Jos taas käytät vain näppäimistöä, niin voit tab-näppäimellä siirtyä kentästä toiseen, kunnes tulet haluttuun kenttään. Merkkinä siitä, että kenttä on aktiivinen, on vilkkuva pystyviiva (kursori) kentässä.

Voit nyt yksinkertaisesti kirjoittaa tekstiä näppäimistöltä, ja se tulee näkyviin kenttään. Voit kirjoittaa enemmän, kun kentän näkyvä leveys on; teksti "rullaa" silloin vaakasuunnassa. Joskus kuitenkin Web-sivulla on asetettu enimmäispituus, jota ei voi normaalein keinoin ylittää. Tällöin tarkoituksena yleensä todella on, että et kirjoita enempää. Alla on tästä esimerkki; siinä on merkkien määrä rajattu viiteen Suomen postinumeroiden muodon mukaan.

IE toimii siten, että jos painat Enter- tai Return-näppäintä ollessasi kirjoittamassa yksiriviseen syöttökenttään, niin selain lähettää lomaketiedot saman tien. Tämä on joskus hyödyllistä, usein harmillista, kun lomakkeen täyttäminen olikin kesken. Web-sivulla saattaa olla koodia, joka estää tämän toiminnon. Mutta yleisesti pätee: Älä paina Enter-näppäintä, ellet ole valmis lähettämään lomaketta.

Salasanakentän täyttö

Tekstialueen täyttö

Usein tekstialue on kooltaan varsin pieni. Silloin on vaikea kirjoittaa pitkää tekstiä, kun ei näe, mitä on kirjoittanut. Valitettavasti et voi suurentaa aluetta. Sen sijaan voit tehdä niin, että kirjoitat tekstin jollakin erillisellä ohjelmalla, esimerkiksi Muistio- eli Notepad-ohjelmalla, ja sitten —leikkaat ja liimaat— sen. Toisin sanoen: hiirtä tai näppäimistöä käyttäen valitset koko kirjoittamasi tekstin, sitten esimerkiksi control-C:llä otat siitä kopion, menet lomakkeeseen ja napsautat tekstialuetta ja control-V:llä liität kyseisen tekstin sen sisällöksi.


Miten lomake täytetään: tavallinen tapa

Useimmat käyttäjät lienevät oppineet täyttämään lomakkeita hiirtä ja näppäimistöä käyttäen.

Jäljempänä on tietoja lomakkeen täyttämisen kehittyneemmistä keinoista.

Lomakkeen lähettäminen

Lähettämisen vaikutus

Lomakkeen täyttämisen kehittyneempiä keinoja

autocomplete! nimen mukaan ESC ja reset (ja kahdesti, varoitus)

Lomakkeita ja niihin liittyviä asioita Web-sivujen tekijöiden kannalta käsittelevät Web-julkaisemisen oppaan kohdat Vuorovaikutusta: lomakkeet (forms) ja Palvelinskriptit (server-side scripting) sekä yksityiskohtaisesti Jyväskylän yliopiston tietotekniikan approbatur-opintojen aineiston osa WWW-lomakkeet. Laajemmin aihetta käsittelee englanninkielinen kooste How to write HTML forms.