? Browser Support ?

HTML > Forms >Forms Select 2

Form: selection

Hva

Velge alternativ i forms

Det er selvsagt et gjennomgående problem å kontrollere at de dataene som sendes fra en form er "riktige". Riktig i denne sammengeng kan betyr så mangt. Det kan bety at det er noen syntaksregler som skal oppfylles, det kan bety at verdien må være ett av et endelig mulige valg eller det kan bety at verdien må ha mening i en sammenheng. (F.eks. at hjemreisedata er senere enn utreisedato eller at det faktisk finnes en ledig plass på flyet) Det er alltid en avveining av hvor stor del av denne kontrollen som skal foregå hos klieneten (nettelseren) og hvor mye som skal foregår på tjeneren.

Vi kan alltid lage vilkårlig omfattende javascript som kontrollerer data før de sendes, men det kan bli ganske omfattende og slitsomt. Det er i denne sammenheng vi må se alle input-typene som er laget for å automatisere slik kontroll.

En viktig egenskap ved input-elementer er pattern som gir oss mulighet for å lage syntakskontroll ved hjelp av regulæruttrykk [1] .

De tradisjonelle valgene, blandt gitte alternativer, input:radio, input:checkbox og select er beskrevet i modulen Forms Select .

HTML5 definerer en rekke nye input-typer som er relaterte til valg og format:

color
date
datetime
datetime-local
month
week
time
number
range
email
url

Vi skal se litt på noen av disse. Merk at her er en del nettlesere litt usikre. April 2011 ser det ut til at siste versjon av Opera er den som implementerer mest av dette. De nettleserne som ikke implementerer finessene, behandler elementene som ren tekst.

number og range

Vi kan spesifisere at vi vil akseptere et heltall innenfor et bestemt område ved hjelp av number

Et tall takk

HTML-fragmentet

<fieldset>
<legend>Et tall takk</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py" method="get">
<label>Tallet</label> 
<input type="number" name="tallet" value="0" step="2" min="0" max="10" />
<input type="submit" value="send" />
</form>
</fieldset>

Vi prøver oss med range

Et tall takk

HTML-fragmentet

<fieldset>
<legend>Et tall takk</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py" method="get">
<label>Tallet</label> 
<input type="range" name="tallet" value="0"  step="2" min="0" max="10" />
<input type="submit" value="send" />
</form>
</fieldset>

color

Vi vil velge en farge

Hvordan skal fargen være

HTML-fragmentet

<fieldset>
<legend>Hvordan skal fargen være</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py" method="get">
<label>Farge:</label> <input type="color" name="fargen" />
<input type="submit" />
</form>
</fieldset>

Vi prøver et eksperimet for å sette farge på noe på nettsiden

Velg bakgrunn:

HTML-fragmentet

<p>
Velg bakgrunn:<input type="color" onchange="setColor()" name="fargen" id="fargen"/>
</p>

og javascriptet

function setColor()
{
    var col=document.getElementById('fargen').value;
    document.getElementsByClassName('collectable')[0].style.backgroundColor=col;
    return false;
}

Vi ser at vi har tatt input-elementet ut av form-omgivelser, og utfører handlingen når innholdet endres. I noen nettlesere vil det siste slå til når feltet mister fokus. Dette åpner selvsagt for en rekke muligheter for å bruke input-elementet andre steder enn i forms.

date og time

Vi har en rekke muligheter for å bestemme tid

Om tid og dato

HTML-fragmentet

<fieldset>
<legend>Om tid og dato</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py" method="get">
<div><label>Dato:</label> <input type="date" name="dato" /></div>
<div><label>Uke:</label> <input type="week" name="uke" /></div>
<div><label>Måned:</label> <input type="month" name="mnd" /></div>
<div><label>Dato/tid:</label> <input type="datetime" name="tid" /></div>
<div><label>Lokalt:</label> <input type="datetime-local" name="lokal" /></div>
<div><input type="submit" value="Send" /></div>
</form>
</fieldset>

email og url

Mail

HTML-fragmentet

<fieldset>
<legend>Mail</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py" method="get">
E-mail: <input type="email" name="mail" />
<input type="submit" value="Send" />
</form>
</fieldset>

Webadresse

HTML-fragmentet

<fieldset>
<legend>Webadresse</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py" method="get">
URL: <input type="url" name="url" />
<input type="submit" value="Send" />
</form>
</fieldset>

pattern

Så kan man spørre seg hva slags kontroll som foregår på det vi skriver inn i f.eks. email feltet. Hvis vi sjekker spesifikasjonen av email hos W3C [2] finner vi at dette er definert som:

1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )

i noe som heter ABNF 1 Augemented Backus-Naur Form [3] . Vi må anta at implemntasjonen av dette er et regulæruttrykk [1] . Det vi normalt ville gjøre dersom vi ikke hadde innebygd en slik kontroll var å lage et eget regulæruttrykk for syntakskontroll. Og det kan vi faktisk gjøre uten javascriptkoding ved hjelp av egenskapen pattern dersom vi ønsker å endre den gitte kontrollen. F.eks. slik:

Mail

HTML-fragmentet

<fieldset>
<legend>Mail</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py" method="get">
E-mail: 
<input type="text" 
       pattern="[A-Za-z0-9!#$%&amp;'*+-/=?^_`{|}~]+@[A-Za-z0-9-]+(.[A-Za-z0-9-]+)*" 
       name="mail" />
<input type="submit" value="Send" />
</form>
</fieldset>

Vi har altså brukt et input felt av typen text, og koplet til en kontroll ved hjelp av pattern. Dette åpner selvsagt for en rekke muligheter for kontroll av ymse input. RegExpLib [4] er en kilde for regulæruttrykk. Nedenfor tester vi et regulæruttrykk publisert av Knut Hamang.

HTML-fragmentet er etter samme mønster som eksempelet over

Dato

list og datalist

Vi kan også lage en liste av lovlige verdier, datalist, og kople denne til et input-element av typ list

Mail

HTML-fragmentet

<fieldset>
<legend>Mail</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py" method="get">
Du kan velge mellom noen reisemål: 
<input list="byer" name="by"/>
<datalist id="byer">
    <option value="Paris">Paris</option>
    <option value="Halden">Halden</option>
    <option value="Barcelona">Barcelona</option>
    <option value="London">London</option>
</datalist>
<input type="submit" value="Send" />
</form>
</fieldset>

Eksempel

Inspiser et eksempel http://www.it.hiof.no/~borres/dw/ht5/forms/travel.html

Augemented Backus-Naur Form

Referanser

Regulæruttrykk Regular-Expressions.info www.regular-expressions.info/ 14-03-2010

HTML5: The Markup Language Reference W3C dev.w3.org/html5/markup/ 14-09-2010

Augmented BNF for Syntax Specifications: ABNF IETF Tools tools.ietf.org/html/rfc5234 14-09-2010

Regular Expression Library RegExLib.com regexlib.com/ 14-09-2010

HTML5 w3.org dev.w3.org/html5/spec/Overview.html 14-03-2011

Vedlikehold

Børre Stenseth, april 2011

( Velkommen ) HTML > Forms >Forms Select 2 ( Lokale filer )