Forms
HTML
Børre Stenseth
Noen Elementer > Forms >Forms Text

Textelementer i Forms

Hva

Vi ser litt på elementer for å fylle ut og sende ren tekst.

text

Et enkelt eksempel uten noen HTML5-egenskaper.

Hvem er du

HTML-fragmentet er slik:

<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="https://borres.hiof.no/wep/commons/py/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.

Hvem er du

HTML-fragmentet er slik:

<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="https://borres.hiof.no/wep/commons/py/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.

  1. Vi kan skrive Javascript som filtrerer vekk vognretur i feltene. Dette er greitt nok, men gir lite i forhold til pkt 2
  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.
  3. 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

Hvem er du

HTML-fragmentet er slik:

<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="https://borres.hiof.no/wep/commons/py/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.

Hvem er du

HTML-fragmentet er nå slik:

<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="https://borres.hiof.no/wep/commons/py/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.

Vi kan også angi hva vi forventer av brukeren ved hjelp av egenskapen placeholder.

Hvem er du

HTML-fragmentet er nå slik:

<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="https://borres.hiof.no/wep/commons/py/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.

Hvem er du

HTML-fragmentet er nå slik:

<fieldset style="width:200px">
<legend>Hvem er du</legend>
<form action="https://borres.hiof.no/wep/commons/py/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. Merk de kommentarene som er gitt om sikkerhet i modulen Forms .

textarea

Gir oss mulighet for å skrive tekst med flere linjer

HTML-fragmentet er nå slik:

<form action="https://borres.hiof.no/wep/commons/py/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 kun 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="https://borres.hiof.no/wep/commons/py/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 ?

Noen Elementer > Forms >Forms Text