WWW-lomakkeet - Luento 5
- Luentotaltiointi
- Mihin WWW-lomakkeita voi ja kannattaa käyttää?
- Lomakkeen tekeminen
- Lomakkeen käytettävyyden ja esteettömyyden parantaminen
- XForms 1.0
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 käsittelyn erikoistilanteet, esimerkiksi skandinaaviset merkit.
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 luennolla 6.
- Esimerkki yksinkertaisesta lomakkeesta.
- Luennolla tehty esimerkkilomake. Esteettömyyttä edistävät tabindex- ja accesskey-attribuutit huomioitu.
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.
Elementti | Koodi | Esimerkki |
---|---|---|
Kentän otsikko ja tekstikenttä | <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" /> | |
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> | kts. XHTML 1.1 -painikkeet |
Lomake-elementtien ryhmittely | <fieldset> <legend>Yleiset tiedot</legend> </fieldset> | kts. XHTML 1.1 -painikkeet |
Kuva-painike | <input type="image" src="laheta.png" name="laheta" value="klikattukuvaa" alt="[Lähetä]" title="Lähettää lomakkeen tiedot" /> | kts. XHTML 1.1 -painikkeet |
Tiedosto-painike | <input type="file" name="siirrettava_tiedosto" accept="application/rtf" /> | kts. XHTML 1.1 -painikkeet |
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
- 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, 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:
- Laitteistoriippumaton.
- Käyttöliittymän ulkoasua ei ole kiinnitetty.
- Tietojen tarkistus kirjoitettaessa.
- Voidaan määritellä pakolliset kentät ja kenttien tietotyypit.
- Tiedon välitys XML-muodossa.
- 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 tulee osaksi XHTML2-spesifikaatiota. XForms-tyyppisiä lomakkeita tullaan luultavasti tukemaan uusissa selainversioissa suoraan (esim. kehitteillä Mozillaan), mutta nykyisellään XForms-lomakkeita voidaan käyttää seuraavantyyppisillä ratkaisuilla:
- Plug-in (ladattava lisäpalikka) selaimeen (esim. FormsPlayer IE:lle)
- Erillinen selain, joka tukee XForms-lomakkeita (esim. X-smiles, tulossa Mozillaan).
- Flash-animaatioon toteutettavissa sopivilla moduuleilla (esim. DENG)
- Java-applettina tehtävissä lisäkomponenteilla (esim. Chiba).
- Palvelinohjelma, joka muuntaa XForms-elementit HTML:ksi ja JavaScriptiksi (esim. FormFaces)
- Toteutuksista lisää W3C:n Forms-sivuilla.
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
- http://www.w3.org/MarkUp/Forms/2003/xforms-for-html-authors.html
- http://xforms.dstc.edu.au/tutorial/
- http://www.devshed.com/c/a/XML/XForms-Basics/
- http://xformsinstitute.com/lesson1.php
Lisää 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
Käyttäjien kommentit