Inputkontroll

Hva

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 klienten (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 2014 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. Det er ikke tatt høyde for mangler i nettleserne i eksemplene nedenfor.

Merk alle disse elementene kan selvsagt brukes utenfor forms. Vi kan bruke dem til å gi inn verdier i andre sammenhenger.

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 style="width:300px;padding:20px">
<legend>Et tall takk</legend>
<form action="https://borres.hiof.no/wep/commons/py/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 style="width:300px;padding:20px">
<legend>Et tall takk</legend>
<form action="https://borres.hiof.no/wep/commons/py/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>

Det er også interessant å se om vi kan lage en vertikal range, eller om vi vil en vertikal slider. I skrivende stund, mars 2014, har vi ikke direkte støtte for dette i HTML. Det finnes en del krative varianter av hvordan det lar seg realisere i HTML/CSS på en del nettlesere. Det finnes biblioteker som fikser det, f.eks. jQuery UI [2] .

output

Dette elementet skal hjelpe oss å kople input elementer opp mot et resultat. Interessante attributetr er:

for Sier vilke inputelementer som er involverte
form Sier hvilke forms inputelementene er plasserte i

I eksempelet nedenfor er for-attributten satt, men kan utelates i dette eksempelet. Vi kan også godt plassere output elementet utenfor formen.

Prisberegning

HTML-fragmentet

<fieldset style="width:400px;padding:20px">
<legend>Prisberegning</legend>
<form id="beregning"
      action="https://borres.hiof.no/wep/commons/py/std.py" 
      oninput="sum.value=parseInt(antall.value)*parseInt(pris.value);teller.value=parseInt(antall.value)" 
      method="get">
    <p>Antall: [0<input type="range" id="antall" name="antall" value="50"/>100]
               <output name="teller" for="antall"> </output>
    <br/>Stykkpris: <input type="number" name="pris"  value="50" />
    </p>
    <p>sum:<output name="sum" for="antall pris"> </output>
    </p>
    <input type="submit" value="send" > </input>
</form>
</fieldset>

color

Vi vil velge en farge

Hvordan skal fargen være

HTML-fragmentet

<fieldset  style="width:400px;padding:20px">
<legend>Hvordan skal fargen være</legend>
<form action="https://borres.hiof.no/wep/commons/py/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 style="width:400px;padding:20px">
<legend>Om tid og dato</legend>
<form action="https://borres.hiof.no/wep/commons/py/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 style="width:400px;padding:20px">
<legend>Mail</legend>
<form action="https://borres.hiof.no/wep/commons/py/std.py" method="get">
E-mail: <input type="email" name="mail" />
<input type="submit" value="Send" />
</form>
</fieldset>

Webadresse

HTML-fragmentet

<fieldset style="width:400px;padding:20px">
<legend>Webadresse</legend>
<form action="https://borres.hiof.no/wep/commons/py/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 finner vi at dette er definert som:

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

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 style="width:400px;padding:20px">
<legend>Mail</legend>
<form action="https://borres.hiof.no/wep/commons/py/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 [3] 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 style="width:400px;padding:20px">
<legend>Mail</legend>
<form action="https://borres.hiof.no/wep/commons/py/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 https://borres.hiof.no/wep/htm/forms/mer/travel.html

Referanser

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

jQuery user interface jqueryui.com/ 14-03-2014

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

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