Lomake-elementit
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”.
<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
<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>
<input maxlength="11"size="11" id="sotu"
type="text" name="sotu" value="000000-000A" />
</p>
Salasanakenttä - password
<p>
<label for="passwd">Salasana: </label>
<input id="passwd" type="password" name="salasana" value="" />
</p>
Valintaruutu - checkbox
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
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">< 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">> 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.
<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.
<label for="ika">Ikäsi on</label>
<select id="ika" name="ika">
<option value="pk20">< 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">> 50 vuotta</option>
</select>
</p>
<select id="ika"
name="ika" multiple="multiple" size="3">
Käyttäjien kommentit
Lomakkeella pitäisi käyttää allekkain text ja password kenttiä. Lomakkeesta tulee kuitenkin epäsiistin näköinen, kun en mitenkään saa ko. kenttiä saman levyisiksi
Katsopas mallia esim. täältä: http://appro.mit.jyu.fi/2000/syksy/tietoverkot/luennot/luento9/form.htm Esimerkkisivun CSS: http://appro.mit.jyu.fi/2000/syksy/tietoverkot/luennot/luento9/form.css