WWW-lomakkeet - Luento 4

• Luentotaltiointi
• Mihin WWW-lomakkeita voi ja kannattaa käyttää?
  • WWW-lomakkeella saavutettavat hyödyt
  • WWW-lomakkeen käytöstä aiheutuvat haitat
• Lomakkeen tekeminen
  • label - kentän otsikko
  • input - text, radio, checkbox, hidden ja submit
  • select - valintalista
  • textarea - tekstikenttä
  • button - yleispainike
  • fieldset ja legend - lomakkeen rakenne
• Lomakkeen käytettävyyden ja esteettömyyden parantaminen
  • Erilaisia ohjeita ja vihjeitä lomakkeiden suunnitteluun
• XForms 1.0
  • Hyödyt
  • Nykytoteutukset
  • Yksinkertainen XForms-esimerkki
  • XForms-esimerkkejä

Käsitellään WWW-lomaketekniikoiden nykyisiä mahdollisuuksia ja mahdottomuuksia XHTML-dokumenteissa sekä katsastetaan lomakkeiden tulevaisuutta.

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

• Vuorovaikutus käyttäjän kanssa.
  • esim. WDG-validaattori
• Dynaamiset sivustot.
  • esim. Korppi
• Erilaisten kyselyjen tekemiseen vs. sähköposti
  • esim. kurssikysely
• Yhteydenottopyynnön tekeminen vs. sähköposti
  • esim. palaute kirjan tekijälle
• Sivuston tai tapahtuman palautelomakkeena vs. sähköposti
  • esim. appron palaute
• Tiedonhakuun sivustolta vs. sivukartta
  • esim. haku ja sivukartta puolustusvoimien sivulla
• Tilausten vastaanottaminen vs. perinteinen tilauslomake
  • esim. verkkokauppa.com

Kysely- ja palautelomakkeiden käytössä kannattaa pitää järki mukana, koska niille kannattaa aina järjestää vaihtoehtoinen tapa. Palautelomakkeen vaihtoehtona toimii hyvin esimerkiksi suora sähköpostiosoite, puhelinnumero tai postiosoite.

WWW-lomakkeella saavutettavat hyödyt

• Tiedot saadaan talteen sähköisessä muodossa.
  • Jatkokäsittelystä saadaan yksi työläs vaihe pois.
  • Ei tarvitse käsitellä vastauspapereita.
  • Arkistointi voidaan automatisoida.
  • Toimii ohjelmarippumattomasti (vrt. mailto-linkki)
• Ajasta riippumattomuus.
• Interaktio käyttäjän kanssa.

WWW-lomakkeen käytöstä aiheutuvat haitat

• Käyttöliittymänä hyvin rajallinen ja hankala.
• Ei välttämättä saada omaa kopiota (esimerkiksi tilaus).
• Tietojen mahdollinen häviäminen bittiavaruuteen.
• Helppo jättää täyttämättä.
• Varmuuden lisäämiseksi tarvitaan erillinen lomakkeen käsittelevä ohjelma.
• Lomakkeen käsittelevä ohjelma on kohtuullisen monimutkainen itse tehtynä.

Lomakkeen tekeminen

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

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

• action-attribuutti kertoo miten tai millä lomakkeelle syötetyt tiedot käsitellään
• method-attribuutti kertoo tavan, jolla tieto lähetetään käyttäjältä käsittelijälle. Mahdollisia arvoja ovat post ja get. Metodien erot käydään läpi myöhemmin.
• Esimerkki yksinkertaisesta lomakkeesta.
• Luennolla tehty esimerkkilomake. Esteettömyyttä edistävät tabindex- ja accesskey-attribuutit huomioitu.
• Lisää luennolla 5.

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

<label for="lempinimi" accesskey="L">
Nickname: </label>
<input id="lempinimi" type="text" name="nick"
 maxlength="11" size="20" value="Kutsumanimi" 
 title="Anna lempinimi jota käytät palvelussa" />

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

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

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

<label for="txtalue">Vapaat kommentit:</label>
<textarea id="txtalue" name="kommentti" 
 rows="5" cols="20">Sana on vapaa...</textarea>

<select id="ruokapaikat" multiple="multiple" 
 size="3" name="ruokap">
<optgroup label="Pizza">
<option value="kotipizza" 
 selected="selected">Kotipizza</option>
<option value="rax">Rax</option>
<option value="rosso" >Rosso</option>
</optgroup>
<optgroup label="Burger">
<option value="mcd">McDonald's</option>
<option value="hese" 
 selected="selected">Hesburger</option>
</optgroup>
</select>

<fieldset>
<legend>Yleiset tiedot</legend>
</fieldset>

<input type="image" src="laheta.png" name="laheta"
 value="klikattukuvaa" alt="[Lähetä]"
 title="Lähettää lomakkeen tiedot" />

<input type="file" name="siirrettava_tiedosto"
 accept="application/rtf" />

<input type="hidden" name="ohjaus"
 value="lomake082" />

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

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

label - kentän otsikko

