Textelementer i Forms
text
Et enkelt eksempel uten noen HTML5-egenskaper.
HTML-fragmentet er slik:
<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="get">
<p><label>Navn:</label><input type="text" name="navn"/></p>
<p><label>Adresse:</label><input type="text" name="adresse"/></p>
<p class="submit"><input type="submit" value="Send"/></p>
</form>
</fieldset>
Vi kan bruke vanlige egenskaper for å sette maksstørrelse både på felters lengde og på hvor mange tegn vi skal akseptere i feltet.
HTML-fragmentet er slik:
<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="get">
<p><label>Navn:</label><input type="text" name="navn" maxlength="10" size="15"/></p>
<p><label>Adresse:</label><input type="text" name="adresse" maxlength="10" size="5"/></p>
<p class="submit"><input type="submit" value="Send"/></p>
</form>
</fieldset>
Hvis du tester formene ovenfor vil du se at et linjeskift (cr) vil fungere som en submit, akkurat som vi kjenner fra dialog-bokser i vanlige desktop applikasjoner. Av og til er dette greitt og av og til ikke. Det er for eksempel ikke så bra dersom brukeren fyller ut navnet og slår vognretur uten å ha fylt i adressen. Vi kan ta fatt i dette på flere måter.
- Vi kan skrive Javascript som filtrerer vekk vognretur i feltene. Dette er greitt nok, men gir lite i forhold til pkt 2
- Vi kan skrive Javascript som griper inn i submit handlingen og drepe den dersom ikke alt er utfylt. Dette åpner for en strategi der vi kan gjøre ulike typer validering før formen sendes.
- Vi kan bruke HTML5-egenskaper som sier at et felt skal være utfylt, required før formen sendes. Krever ikke skripting men begrenser seg til ren utfyllingstest dersom vi ikke har felter med innebygd innholdskontroll.
Vi ser på de to siste variantene
submitkontroll
Test denne
HTML-fragmentet er slik:
<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="get">
<p><label>Navn:</label><input type="text" name="navn" maxlength="10" size="15"/></p>
<p><label>Adresse:</label><input type="text" name="adresse" maxlength="10" size="15"/></p>
<p class="submit"><input type="submit" value="Send" onclick="return control(this.form);"/></p>
</form>
</fieldset>
og javascriptet er slik
function control(frm)
{
var navn=frm['navn'].value;
var adr=frm['adresse'].value;
// we can do any kind of testing here to decide
// to to kill the submit (return false) or not
if((navn.length==0) ||(adr.length==0))
return false;
return true;
}
egenskapskontroll
Hvis vi stoler på at nettleseren fikser HTML5-foms, kan vi se om vi kan løse problemet med egenskapen required.
HTML-fragmentet er nå slik:
<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="get">
<p><label>Navn:</label><input type="text" name="navn" maxlength="10" size="15" required=""/></p>
<p><label>Adresse:</label><input type="text" name="adresse" maxlength="10" size="15" required=""/></p>
<p class="submit"><input type="submit" value="Send"/></p>
</form>
</fieldset>
Merk at egenskapen required vil være satt uansett hvilken verdi den gis. F.eks. required="false" eller bare required vil fungere like bra (!). Når jeg her skriver den med en verdi er det fordi det verktøyet jeg bruker for å bygge sider baserer seg på vellformet materiale. WXT 6
Vi kan også angi hva vi forventer av brukeren ved hjelp av egenskapen placeholder.
HTML-fragmentet er nå slik:
<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="get">
<p><label>Navn:</label>
<input type="text" name="navn" maxlength="10" size="15" placeholder="ditt navn" required=""/></p>
<p><label>Adresse:</label>
<input type="text" name="adresse" maxlength="10" size="15" placeholder="din adresse" required=""/></p>
<p class="submit"><input type="submit" value="Send"/></p>
</form>
</fieldset>
Vi har også mulighet for å styre hvorvidt nettleseren skal foreslå utfylling basert på tidligere verdier, autocomplete
Prøv denne med bruk og lastsiden på nytt. Navnet er satt il autocomplete, men ikke adressen.
HTML-fragmentet er nå slik:
<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="get" autocomplete="on">
<p><label>Navn:</label>
<input type="text" name="navn" maxlength="10" size="15"
placeholder="ditt navn" required=""/></p>
<p><label>Adresse:</label>
<input type="text" name="adresse" maxlength="10" size="15" autocomplete="off"
placeholder="din adresse" required=""/></p>
<p class="submit"><input type="submit" value="Send"/></p>
</form>
</fieldset>
password
Oppfører seg som text, men gir . som ekko
textarea
Gir oss mulighet for å skrive tekst med flere linjer
HTML-fragmentet er nå slik:
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="post">
<p><textarea name="message" rows="6" cols="30" required=""> </textarea></p>
<p><input type="submit" value="Send denne meldinga"/></p>
</form>
Tekstfeltet vi se litt forskjellig ut i forskjellige nettlesere. Attributtene rows og cols gir en initialverdi. I noen nettlesere kan området strekkes, mens i andre opptrer scrollbarer.
I HTML5 har vi dessuten egenskapen wrap. wrap kan være "hard" eller "soft". Hvis den er soft vi wrappingen kune foregå på vevsiden, hvis den er hard sendes linjeskiftene også til tjeneren. soft er default. Vi prøver med en hard wrap:
HTML-fragmentet er nå slik:
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/std.py"
method="post">
<p><textarea name="message" rows="6" cols="30" wrap="hard" required=""> </textarea></p>
<p><input type="submit" value="Send denne meldinga"/></p>
</form>
Som programmerer kan en kanskje lure på hvorfor ikke input type=text kunne utstyres med en multiline egenskap, i stedet for å holde på textarea ?
