Kehittyneempien lomakkeiden ominaisuuksia

Tässä luvussa esitellään muutamia XHTML 1.1 suosituksen mukaisia lomake-elementtejä, joita ei käsitelty HTML Basicin yhteydessä. XHTML 1.1 sisältää muutamia attribuuttia Basicin yhteydessä esiteltyihin elementteihin, mutta niitä ei käsitellä tässäkään yhteydessä. Attribuutteihin voi kuitenkin perehtyä luvun XHTML 1.1 aliluvussa Lomakeosa.

Tässä luvussa tutustutaan seuraaviin elementteihin:

Valintalistan ryhmittely - optgroup

Valintalistan ryhmittelyyn voidaan käyttää optgroup-elementtiä. Elementillä saadaan kätevästi ryhmiteltyä valintoja pienempiin ja selkeämpiin kokonaisuuksiin. Ominaisuus on muuten kätevä, mutta nykyisistä (elokuu 2001) selaimista ainoastaan Mozilla 0.9.2 tukee kyseistä ominaisuutta.

label-attribuutilla määritellään otsikko koko optgroup-ryhmälle.

Seuraavassa esimerkissä on ryhmitelty muutamia ohjelmia sekä niiden versioita. Esimerkin mukana oleva kuva on ryhmitelty valintalista Mozilla 0.9.2 selaimen näyttämä. Muut selaimet (kokeiltu IE:n, Netscapen, Operan kohtuullisen uusilla versioilla) eivät näytä ryhmittelyä ollenkaan.

Graphic11

<p>

<label for="versio">Versio on</label><select id="versio" name="ohjelma-versio">
<optgroup label="Word"> 
<option value="Word 6">Word 6</option>
<option value="Word 95">Word 95</option>
<option value="Word 97">Word 97</option>
<option value="Word 2000">Word 2000</option>
</optgroup>
<optgroup label="Excel">
<option value="Excel 5">Excel 5</option>
<option value="Excel 95">Excel 95</option>
<option value="Excel 97">Excel 97</option>
<option value="Excel 2000">Excel 2000</option>
</optgroup>
</select>
</p>

Lomake-elementtien ryhmittely - fieldset

Graphic12

-elementillä voidaan ryhmitellä lomakkeilla olevia kenttiä loogisiksi kokonaisuuksiksi. Ryhmittelyn tarkoituksena on havainnollistaa käyttäjälle lomakkeella kysyttävien tietojen tarkoitusta.

Seuraavassa esimerkissä on käytetty fieldset-elementtiä lomakkeen tietojen ryhmittelemiseen. legend-elementillä kerrotaan kyseisen elementtiryhmän otsikko, joka on sijoitettu ensimmäiseksi elementiksi fieldset-ryhmään. Lomakkeella voi olla muitakin fieldset-ryhmiä

<fieldset><legend>Henkilötiedot</legend>
<label accesskey="N" for="name">Nimi: </label>
<input id="name" type="text" name="Nimi" value="Etunimi Sukunimi" /><br />
<label for="email">Email: </label>
<input id="email" type="text" name="email" value="Sahköpostiosoite" /><br />
<label for="sotu">Sotu: </label>
<input maxlength="11" size="11" id="sotu" type="text" name="sotu" value="000000-000A" /><br />
</fieldset>

Elementtien ryhmän otsikko - legend

Elementtiryhmälle voidaan antaa otsikko legend-elementin avulla.

accesskey-attribuutin avulla voidaan legend-elementille määritellä pikanäppäin, jota painamalla siirrytään kyseisen lomakeryhmän alkuun.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/forms/index3.html
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2009-05-22 12:42:45
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto