WWW-lomakkeet - Luento 7
- Luentotaltiointi
- Mihin WWW-lomakkeita voi ja kannattaa käyttää?
- Lomakkeen tekeminen
- HTML 5 ja lomakkeet
- Lomakkeen käytettävyyden ja esteettömyyden parantaminen
- 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.
Luentotaltiointi
- www07.wmv 77M
- www07.mp3 18M
- www07_h264.avi H.264-pakkaus, 253M
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
Luennolla tehty 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.
Elementti | Koodi | Esimerkki |
---|---|---|
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ä |
<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> |
|
Lomake-elementtien ryhmittely | <fieldset> <legend>Valintoja</legend> <input type="text" name="testi" /> </fieldset> | |
Kuva-painike | <input type="image" src="laheta.png" name="laheta" value="klikattukuvaa" alt="[Lähetä]" title="Lähettää lomakkeen tiedot" /> |
|
Tiedosto-painike |
<label for="filerequest">Valitse tiedosto:</label> <input type="file" id="filerequest" name="siirrettava_tiedosto" accept="application/rtf" /> |
|
Piilokenttä | <input type="hidden" name="ohjaus" value="lomake8" /> | |
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ä.
- 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.
- 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
- 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
Selaimien tuki uutuuksille on valitettavasti vielä erittäin heikkoa Operaa lukuun ottamatta.
Esimerkkilomake, jossa käytetty HTML 5 -ominaisuuksia
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 21.2. mennessä
- Toteutus 60 pv suunnitelman hyväksymisestä
Käyttäjien kommentit