• label toimii lomake-elementtien otsikkokenttänä.
• label yhdistetään for-attribuutilla lomake-elementin id-attribuuttiin.
• Esimerkki label-elementin käytöstä.

input - text, radio, checkbox, hidden ja submit

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

• type - attribuutti voi saada seuraavia arvoja:

  type= text | password | checkbox | radio | submit | reset |
         file | hidden | image | button 

  • text - Vapaamuotoinen tekstikenttä.
  • submit - Lomakkeen hyväksymispainike.
  • reset - Lomakkeen tyhjentämiseen tarkoitettu painike.
  • hidden - Piilotettua tietoa varten. Voidaan käyttää esimerkiksi lomakkeen käsittelevän ohjelman ohjaamiseen.
  • radio - Yksivalintainen kontrolli. Kätevä pienissä listoissa.
  • checkbox - Monivalintainen. Kätevä pienissä listoissa.

Muutamia muita input-elementin attribuutteja

• value - yleensä oletusarvo elementille. Valintaruudussa ja -napissa välitettävä arvo.
• name - määrittää elementille nimen.
• size - kertoo elementin pituuden.
• maxlength - kertoo elementin maksimipituuden (text, password).
• checked - kertoo elementin (radio, checkbox) olevan valittu (checked="checked").
• Esimerkki yksinkertaisesta lomakkeesta.
• Esimerkki valintaruudun (engl. checkbox) ja -napin (engl. radiobutton) käytöstä

select - valintalista

select-elementtiä käytetään erilaisten valintalistojen tekemiseen. Valintalistoilla saadaan määriteltyä vaihtoehtoisia valintoja tai pystytään käyttämään useamman asian valitsemiseen. option-elementtien sisälle määritellään valintalistaan liittyvät valinnat. Valintalistajen käytöllä saavutetaan seuraavia hyviä ja huonoja puolia:

• Säästävät tilaa esimerkiksi radio- tai checkbox-elementtiin verrattuna.
• Monivalinnan mahdollisuus, mutta monille käyttäjille hieman vaikea (CTRL-näppäin).
• Listan ryhmittelyä kannattaa käyttää selkeyttämään listaa (optgroup).
• Pitkät valintalistat ovat todella huonoja käytettävyyden kannalta.
• Esimerkki valintalistan käytöstä.

Valintalistaan liittyviä attribuutteja

• select-elementin attribuutteja
  • name-attribuutilla annetaan nimi.
  • multiple-attribuuttilla kerrotaan, että aktiiviseksi voidaan valita useampia listan kohtia (multiple="multiple")
  • size-attribuutilla voidaan määritellä valintalistassa yhtäaikaa näytettävien lomakenttien määrä. Jos size on määritelty, niin listaa en näytetä valintalistana, vaan listaa voidaan ainoastaan vierittää.
• option-elementin attribuutteja
  • selected-attribuutilla määritellään oletusvalinta valintalistaan (selected="selected").
  • value-attribuutilla määritellään valinnan antama arvo.
• optgroup-elementin attribuutteja
  • label-attribuutilla (optgroup) määritellään listassa näkyvän ryhmän nimi.

textarea - tekstikenttä

• Vapaamuotoinen tekstikenttä.
• Pelkästään yleisen tiedon kyselyyn.
• Tekstikentän koko voidaan määritellä tarkkaan.
• Esimerkki laajemman tekstikentän käytöstä.

Seuraavassa muutamia textarea-elementin attribuutteja

• name-attribuutilla annetaan nimi.
• rows-attribuutilla määritellään kentässä näkyvien rivien lukumäärä.
• cols-attribuutilla määritellään kentässä näkyvien merkkien lukumäärä.

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.

• fieldset-elementillä määritellään lomake-elementit kuulumaan samaan ryhmään.
• Ryhmiä kannattaa miettiä esimerkiksi lomakkeen kysymyksien aihealueen mukaisesti.
• legend-elementillä määritellään lomakeryhmän (fieldset) otsikko.
• Esimerkki ryhmittelyn käytöstä. Ryhmittelyä on käytetty kaikissa edellisissä esimerkeissä.

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.

