JS: SELECT ja "pakkovalinta", väritys
Jori Mantysalo
<P><SELECT NAME="lempiruoka" ID="valinta">
<OPTION VALUE=1>Pannukakku</OPTION>
<OPTION VALUE=2>Hernekeitto</OPTION>
<OPTION VALUE=3>Maksapihvi</OPTION>
</SELECT>
<P><INPUT TYPE="submit" ID="nappi">
niin tunnetusti osa käyttäjistä ei huomaa tuota, ja pannukakku
tulee valituksi heillä koska se on listalla ensimmäinen. Niinpä
lisätään
<OPTION VALUE=0>(Valitse)</OPTION>
tai vastaavaa, ja sitten lomakkeen käsittelijä tarvittaessa kertoo
virheestä. Jos nyt aletaan hienostella JS:llä, niin voidaan vaihtaa
taustaväriä yms. Mutta onko se mahdollista tehdä oikeasti toimivaksi?
Ensinnäkin OPTION-otuksen CSS-määre toimii toisin kuin luulisi.
<OPTION VALUE=0 STYLE="color: red">(Valitse)</OPTION>
tarkoittaa ainakin FF3:ssa, että kun lista on avattuna (hiiren tai
Alt+alas -näppäilyn vuoksi), niin silloin ja vain silloin tuo teksti
on punainen. JS:llä voidaan viritellä jotain sellaista kuin
if (document.getElementById('valinta').selectedIndex == 0) {
document.getElementById('valinta').style.color='red';
document.getElementById('nappi').disabled=true;
} else . . .
Tässä tulee ongelmaksi jo heti alkuunsa se, että OnChange laukeaa
SELECT-elementissä hiirellä tai kun siitä poistutaan, mutta ei kun
listaa selataan näppäimistöllä. Tämä ei näytä kivalta. Lisäksi koko
"(valitse)" -kohta voisi poistua kun joku valinta on tehty. Vielä on
ongelmana se, että SELECT-elementin värin (tai taustavärin) muutos
vaikuttaa silloinkin kun valinta on auki.
Joku lienee kai jo toteuttanut tällaisen oikein?
Tein tästä demon, josta näkee ongelmat:
http://www.uta.fi/~jm58660/js-koe.html
--
"Mutta senhän takia Mäntysalo juuri olikin värvätty kokouksen
puhtaaksikirjoitustehtäviin: hänen tajunnanahtaudestaan ja
perehtymättömyydestään voisi olla enemmän vahinkoa jos hän oikeasti
yrittäisi esimerkiksin arvioida jotakin tai johtaa jotakin." -- KS
Jukka K. Korpela
> Jos sivulla on
>
> <P><SELECT NAME="lempiruoka" ID="valinta">
> <OPTION VALUE=1>Pannukakku</OPTION>
> <OPTION VALUE=2>Hernekeitto</OPTION>
> <OPTION VALUE=3>Maksapihvi</OPTION>
> </SELECT>
> <P><INPUT TYPE="submit" ID="nappi">
>
> niin tunnetusti osa käyttäjistä ei huomaa tuota, ja pannukakku
> tulee valituksi heillä koska se on listalla ensimmäinen.
Sopii siis hyvin ohjattuun demokratiaan! :-)
Tässä kaksi tapaa hoitaa ongelma (lyhyyden vuoksi LABEL-merkkaus yms.
jätetty pois kuten alkuperäisestä esimerkistäkin):
Tapa 1:
<SELECT NAME="lempiruoka" ID="valinta">
<OPTION VALUE=0 SELECTED>Valitse jokin seuraavista:</OPTION>
<OPTION VALUE=1>Pannukakku</OPTION>
<OPTION VALUE=2>Hernekeitto</OPTION>
<OPTION VALUE=3>Maksapihvi</OPTION>
</SELECT>
Tapa 2:
<SELECT NAME="lempiruoka" ID="valinta">
<INPUT TYPE=RADIO NAME="lempiruoka" VALUE=1>Pannukakku<BR>
<INPUT TYPE=RADIO NAME="lempiruoka" VALUE=2>Hernekeitto<BR>
<INPUT TYPE=RADIO NAME="lempiruoka" VALUE=3>Maksapihvi<BR>
<INPUT TYPE=RADIO NAME="lempiruoka" VALUE=0 CHECKED>Ei vielä valittu
Tällöin ei tunnu tarpeelliselta erottaa "nollavaihtoehtoa" esimerkiksi
värityksellä, mutta jälkimmäisessä tavassa se on tehtävissä helposti
(yhden SPAN-elementin avulla), koska sen teksti on tavallista sisältöä,
ei lomakkeen kenttää. Tavassa 1 se taas on yleensä valmiiksi eri tavalla
esitettynä kuin muut, joskaan ei ehkä halutulla tavalla...
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Jori Mantysalo
>> <P><SELECT NAME="lempiruoka" ID="valinta">
>> <OPTION VALUE=1>Pannukakku</OPTION>
>> <OPTION VALUE=2>Hernekeitto</OPTION>
>> <OPTION VALUE=3>Maksapihvi</OPTION>
>> </SELECT>
>> niin tunnetusti osa käyttäjistä ei huomaa tuota, ja pannukakku
>> tulee valituksi heillä koska se on listalla ensimmäinen.
> Tässä kaksi tapaa hoitaa ongelma (lyhyyden vuoksi LABEL-merkkaus yms.
> jätetty pois kuten alkuperäisestä esimerkistäkin):
> Tapa 1:
> <SELECT NAME="lempiruoka" ID="valinta">
> <OPTION VALUE=0 SELECTED>Valitse jokin seuraavista:</OPTION>
Tämähän on sama kuin mitä esitin:
! Niinpä lisätään
! <OPTION VALUE=0>(Valitse)</OPTION>
Tai siis tietääkseni ainakin kaikilla selaimilla SELECT-listan 1.
OPTION on valittuna, ellei millään OPTIONilla ole SELECTED-merkintää.
> Tapa 2:
> <INPUT TYPE=RADIO NAME="lempiruoka" VALUE=1>Pannukakku<BR>
> . . .
> <INPUT TYPE=RADIO NAME="lempiruoka" VALUE=0 CHECKED>Ei vielä valittu
RADIO-elementti toimii, jos lempiruokia on muutama. Mutta isommissa
listoissa (kotimaa, kotikunta etc.) se menee rumaksi.
Noilla saa kyllä homman siis hoidettua, kuten kirjoitinkin. Mutta entä
se hienostelupuoli?
Jukka K. Korpela
>> <SELECT NAME="lempiruoka" ID="valinta">
>> <OPTION VALUE=0 SELECTED>Valitse jokin seuraavista:</OPTION>
>
> Tämähän on sama kuin mitä esitin:
>
> ! Niinpä lisätään
> ! <OPTION VALUE=0>(Valitse)</OPTION>
Paitsi että käytin SELECTED-määritettä, joka määrittelee vaihtoehdon
alkutilassa valituksi.
> Tai siis tietääkseni ainakin kaikilla selaimilla SELECT-listan 1.
> OPTION on valittuna, ellei millään OPTIONilla ole SELECTED-merkintää.
Asia on huomattavasti monimutkaisempi, mutta kieltämättä tässä
tapauksessa SELECTED-määritteen käyttö on lähinnä loogisuuden vaatimaa.
Toisaalta kun sitä käytetään, voidaan nollavalinta sijoittaa minne
halutaan, vaikka listan loppuun. Sinne voidaan sijoittaa vaikkapa
<OPTION VALUE=-1>Ei mikään edellä mainituista</OPTION>
<OPTION VALUE=-2>En osaa tai en halua sanoa</OPTION>
<OPTION VALUE=0 SELECTED>Valintaa ei vielä ole tehty</OPTION>
Tällöin voidaan erottaa erilaiset nollatapaukset ja saada tietoa, josta
voi olla apua lomakkeen kehittämisessä. Tapaus 0 on selvästi sellainen,
jossa kysymys täytyy tulkita kokonaan ohitetuksi eli ei voi tietää
mitään käyttäjän suhtautumisesta siihen. Tapaus -1 voi merkitä, että on
tarjottu liian vähän vaihtoehtoja. Tapaus -2 (jonka voisi vielä jakaa
osiin) voi merkitä, että kysymys koetaan liian vaikeaksi tai liian
tyhmäksi.
>> Tapa 2:
>
>> <INPUT TYPE=RADIO NAME="lempiruoka" VALUE=1>Pannukakku<BR>
>> . . .
>> <INPUT TYPE=RADIO NAME="lempiruoka" VALUE=0 CHECKED>Ei vielä valittu
>
> RADIO-elementti toimii, jos lempiruokia on muutama. Mutta isommissa
> listoissa (kotimaa, kotikunta etc.) se menee rumaksi.
Paljon isompi ongelma on, että kun lista on iso, valinnan tekeminen
teknisesti on hankalaa joka tapauksessa - ja SELECT on hankala, koska se
luo ison pudotusvalikon, jossa on monenlaisia käytettävyysongelmia (jos
kohta pari etuakin, joita osa käyttäjistä osaa hyödyntää). Maan ja
kunnan valinta kannattaa joka tapauksessa yleensä tehdä tekstikentällä,
jos on tarkoitus tarjota valittavaksi esimerkiksi kaikki maailman maat
tai kaikki Suomen kunnat.
> Noilla saa kyllä homman siis hoidettua, kuten kirjoitinkin. Mutta entä
> se hienostelupuoli?
Kyselin rivien välissä, tarvitaanko sitä, ja yritin myös kertoa, että
tavassa 2 se on olennaisesti helpompaa hoitaa kuin tavassa 1. Syynä on
se, että SELECT-elementin toteutus on edelleen jäykkää, koska selaimet
yleisesti käyttävät järjestelmien valmiita rutiineita, joihin voidaan
vain osittain vaikuttaa CSS:llä.
Yksi vaihtoehto - joka on melko hankala mutta luultavasti vähemmän
hankala kuin skriptien käyttö tms. - on koodata valinta valintanapeilla
eli radio buttoneilla mutta CSS:llä muuntaa tällainen rakenne
ulkonaisesti pudotusvalikon tapaiseksi. Tosin siinäkin saattaa tulla
äitiä eikun skriptikieltä ikävä...