Form: selection
radio
Radioknapper er en standardisert måte å gi brukeren mulighet for å velge høyst ett blandt et antall alternativer. F.eks. slik:
HTML-fragmentet
<fieldset>
<legend style="font-weight:bold">Hvordan kom du hit ?
</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/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:
HTML-fragmentet
<fieldset>
<legend style="font-weight:bold">Hvilke aviser leser du daglig ?
</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/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.:
HTML-fragmentet
<fieldset>
<legend style="font-weight:bold">Hvordan kom du hit ?
</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/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.
HTML-fragmentet
<fieldset>
<legend style="font-weight:bold">Vilke aviser leser du daglig ?
</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/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:
HTML-fragmentet
<fieldset>
<legend style="font-weight:bold">Vilke aviser leser du daglig ?
</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/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>
