Forms Select

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

<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:

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

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

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

<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:

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

Form: selection

radio

checkbox

select