Lomake-elementit

• Kentän otsikko - label
• input-elementti
  • Yleiset ominaisuudet
  • Tekstikenttä - text
  • Salasanakenttä - password
  • Valintaruutu - checkbox
  • Valintanappi - radio
  • Lähetä-painike - submit
  • Tyhjennä-painike - reset
  • Piilokenttä - hidden
• Tekstialue - textarea
• Valintalista - select
  • select-elementti
  • option-elementti

WWW-lomakkeille voidaan lisätä hyvin monenlaisia elementtejä, joiden avulla lomakkeista saadaan käyttökelpoisia tehtäväänsä. Erilaisia elementtejä käyttämällä lomakkeesta voidaan saada monipuolinen ja pystytään jopa hieman rajoittamaan käyttäjän antamia syötteitä. Varsin usein lomakkeelle tehdään pelkästään erilaisia tekstikenttiä, mutta muitakin mahdollisuuksia kannattaa toki ajatella.

Seuraavassa listassa on lyhyesti esiteltynä erilaisia lomakekenttiä, joita lomakkeelle voidaan sijoittaa. Kuvauksen perässä on luvun numero, jossa elementtiä käsitellään tarkemmin.

• Yksirivinen tekstisyöttökenttä (input type=”text”), johon käyttäjä voi syöttää vapaasti tekstiä yhdelle riville. (0.2.2)

• Laajempi tekstikenttä (textarea), johon voidaan syöttää tekstiä useammalle riville. (0.2.3)

• Salasanakenttä (input type=”password”), johon syötettyjen merkkien paikalla näytetään tähtimerkki (*). (0.2.2)

• Valintaruutu (input type=”checkbox”) on neliön muotoinen kenttä, joita voidaan valita päälle tai pois päältä. Valintaruutuja voidaan valita useampia samasta ryhmästä. (0.2.2)

• Valintanappi (input type=”radio”) on ympyrän muotoinen kenttä, joka voidaan valita päälle. Valintanappeja voidaan valita ainoastaan yksi samasta ryhmästä. (0.2.2)

• Lähetyspainike (input type=submit””), jonka avulla kyseisen lomakkeen tiedot lähetetään. (0.2.2)

• Tyhjennyspainike (input type=”reset”), jolla lomakkeen tiedot saadaan tyhjennettyä tai palautettua oletusarvoille. (0.2.2)

• Piilokenttä (input type=”hidden”), jolla lomakkeella voidaan viedä tietoja siten, että käyttäjä ei näe niitä selainikkunassa. Tiedot ovat kuitenkin näkyvissä lomakkeen lähdekoodissa, joten elementtiä ei kannata käyttää arkaluontoisten tietojen lähettämiseen. (0.2.2)

• Valintalista (select) on alasvetovalikko, jolla voidaan toteuttaa erilaisia valintoja lomakkeelle. (0.2.4)

Kentän otsikko - label

label-elementti toimii lomake-elementtien otsikkona. Lomakkeen käytettävyyden vuoksi otsikko täytyy sijoittaa ennen varsinaista lomake-elementtiä.

for-attribuuttia käytetään yhdistämään otsikko varsinaiseen lomake-elementtiin. Lomake-elementin id-attribuutin ja otsikon for-attribuutin arvojen on oltava samat. Arvojen on oltava yksikäsitteiset, joten otsikko voi viitata ainoastaan yhteen lomake-elementtiin. Seuraavassa esimerkki label-elementin käytöstä:

<label
for="name">Nimi:
</label><input id="name"
type="text" name="Nimi" value="Etunimi Sukunimi"
/>

accesskey-attribuutin avulla voidaan lomake-elementille määritellä pikanäppäin, jota painamalla siirrytään kenttään, jonka otsikkoon pikanäppäin on määritelty. Yleensä pikanäppäimen kanssa pitää painaa myös jokin toinen näppäin. Tämä näppäin riippuu jonkin verran käytettävästä käyttöjärjestelmästä. Esimerkiksi Windows-ympäristössä näppäin on ALT. Kirjoitushetkellä ainakin Internet Explorerin (IE) versio 5.5 tukee pikanäppäinten käyttöä. Seuraavan esimerkin mukaisen lomakekentän saa aktivoitua painamalla ALT-N-näppäinyhdistelmää.

<p><label
accesskey="N" for="name">Nimi:
</label>
<input id="name" type="text"
name="Nimi" value="Etunimi Sukunimi"
/>
</p>

input-elementti

