Karl Ove Hufthammer

Brukarvenlige nettsideskjema

23. april 2005

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.)

Emne: Nettsideutvikling

[Abonner på kommentarar til artikkelen]

Kommentarar

Legg til kommentar





Du kan bruka dei vanligaste elementa og attributta i HTML. Avsnitt lagar du med vanlige linjeskift. Eg kan komma til å gjera typografiske og ortografiske endringar i innlegg (men vil aldri endra sjølve innhaldet), samt fjerna upassande innlegg.

Skriven av Karl Ove Hufthammer og driven med WordPress. Du kan abonnera på innleggs-RSS eller kommentar-RSS.