• Ryhmittele samaan asiaan liittyvät kenttäelementit (fieldset ja legend) sekä valintalistan kohdat (optgroup)
• accesskey-omaisuudella lomakkeen kentille voidaan määrittää pikanäppäinkomennot.
• Lomakkeessa eteneminen täyttöjärjestyksessä täytyy olla mahdollista TAB-näppäimen avulla. Lomake-elementit kannattaa laittaa siihen järjestykseen kuin ne täytetään. tabindex-ominaisuudella voidaan tarvittaessa määrittää lomakekenttien läpikäyntijärjestys.
• title-elementillä voidaan selventää lomakkeen kentän merkitystä.
• Älä laita lomakkeelle tyhjennä-painiketta (reset)! (voi käyttää, jos lomake on esim. esitäytetty, mutta silloinkin on miettivä painikkeen sijoittelua)
• Lomakkeen viimeiseksi elementiksi lähetyspainike (submit).
• Lisää lomakkeen kenttiin oletusarvot.
• Lomakkeeseen (form) vain lomake-elementit ja niihin liittyvät täyttöohjeet.
• Ennen lomaketta on kerrottava kaikki täytössä tarvittavat tiedot.
• Ennen lomake-elementtiä tieto lomakkeeseen syötettävästä tiedosta ja sen muodosta.
• Helposti syötettäviä arvoja (esim. kuukaudet tai päivät) tekstikentiksi valintalistojen sijaan.
• Lomake-elementtien järjestelyssä kannattaa välttää taulukointia, mutta mikäli se on tarpeen, niin on katsottava, että label- ja input-elementit yhdistyvät loogisesti (kts. http://www.accessify.com/tutorials/better-accessible-forms.asp).

Erilaisia ohjeita ja vihjeitä lomakkeiden suunnitteluun

• Lomake luettuna - TIEKE
• Lomakkeet - TIEKE
• How to Create Accessible Forms - Paul Bohman
• Accessible Forms - James W. Thatcher

XForms 1.0

Tavallisten lomakkeiden rajoitukset tulevat hyvin nopeasti vastaan, kun aletaan tekemään hiemankin monimutkaisempia lomakkeita ja dynaamisia sivustoja. Tyypillinen ongelma tavallisissa lomakkeissa on staattisuus ja monimutkainen käsittely. Lomake on aina tietynlainen tietyillä alkuarvoilla ja varsinainen toiminnallisuus ja syötteiden tarkistukset on tehtävä palvelinpuolella ohjelmallisesti.

XForms-spesifikaation löydät osoitteesta http://www.w3.org/TR/xforms/

Hyödyt

XForms tarjoaa W3C:n mukaan seuraavia etuja verrattuna perinteisiin lomakkeisiin:

• Laitteistoriippumaton
• Tietojen tarkistus kirjoitettaessa
• Voidaan määritellä pakolliset kentät
• Tiedon välitys XML-muodossa (XML tulee myöhemmillä luennoilla)
• Tiedon välitys useisiin kohteisiin
• Lähetettyjä tietoja voidaan hyödyntää toisilla lomakkeilla.
• Kenttien tietojen lataaminen ja tallentaminen tiedostosta.
• Oletusarvojen lataaminen tiedostosta.
• Laskennallisten toimenpiteiden tekeminen ennen lähettämistä.
• Lomakkeen täyttövelhot

Nykytoteutukset

XForms-tyyppisiä lomakkeita tullaan luultavasti tukemaan uusissa selainversioissa suoraan, mutta nykyisellään XForms-lomakkeet on toteutettu seuraavantyyppisillä ratkaisuilla:

• Plug-in (ladattava lisäpalikka) selaimeen
• Erillinen selain, joka tukee XForms-lomakkeita.
• Flash-animaatioon toteutettavissa sopivilla moduuleilla
• Java-applettina tehtävissä lisäkomponenteilla.
• Palvelinohjelma, joka muuntaa XForms-elementit HTML:ksi ja JavaScriptiksi
• Toteutuksista lisää W3C:n Forms-sivuilla.

Yksinkertainen XForms-esimerkki

Lomakkeen koodi:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xml:lang="fi">
<head>
<xf:model>
  <xf:instance>
    <henkilo>
      <nimi/>
      <email/>
      <sukupuoli/>
    </henkilo>
  </xf:instance>
  <xf:bind id="nimivaatimus" required="true()" nodeset="/henkilo/nimi">
  <xf:submission action="http://palvelin/kasittelija" method="post"
   includenamespaceprefixes="#default" id="laheta"/>
</xf:model>
</head>
<xf:input ref="nimi" bind="nimivaatimus">
  <xf:label>Nimi:</xf:label>
  <xf:hint>Anna koko nimesi tähän</xf:hint>
</xf:input>
<xf:input ref="email">
  <xf:label>E-mail:</xf:label>
</xf:input>
<xf:select1 ref="sukupuoli">
  <xf:label>Valitse sukupuoli:</xf:label>
  <xf:item>
    <xf:label>Mies</xf:label>
    <xf:value>m</value>
  </xf:item>
  <xf:item>
    <xf:label>Nainen</xf:label>
    <xf:value>n</xf:value>
  </xf:item>
</xf:select1>
<xf:submit submission="laheta">
  <xf:label>Lähetä</xf:label>
</xf:submit>

Esimerkki lähetetyistä tiedoista:

<henkilo>
  <nimi>Jukka Mäntylä</nimi>
  <email>jmantyla@cc.jyu.fi</email>
  <sukupuoli>Mies</sukupuoli>
</henkilo>

Lyhyt oppimäärä XFormsista:

• http://www.devshed.com/c/a/XML/XForms-Basics/
• http://xformsinstitute.com/lesson1.php

XForms-esimerkkejä

• http://claus.packts.net/deng/examples/ - vaatii Macromedia Flash -komponentin
• http://www.formfaces.com/samples/examples.html - JavaScript oltava päällä
• http://www.x-smiles.org/demo/demos.xhtml - esimerkkejä XForms-lomakkeita tukevalle selaimelle