input-elementti on hyvin monipuolinen lomakkeella käytettävä elementti, jonka type-attribuutin arvoa vaihtamalla saadaan käyttöön erilaisia lomake-elementtejä.

Yleiset ominaisuudet

name-attribuutilla voidaan antaa kontrollille nimi. Nimen antamisen hyöty tulee näkyviin vasta lomakkeen käsittelyn yhteydessä, koska kontrollin arvo lähetetään lomakkeen tiedot käsittelevälle ohjelmalle muodossa name=kentan+sisalto .

value-attribuutilla voidaan kontrollille antaa oletusarvo. Lomakkeen lataamisen yhteydessä value-attribuutin arvo näkyy valmiiksi kontrollissa. Valintaruudun ja valintanapin yhteydessä value-attribuutin arvo välitetään lomakkeen tiedot käsittelevälle ohjelmalle.

Seuraavassa lyhyt esimerkki name- ja value-attribuutin käytöstä. Esimerkissä name-attribuutin arvona on kokonimi ja value-attribuutin arvona on teksti ”Etunimi Sukunimi”.

Kuten oheisesta kuvasta voi päätellä, niin -attribuutin arvo näytetään oletuksena lomakekentässä.

<input type="text"
name="kokonimi" value="Etunimi Sukunimi" />

Jos edellisen esimerkin lomakkeen tiedot lähetetään käsittelevälle ohjelmalle oletusasetuksilla, niin tiedot ovat seuraavaa muotoa (name=value):

kokonimi=Etunimi+Sukunimi

size-attribuuttilla voidaan määritellä kontrollille pituus. Pituus annetaan pikseleinä, mutta jos attribuutin type arvona on text tai password, niin arvo tarkoittaa kenttään mahtuvien merkkien lukumäärää.

id-attribuutilla voidaan elementille antaa yksikäsitteinen id-nimi, johon voidaan viitata esimerkiksi label-elementissä.

tabindex-attribuutilla voidaan elementeille määritellä tabulointijärjestys eli järjestys, jossa kentät aktivoituvat painettaessa tab-näppäintä. tabindex-attribuutin arvoksi voidaan antaa numerot välillä 0-32767.

type-attribuutilla määritellään input-elementin käyttötarkoitus. Mahdollisia type-elementin arvoja ovat text, password, checkbox, radio, submit, reset ja hidden. Seuraavassa esimerkkejä type-attribuutin erilaisista mahdollisuuksista.

Tekstikenttä - text

-arvo luo oheisen kuvan mukaisen yksirivisen tekstisyöttökentän. Seuraavassa esimerkki kuvan mukaisen tekstisyöttökentästä.

<p><label
for="email">Email: </label> 
<input
id=”email” type="text" name="email"
value="Sahköpostiosoite"
/>
</p>

Syöttökentän pituutta ei ole oletuksena rajoitettu, joten riville voi syöttää tekstiä kohtuullisen paljon. Kentän pituutta voidaan rajoittaa maxlength-attribuutin avulla ja näkyvissä olevan tekstikentän koko lomakkeella voidaan määritellä size-attribuutin avulla. Seuraavassa esimerkissä sotun syöttämistä on haluttu rajoittaa. Sotu sisältää yksitoista merkkiä, joten kenttään halutaan tasan yksitoista merkkiä.

<p>

<label for="sotu">Sotu: </label>

<input
maxlength="11"size="11" id="sotu"
type="text" name="sotu" value="000000-000A"
/>
</p>

Salasanakenttä - password

-arvo luo tekstikentän, johon voidaan syöttää merkkejä siten, että näytöllä merkkien kohdalle kirjoitetaan tähtimerkki (asteriski, *). Tämä ei anna oikeasti mitään salausta kirjoitetulle tekstille, koska kenttään kirjoitettu teksti tullaan lähettämään selkokielisenä lomakkeen käsittelevälle ohjelmalle. Oheisessa kuvassa seuraavan esimerkin mukainen salasanakenttä, johon on syötetty jo salasana.

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

Valintaruutu - checkbox

-arvo tekee elementistä valintaruudun. Valintaruudut ovat neliön muotoisia kenttiä, joita käyttäjä voi halutessaan valita päälle tai pois päältä. Ruutuja voidaan valita useampiakin, joten ne eivät ole toisensa pois sulkevia, kuten esimerkiksi valintanapit. Valintaruutuja voidaan valita useampia, joten kaikkien valittujen arvot lähetetään lomakkeen lähettämisen yhteydessä. Seuraavassa esimerkissä on oheisen kuvan mukainen valintaruuduilla toteutettu kysymys. Esimerkistä kannattaa huomata, että kaikkien samaan ryhmään kuuluvien valintaruutujen -attribuutin arvon on oltava sama.

