WWW-lomakkeet - Luento 7

• 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 - tekstialue
  • button - yleispainike
  • fieldset ja legend - lomakkeen rakenne
• HTML 5 ja lomakkeet
• Lomakkeen käytettävyyden ja esteettömyyden parantaminen
  • Erilaisia ohjeita ja vihjeitä lomakkeiden suunnitteluun
• Harjoitustyö

Luennolla käsitellään WWW-lomaketekniikoiden nykyisiä mahdollisuuksia ja mahdottomuuksia XHTML-dokumenteissa sekä katsastetaan lomakkeiden tulevaisuutta. Lisäksi käydään läpi harjoitustyön suunnitelmaa.

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

• Dynaamiset sivustot ja vuorovaikutus käyttäjän kanssa:
  • Esim. W3C-validaattori
  • Esim. Korppi
  • Esim. Karttapaikka
  • Sivun sisältö riippuu käyttäjästä ja käyttäjän valinnoista.
• Erilaisten kyselyjen tekemiseen vs. sähköposti:
  • Esim. kurssikysely
• Sivuston tai tapahtuman palautelomakkeena vs. sähköposti:
  • Esim. palautelomake
  • Huomioi vaihtoehtoiset palautekanavat! (sähköposti, puh. nro, postiosoite)
• Tiedonhakuun sivustolta vs. sivukartta:
  • Esim. haku ja sivukartta Puolustusvoimien sivuilla
• Tilausten vastaanottaminen vs. perinteinen tilauslomake:
  • Esim. SFS

WWW-lomakkeella saavutettavat hyödyt

• Tietojen kysely verkossa.
• Tiedot saadaan talteen sähköisessä muodossa.
  • Jatkokäsittelystä saadaan yksi työläs vaihe pois.
  • Ei tarvitse käsitellä vastauspapereita.
  • Arkistointi voidaan automatisoida.
• Vuorovaikutus käyttäjän kanssa.
• Valintojen mukaan muuttuvat sivustot.

WWW-lomakkeen käytöstä aiheutuvat haitat

• Käyttöliittymänä rajallinen ja hankala.
• Ei välttämättä saada omaa kopiota (esimerkiksi tilaus).
• Tietojen mahdollinen häviäminen bittiavaruuteen.
• Verkossa tehtävä kysely on helppo ohittaa.
• Usein tarvitaan erillinen lomakkeen käsittelevä ohjelma.
  • Lomakkeen käsittelevä ohjelma on kohtuullisen monimutkainen itse tehtynä.
  • Lomakkeen käsittelyn erikoistilanteet, esimerkiksi skandinaaviset merkit.

Lomakkeen tekeminen

Esimerkkilomake

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 luennolla 8.
• Esimerkki yksinkertaisesta lomakkeesta.

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ä input-elementin erilaiset tyypit. Seuraavassa käydään esimerkkien avulla tarkemmin läpi lomake-elementtejä ja niiden toimintaa.

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

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

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

<fieldset>
<legend>Valintoja</legend>
<input type="text" name="testi" />
</fieldset>

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

<label for="filerequest">Valitse tiedosto:</label>
<input type="file" id="filerequest" 
name="siirrettava_tiedosto"
accept="application/rtf" />

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

<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ä.
  • password - Kuten tekstikenttä, mutta kirjaimet näkyvät "tähtinä".
  • checkbox - Monivalintainen valintaruutu. Kätevä pienissä listoissa.
  • radio - Yksivalintainen valintakontrolli. Kätevä pienissä listoissa.
  • submit - Lomakkeen hyväksymispainike. Lähettää lomakkeen tiedot käsittelijälle.
  • reset - Lomakkeen tyhjentämiseen tarkoitettu painike.
  • file - Tiedoston lataamista varten.
  • hidden - Piilotettua tietoa varten. Voidaan käyttää esimerkiksi lomakkeen käsittelevän ohjelman ohjaamiseen.
  • image - Painike, jossa taustalla kuva.
  • button - Normaali painike.

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

• Säästävät tilaa esimerkiksi radio- tai checkbox-elementteihin 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-attribuutilla 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 ei 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 - tekstialue

• 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ä yhdellä rivillä 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 aihealueiden mukaisesti.
• Myös sisäkkäiset ryhmittelyt ovat mahdollisia.
• legend-elementillä määritellään lomakeryhmän (fieldset) otsikko.
• Esimerkki ryhmittelyn käytöstä. Ryhmittelyä on käytetty kaikissa esimerkin kysymyksissä.

HTML 5 ja lomakkeet

HTML 5 tuo tullessaan useita parannuksia lomakkeisiin (kts. uudistukset). Muun muassa input-elementin type-attribuutin arvoksi voi HTML 5:ssa syöttää uusina arvoina seuraavat:

• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

Lisäksi input-elementille on tulossa kokonaan uusina attribuutteina muun muassa seuraavat:

• required
• autocomplete
• min
• max
• placeholder

Selaimien tuki uutuuksille on valitettavasti vielä heikkoa etenkin IE:n ja Firefoxin osalta. Parhain tuki löytyy Operasta. Myös Chrome ja Safari tukevat muutamia uusia ominaisuuksia.

Dive Into HTML5 - A Form of Madness: selitystä uusista HTML 5:n lomakeominaisuuksista esimerkkien kera

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.

• label- ja input-elementtien on yhdistyttävä loogisesti.
  • Lomake-elementtien järjestelyssä kannattaa välttää taulukointia, sillä tämä johtaa joskus siihen, että lomakeotsikko ja -elementti eivät yhdisty.
• Ryhmittele samaan asiaan liittyvät kenttäelementit (fieldset ja legend) sekä valintalistan kohdat (optgroup).
• Lomakkeessa eteneminen täyttöjärjestyksessä täytyy olla mahdollista TAB-näppäimen avulla.
  • Lomake-elementit kannattaa laittaa siihen järjestykseen kuin missä ne täytetään.
  • tabindex-ominaisuudella voidaan tarvittaessa määrittää lomakekenttien läpikäyntijärjestys, esim. jos on useita lomakkeita tai esitysjärjestys dokumentissa ei ole looginen.
• Älä laita lomakkeelle tyhjennä-painiketta (reset)! (Voi käyttää, jos lomake on esim. esitäytetty, mutta silloinkin on miettivä painikkeen sijoittelu tarkkaan.)
• 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.
• title-elementillä voidaan selventää lomakkeen kentän merkitystä.
• accesskey-ominaisuudella lomakkeen kentille voidaan määrittää pikanäppäinkomennot (ALT + SHIFT + ACCESSKEY).

Erilaisia ohjeita ja vihjeitä lomakkeiden suunnitteluun

• Esteettömyysopas - TIEKE
• Creating Accessible Forms - WebAIM
• Accessible Forms - James W. Thatcher

Harjoitustyö

• Suunnitelma 22.2. mennessä
• Toteutus 60 pv suunnitelman hyväksymisestä