WWW-lomakkeet - Luento 5

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

Luentotaltiointi

Ongelmia videon katselussa?

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

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

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

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.

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

Lomake-elementtien ryhmittely
<fieldset>
<legend>Yleiset tiedot</legend>
</fieldset>
Valintoja
Kuva-painike
<input type="image" src="laheta.png" name="laheta"
 value="klikattukuvaa" alt="[Lähetä]"
 title="Lähettää lomakkeen tiedot" />

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

Piilokenttä
<input type="hidden" name="ohjaus"
 value="lomake082" />
Lähetä-painike
<input type="submit" name="laheta"
 value="Lähetä tiedot" />
Tyhjennä-painike
<input type="reset" name="tyhjenna"
 value="Tyhjennä lomake" />

label - kentän otsikko

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

Muutamia muita input-elementin attribuutteja

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:

Valintalistaan liittyviä attribuutteja

textarea - tekstikenttä

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

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, esimerkiksi verkkokauppojen ostoskoria ei voida toteuttaa nykyisillä lomakkeilla ilman www-ohjelmointikieliä. 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:

Nykytoteutukset

XForms tulee osaksi XHTML2-spesifikaatiota. XForms-tyyppisiä lomakkeita tullaan luultavasti tukemaan uusissa selainversioissa suoraan. Nykyisellään XForms-lomakkeita voidaan käyttää seuraavantyyppisillä ratkaisuilla:

XForms-esimerkkejä

Esimerkkivideo XForms-lomakkeista (wmv9)

Yksinkertaisen XForms-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">
<!-- Oletusnimiavaruutena käytetään xhtml:n nimiavaruutta, mutta jos etuliitteeksi laitetaan xf, niin
     tällöin viitataan XForms-spesifikaation elementteihin -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xml:lang="fi">
<head>
  <style type="text/css">
  <!--
  /* Yleensä tyylejä ei kannata laittaa XHTML-koodin sekaan! */

  /* Määritellään input-elementit lohkoiksi jolloin ne rivittyvät eivätkä mene putkeen */
  xf\:input {
    display: block;
    width: 20%;
  }
  
  /* Jos syötekenttä ei ole määrityksen mukainen niin reunustetaan se punaisella */
  xf\:input.invalid {
    border: 1px dotted red;
  }
  -->
</style>
<xf:model>
  <!-- Määritellään kerättävän tiedon tyyppi -->
  <xf:instance>
    <henkilo xmlns="">
      <nimi/>
      <email/>
      <sukupuoli>N</sukupuoli>
    </henkilo>
  </xf:instance>
  <!-- Määritellään sovelluslogiikka -->
  <xf:bind id="nimivaatimus" required="true()" nodeset="/henkilo/nimi">
  <xf:submission action="http://palvelin/kasittelija" method="post"
   includenamespaceprefixes="#default" id="laheta"/>
</xf:model>
</head>
<body>
<h1>Täytä lomake <xf:output ref="/henkilo/nimi"/></h1>
<!-- Määritellään lomakkeen käyttöliittymä -->
<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>Nainen</xf:label>
    <xf:value>n</xf:value>
  </xf:item>
  <xf:item>
    <xf:label>Mies</xf:label>
    <xf:value>m</value>
  </xf:item>
</xf:select1>
<xf:submit submission="laheta">
  <xf:label>Lähetä</xf:label>
</xf:submit>
</body>
</html>

Esimerkki lähetetyistä tiedoista:

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

Lisää XForms-lomakkeista

Lisää XForms-esimerkkejä

Harjoitustyö

Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/luennot/luento5/
© Jukka Mäntylä (jmantyla@mit.jyu.fi)<URL: http://www.iki.fi/jmantyla/>
2005-12-19 14:53:38