checked-attribuutilla valintaruudulle voidaan määritellä oletusarvo. Tällöin attribuutin arvoksi on laitettava checked.(checked="checked")

<p><label
for="henkiloauto">henkilöautolla
</label>
<input id="henkiloauto"
type="checkbox" 
 name="tyomatka" value="hauto"
/><br />
<label
for="bussi">bussilla </label>
<input
id="bussi" type="checkbox" name="tyomatka" value="bussi"

 checked="checked" /><br
/>
<label
for="juna">junalla </label>
<input id="juna"
type="checkbox" name="tyomatka" value="juna" /><br
/>
<label
for="pp">polkupyörällä
</label>
<input id="pp" type="checkbox"
name="tyomatka" value="pp" /><br
/>
<label
for="mp">moottoripyörällä
</label>
<input id="mp" type="checkbox"
name="tyomatka" value="mp" /><br
/>
<label
for="jalan">kävellen </label>
<input
id="jalan" type="checkbox" name="tyomatka" value="jalan" /><br
/>
</p>

Valintanappi - radio

-arvo tekee elementistä valintanapin. Valintanappi on pyöreä kenttä. Käyttäjä voi valita saman ryhmän valintanapeista ainoastaan yhden arvon, koska asetettaessa uusi arvo päälle menee entinen valinta pois päältä. Esimerkistä kannattaa huomata, että kaikkien samaan ryhmään kuuluvien valintanappien -attribuutin arvon on oltava sama. Jos arvo ei ole sama, niin valintanappeja voidaan valita useampiakin ”näennäisesti” samasta ryhmästä.

checked-attribuutilla valintaruudulle voidaan määritellä oletusarvo. Tällöin attribuutin arvoksi on laitettava checked. (checked="checked")

<p>Ikäni
on</p><p>
<label
for="pk20">&lt; 20 vuotta.</label>
<input
id="pk20" type="radio" name="ika" value="< 20" /><br
/>
<label for="ika2030">20-30
vuotta.</label>
<input id="ika2030"
type="radio" name="ika" value="20-30" /><br
/>
<label for="ika3040">30-40
vuotta</label>
<input id="ika3040"
type="radio" name="ika" value="30-40" /><br
/>
<label for="ika4050">40-50
vuotta</label>
<input id="ika4050"
type="radio" checked="checked" name="ika"

 value="40-50" /><br
/>
<label for="sk50">&gt; 50
vuotta</label>
<input id="sk50" type="radio"
name="ika" value="> 50" /><br
/>
</p>

Lähetä-painike - submit

submit-arvo luo painikkeen, jolla lähetetään lomakkeen tiedot käsittelevälle ohjelmalle. Painikkeessa lukeva teksti voidaan vaihtaa value-attribuutin arvoa muuttamalla.

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

Tyhjennä-painike - reset

reset-arvo luo painikkeen, jolla lomakkeen kentät tyhjennetään ja kenttiin sijoitetaan oletusarvot. reset-painikkeen käyttöä lomakkeella kannattaa harkita tarkkaan, koska käyttävä voi vahingossa tyhjentää täyttämänsä lomakkeen ennen lähetystä.

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

Piilokenttä - hidden

hidden-arvo luo piilotetun kentän, jota ei näytetä käyttäjälle selainikkunassa. Piilotettujen kenttien avulla lomakkeella voidaan välittää tietoa, joka on tarpeellista esimerkiksi lomakkeen käsittelyssä, mutta sitä on turha näyttää varsinaisella lomakkeella. Piilokenttään ei kannata sijoittaa mitään ”salaista” tietoa, kuten esimerkiksi salasanoja tai vastaavia, koska kenttä ja sen arvo nähdään sivun lähdekoodista. Seuraavassa lyhyt esimerkki piilokentän käytöstä.

<p><input
type="hidden" name="ID" value="L0011"
/>
</p>

Tekstialue - textarea

textarea-elementti mahdollistaa useampirivisen vapaamuotoisen tekstikentän lomakkeella. Elementtiä kannattaa käyttää erilaisten vapaamuotoisten tekstien kirjoittamispaikkana, koska kirjoittaminen useammalle riville on usein mielekkäämpää kuin yhdelle riville.

