Day 3 of Solidabis Code Challenge 2022 – Radio-painikkeet ja semantiikka

Julkaistu 2.7.2022. Aiheet: Suomeksi, Nettisovellukset, Koodihaaste.

Olen nettisovellusaloittelija, joka tekee Solidabiksen koodihaastetta 2022. Päivitän, kuinka minulla menee ja jaan tuskani julkisesti, kun yritän rakentaa äänestyssovellusta ravintolan päättämiseksi!

Tällä kertaa ihmettelen, että miten saan näytettyä sivulla listan painikkeita, joista saadaan valittua ravintola.

Lomake-jumppaa

Viimeksi siis onnistuin saamaan ravintola-listan jo näkyviin. Jee!

Nyt haluaisin mahdollistaa ravintolan valinnan ja sitä kautta pääsen käsiksi (ehkä) äänestämiseen. Käytän tässä hyväksi lomaketta <form>, syöttöä <input> ja syötön nimilappua <label>. Tarkemmin sanottuna luon radio-painikkeita. Koodi näyttäisi tältä:

<form>
    <input type=”radio name=”restaurant” id=”restaurant0” value=”paten_potsi”>
    <label for=”restaurant0”>Paten pötsi</label>
</form>

Tärkeää huomioida radio-painikkeen luonnissa:

1. Attribuutti type=”radio”, jotta selain ymmärtää sen radio-painikkeeksi.
2. Attribuutti name=”[ryhmän nimi]”. Tämä yksilöi radio-painikkeiden ryhmän, joihin kaikki samannimiset painikkeet kuuluvat. Näin selain tietää, että vain yksi näistä ryhmän painikkeista voidaan valita.
3. Attribuutti id=”[uniikki tunniste]”, jonka avulla juuri tähän tiettyyn valintaan voi viitata. Tätä tarvitaan, kun painikkeelle tehdään nimilappu <label>, jossa käytetään for-attribuuttia. Nimilappu mahdollistaa myös valinnan teon klikkaamalla vain näkyvää tekstiä!
4. Attribuutti value=”[painikkeen ‘arvo’]”. Tämä on käsitykseni mukaan se, mikä oikeasti viestitään selaimelle, kun valinta tehdään. Sen toiminta on minulle vähän hämärän peitossa.

Juututaan semanttiikkaan, jooko?

Oikea semanttisuus eli elementtien käyttö on tärkeää jo siksi, että monet apuvälineohjelmat, kuten ruudunlukijat käyttävät niitä pääasiassa kertoakseen käyttäjälle, minkälaisten asioiden kanssa he ovat tekemisissä. Oikea attribuuttien käyttö myös lisää informaatiota, jota viedään käyttäjälle niiden kautta. Jos lomakkeen loisi vain <div>-elementeillä, niin tällaiset ohjelmat eivät tietäisi, minkä kanssa ovat tekemisissä.

En vielä ole varma, että auttaako tämä äänestämisessä ja sen pitäisi olla mahdollista sovelluksessa.

Koska haluan myös, että äänen voi ottaa pois, niin siihenkin pitäisi keksiä jokin temppu. Radio-painikkeet eivät itseasiassa salli valinnan poistoa.

Valinnan voi poistaa kylläkin valintaruuduista… Ongelma on, että niiden avulla voi valita monta vaihtoehtoa samaan aikaan eli äänestää montaa eri vaihtoehtoa. Olisiko tämä kuitenkaan epätoivottu ominaisuus?

Kaikenlainen apu otetaan vastaan (kunhan et suoraan kerro, että miten minun pitäisi tehdä koko sovellus)!

Seuraa, kun hämmennyn edelleenkin.