Form: selection
Vi kan formulere valg ved hjelp av tre mekanismer: input:radio, input:checkbox og select.
.radio
Radioknapper er en standardisert måte å gi brukeren mulighet for å velge høyst ett blandt et antall alternativer. F.eks. slik:
HTML-koden ser slik ut:
<form action="http://www.ia.hiof.no/~borres/cgi-bin/forms/std.py" method="get">
<div style="font-weight:bold">Hvordan kom du hit ?</div>
<div>
<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>
</div>
</form>
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-koden ser slik ut:
<form action="http://www.ia.hiof.no/~borres/cgi-bin/forms/std.py" method="get">
<div style="font-weight:bold">Hvilke aviser leser du daglig ?</div>
<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>
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-koden ser slik ut:
<form action="http://www.ia.hiof.no/~borres/cgi-bin/forms/std.py"
method="get">
<div style="font-weight:bold">Hvordan kom du hit ?</div>
<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>
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-koden ser slik ut:
<form action="http://www.ia.hiof.no/~borres/cgi-bin/forms/std.py"
method="get">
<div style="font-weight:bold">
Vilke aviser leser du daglig ?
</div>
<div>
<select name="aviser" multiple="multiple" size="4">
<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>
<input type="submit" value="Send"/>
<input type="reset" value="Blank"/>
</div>
</form>
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-koden ser slik ut:
<form action="http://www.ia.hiof.no/~borres/cgi-bin/forms/std.py"
method="get">
<div style="font-weight:bold">
Vilke aviser leser du daglig ?
</div>
<div>
<select name="aviser" multiple="multiple" size="4">
<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>
<input type="submit" value="Send"/>
<input type="reset" value="Blank"/>
</div>
</form>