name-attribuutilla voidaan antaa textarea-elementille nimi. Kannattaa huomata, että textarea-elementtillä ei ole value-attribuuttia, vaan oletussisältö kirjoitetaan elementin sisään ohessa olevan esimerkin mukaisesti.

rows-attribuutti määrittelee textarea-elementissä näkyvillä olevien rivien lukumäärän. Tämä ei kuitenkaan rajoita rivien lukumäärää, joille käyttäjä voi kirjoittaa. Jos kaikki rivit eivät mahdu kerralla textarea-elementin sisään, luodaan elementin oikeaan laitaan vierityspalkki.

cols-attribuutti määrittelee textarea-elementissä olevan rivin pituuden. Rivin pituudella tarkoitettaan riville mahtuvien ”keskiarvokirjainten” määrää. Arvo ei kuitenkaan rajoita riville kirjoitettavien merkkien lukumäärää. Jos rivi ei mahdu kerralla textarea-elementin sisään, luodaan elementin alalaitaan vierityspalkki.

-attribuutilla voidaan elementeille määritellä tabulointijärjestys eli järjestys, jossa kentät aktivoituvat painettaessa -näppäintä. -attribuutin arvoksi voidaan antaa numerot välillä 0-32767.

<p><label
for="desc">Tarkempi kuvaus ongelmasta</label><br
/>
<textarea id="desc" name="kuvaus"
rows="12" cols="50">
Tähän
tarkempi kuvaus
asiasta..
</textarea>
</p>

Valintalista - select

Valintalista on lomakkeella yksi- tai useampivalintainen alasvetovalikko. Valintalistan käyttötilanteet ovat usein samanlaisia kuin radiopainikkeilla ja valintalaatikoilla, mutta valintalistat vievät fyysisesti paljon vähemmän tilaa lomakkeelta. Valintalista luodaan select-elementillä ja sen sisään täytyy laittaa vähintään yksi option-elementti, josta muodostuu varsinainen valinta.

select-elementti

select-elementti luo varsinaisen valintalistan rungon, jonka sisään tulevat valinnat toteutetaan option-attribuutilla.

name-attribuuttilla voidaan antaa nimi select-elementille.

size-attribuutilla määritellään näkyvissä olevan listan koko. Koko ei ole eri vaihtoehtojen lukumäärä vaan se on pelkästään näkyvillä olevien vaihtoehtojen lukumäärä. Jos vaihtoehtoja on useampia kuin size-attribuutissa on määritelty, niin elementin oikeaan laitaan luodaan vierityspalkki.

multiple-attribuutilla voidaan mahdollistaa elementin useamman vaihtoehdon valinta aktiiviseksi yhtä aikaan. Jos attribuuttia ole määritelty voidaan elementistä kerrallaan valita vain yksi kohta aktiiviseksi.

tabindex-attribuutilla voidaan elementeille määritellä tabulointijärjestys eli järjestys, jossa kentät aktivoituvat painettaessa tab-näppäintä. tabindex-attribuutin arvoksi voidaan antaa numerot välillä 0-32767.

option-elementti

option-elementillä määritellään valintalistan (select-elementin) sisään tulevat vaihtoehdot. Näkyville tuleva vaihtoehto kirjoitetaan option-elementin sisään eli aloitus- ja lopetus-elementin väliin.

selected-attribuutti ilmaisee onko jokin option-elementillä määritelty kohta valittu aktiiviseksi oletuksena. Attribuutin arvoksi pitää antaa selected. (selected=”selected”)

value-attribuutti antaa oletusarvon kontrollille. Jollei kontrollille ole asetettu mitään arvoa, käytetään sen sisältöä oletusarvona.

Seuraavassa esimerkissä on iän kysymiseen tarkoitettu valintalista. Iän oletusarvoksi on määritelty 20-30 vuotta.

<p>

<label
for="ika">Ikäsi
on</label><select id="ika"
name="ika">
<option
value="pk20">&lt; 20
vuotta</option>
<option
selected="selected" value="ika2030">20-30
vuotta</option>
<option value="ika3040">30-40
vuotta</option>
<option value="ika4050">40-50
vuotta</option>
<option value="sk50">&gt;
50
vuotta</option>
</select>
</p>

Seuraavassa esimerkissä on havainnollistettu valintalistaa, josta voi valita useamman eri vaihtoehdon. Iän kysymiseen tällainen valintalista ei kuitenkaan sovellu. Esimerkki on seuraavaa riviä lukuun ottamatta sama kuin edellä esitetty esimerkki.

<select id="ika"
name="ika" multiple="multiple" size="3">