Forms
HTML
Børre Stenseth
Noen Elementer > Forms >Forms Select

Form: selection

Hva

Vi kan formulere valg blandt alternativer ved hjelp av tre de tre kjente mekanismene: input:radio, input:checkbox og select. Disse har fått noen nye egenskaper men fungerer i hodvedsak som tdiligere. Eksemplene nedenfor trekker ikke inn noen nye finesser.

HTML5 definerer en rekke nye input-typer som er relaterte til valg på en litt annen måte. Vi kan velge tall innenfor et område, vi kan velge dato, uke, måned, dag, tid og vi kan velge farge. Disse elementene er beskrevet i modulen Input .

radio

Radioknapper er en standardisert måte å gi brukeren mulighet for å velge høyst ett blandt et antall alternativer. F.eks. slik:

Hvordan kom du hit ?
Busset
Syklet
Bilte
Gikk
På annen måte

HTML-fragmentet

<fieldset>  
<legend style="font-weight:bold">Hvordan kom du hit ?
</legend>
<form action="https://borres.hiof.no/wep/commons/py/std.py" 
      method="get">
<div><input type="radio" name="transport" value="1"/>Busset</div>
  <div><input type="radio" name="transport" value="2"/>Syklet</div>
  <div><input type="radio" name="transport" value="3"/>Bilte</div>
  <div><input type="radio" name="transport" value="4"/>Gikk</div>
  <div><input type="radio" name="transport" value="5"/>På annen måte</div>
  <div><input type="submit" value="Send"/></div>
</form>
</fieldset>

Merk at alle radio feltene har samme verdi i name-attributten. Det er dette som gjør at de oppfattes som en gruppe, og det er i denne gruppa det er lov å gjøre høyst ett valg. En gruppe radioknapper sender bare en verdi til tjeneren, nemlig value- attributten. I eksempelet ovenfor er det valgt å nummerere alternativene. Vi kunne ha valgt å gi en mer beskrivende verdi, f.eks. den teksten som er knyttet til alternativet (Busset, Syklet osv.)

Dersom vi skal ha flere grupper radio-knapper på en side må vi altså grupppere dem logisk ved å gi forskjellig name i hver gruppe, og vi bør selvsagt gruppere dem visuelt på en eller annen måte.

checkbox

I en gruppe checkboxer skal brukeren kunne velge ingen, ett eller mange alternativer. F.eks. slik:

Hvilke aviser leser du daglig ?
Dagbladet
VG
Dagsavisen
Aftenposten
Klassekampen
Andre

HTML-fragmentet

<fieldset>  
<legend style="font-weight:bold">Hvilke aviser leser du daglig ?
</legend>
<form action="https://borres.hiof.no/wep/commons/py/std.py" 
      method="get">
  <div><input type="checkbox" name="aviser" value="1"/>Dagbladet</div>
  <div><input type="checkbox" name="aviser" value="2"/>VG</div>
  <div><input type="checkbox" name="aviser" value="3"/>Dagsavisen</div>
  <div><input type="checkbox" name="aviser" value="4"/>Aftenposten</div>
  <div><input type="checkbox" name="aviser" value="5"/>Klassekampen</div>
  <div><input type="checkbox" name="aviser" value="6"/>Andre</div>
  <div><input type="submit" value="Send"/></div>
</form>
</fieldset>

Selv om checkboxene over logisk sett er å berakte som en gruppe, behandles hvert input-felt for seg. Det går en uavhengig melding for hvert felt. Ovenfor er valgt å gi alle samme name-attributt. Det betyr at mottagerskriptet må finne fra alle parametre med det navnet og se hvilke verdier som er koplet til navnene. Det vil i mange tilfelle trolig være enklere å programmere skriptet dersom vi bruker forskjellig name-attributter.

Du kan forhåndssette et valg ved hjelp av attributten checked="checked".

select

Select er en fleksible input mekanisme som kan gis forskjellig utseende (scroll-list og drop-down) og forskjellig funksjonalitet (radio eller checkbox).

Den enkleste formen fungerer som en radio-grupp på den måten at brukeren kan velge høyst en av mange. F.eks.:

Hvordan kom du hit ?

HTML-fragmentet

<fieldset>  
<legend style="font-weight:bold">Hvordan kom du hit ?
</legend>
<form action="https://borres.hiof.no/wep/commons/py/std.py"
      method="get">
<div>
<select name="transport">
  <option value="Busset">Busset</option>
  <option value="Syklet">Syklet</option>
  <option value="Bilte">Bilte</option>
  <option value="Gikk">Gikk</option>
  <option value="Annet">På annen måte</option>
</select>
<input type="submit" value="Send"/>
</div>
</form>
</fieldset>

Den alternative formen gir oss en scrollbar meny. Eksempelet nedenfor er dessuten satt opp med attributten multiple="multiple" slik at vi kan velge flere ved å hold ctrl-tasten nede.

Vilke aviser leser du daglig ?

HTML-fragmentet

<fieldset>  
<legend style="font-weight:bold">Vilke aviser leser du daglig ?
</legend>
<form action="https://borres.hiof.no/wep/commons/py/std.py"
      method="get">
<div>
<select name="aviser" multiple="multiple" size="6">
  <option value="Dagbladet">Dagbladet</option>
  <option value="VG">VG</option>
  <option value="Aftenposten">Aftenposten</option>
  <option value="Dagsavisen">Dagsavisen</option>
  <option value="Klassekampen">Klassekampen</option>
  <option value="Andre">Andre</option>
</select>
<div>
<input type="submit" value="Send"/>
<input type="reset" value="Blank"/>
</div>
</div>
</form>
</fieldset>

Vi ser dessuten at attributten size er satt til 4 for å vise 4 linjer i menyen.

Vi kan utvide den siste formen med optgroup-elementer for å gruppere valg. F.eks. slik:

Vilke aviser leser du daglig ?

HTML-fragmentet

<fieldset>  
<legend style="font-weight:bold">Vilke aviser leser du daglig ?
</legend>
<form action="https://borres.hiof.no/wep/commons/py/std.py" 
      method="get">
<select name="aviser" multiple="multiple" size="7">
  <optgroup label="Riksaviser">
  <option value="Dagbladet">Dagbladet</option>
  <option value="VG">VG</option>
  <option value="Aftenposten">Aftenposten</option>
  <option value="Dagsavisen">Dagsavisen</option>
  <option value="Klassekampen">Klassekampen</option>
  <option value="Andre">Andre</option>
  </optgroup>
  <optgroup label="Lokalaviser">
  <option value="HA">Halden arbeiderblad</option>
  <option value="HD">Halden dagblad</option>
  </optgroup>
</select>
<div><input type="submit" value="Send"/>
<input type="reset" value="Blank"/>
</div>
</form>
</fieldset>
[1]
Referanser
  1. HTML5 w3.org dev.w3.org/html5/spec/Overview.html 14-03-2011
Noen Elementer > Forms >Forms Select