Karl Ove Hufthammer

Brukarvenlige nettsideskjema

Mange nettstadar inneheld elektroniske skjema av ymse slag, men dei færraste av desse brukar ein lite kjend funksjon i HTML som ville gjort skjemaa mykje meir brukarvenlige. La oss sjå på eit eksempel:

Kontaktskjema

Namn:

E-postadressa:

Mann
Kvinna

Eg vil motta gratis reklame

Skjemaet er oversiktlig og fint, men unødvendig tungvint å bruka. For å kryssa av for rett kjønn må me klara å treffe den bittelitle radioknappen. Håplaust for eldre og andre som skjelver på handa! (Språkopphavleg digresjon: Namnet «radioknapp» kjem frå dei gamle radioane du kanskje hugsar: Når du trykte inn éin knapp, spratt dei andre ut.)

Her er kodesnutten for radiokappen:

<input type="radio" name="kjonn" id="skjema-mann" value="mann" /> Mann

Denne kan me forbetra! HTML inneheld nemlig elementet label, som me brukar til å knyta ein skjemkontroll (her: radioknappen) til tilhøyrande merkelapp (her: teksten «Mann»). Dette tar attributtet for, som peikar på identifikatoren (id-attributtet) til skjemkontrollen:

<label for="skjema-mann"><input type="radio" name="kjonn" id="skjema-mann" value="mann" /> Mann</label>

No treng me ikkje lenger trykka på den litle knappen; det held at me klarar å treffa den tilhøyrande teksten. Me kan bruka label-elementet på alle mulige skjemakontrollar, og i dette eksempelet blir resultatet slik:

Kontaktskjema


Prøv no å trykka på teksten til dei ulike skjemafelta og skjemakontrollane.

Merk at label-elementet ikkje treng omslutta skjemakontrollen det gjeld. Det kan stå ein heilt annan plass på sida, for eksempel i ei anna tabellcella. Og denne teknikken er faktisk støtta i so godt som alle nettlesarar laga dei siste åra. Spesielt derfor er det so synd at han er so lite utbreidd, sjølv på nettstadar som baserer heilt verksemda si på skjema! Men eitt hederlig unntak vil eg nemna: Opplysning 1890. Dette er ein uvanlig brukarvenlig nettstad, som har gjort alt rett, reint HTML-teknisk.

(Tekniske detaljar for den som måtte vera interessert i slikt: Det finst to måtar å bruka label i HTML. Den eine måten (denne) er støtta i alle moderne nettlesarar, mens den andre er støtta i alle moderne nettlesarar med unntak av Microsoft Internet Explorer. Av openberre grunnar bør me bruka den første.)

2 kommentarar

  1. Nå vet ikke jeg hvilken versjon av IE du sikter til, men i IE6 trenger ikke <label /> å omslutte <input />-elementet.

  2. Det var ikkje det eg sikta til. Den alternative måten eg tenkte på, var å la label omslutta skjemakontrollen, men ikkje bruka for-attributtet. Det er heilt klart den enklaste og greiaste måten å gjera det på (når ein kan gjera det, og forklaringsteksten for eksempel ikkje står i ei anna tabellcella), og er støtta i so godt som alle nettlesarar, men altso ikkje i IE.

Legg til kommentar

E-postadressa vert ikkje synleg for andre. Obligatoriske felt er merkte med *.