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

Button i form

Hva

Knapper kommer i følgende varianter: input:submit, input:reset, input:button, input:image og button. Eksemplene nedenfor inneholder ikke spesifikke HTML5-egenskaper ved buttons. Merk imidlertid at det er noen interessante egenskaper ved buttons som det kan være verdt å se nærmere på:

  • autofocus. Knappen får fokus når siden lastes
  • formaction. En URL som sier hvor formdata skal sendes (når type=submit)
  • form. Navnet på formen denne knappen tilhører
  • formmethod. get | post (når type=submit)
  • ...pluss noen fler

submit

En submit-knapp sender data til tjeneren slik som angitt av action og method attributtene i den omgivende formen. Vi har sett eksempler på dette i de foregående modulene.

HTML-koden ser slik ut:

<form action="https://borres.hiof.no/wep/commons/py/std.py" 
      method="get">
<div>
    <input type="text" name="message" value="hei" 
           maxlength="10" size="15"/>
    <input type="submit" value="Send"/>
</div>
</form>

value attributten sendes til tjeneren og kan identifisere hvilken handling som skal gjøres i det mottagende skriptet. Dersom vi ikke angir value for en submit-knapp, får den en default verdi.

reset

En reset-knapp tømmer feltene som ligger i formen. Det vil si den blanker ikke nødvendigvis, men den setter verdiene tilbake til initialverdiene. Vi kan betrakte dette som en hjelpefunksjon når brukeren angrer på alt han/hun har fylt ut, og ønsker å starte på nytt.

HTML-koden ser slik ut:

<form action="https://borres.hiof.no/wep/commons/py/std.py" 
      method="get">
<div>
    <input type="text" name="message"
           maxlength="10" size="15" placeholder="hei" required=""/>
    <input type="submit" value="Send"/>
    <input type="reset" value="Reset"/>
</div>
</form>

button

Et button felt har en sluttag og alt som ligger inne i elementet er klikkbart. Dersom det skal skje noe når vi klikker må vi ta vare på det selv. Slik sett kan vi si at en button ikke er direkte koplet til en form. F.eks.

HTML-koden ser slik ut:

<p>
    <button onclick="javascript:alert('jada')">Klikk her !</button>
</p>

Eller vi kan lage noe slikt:

HTML-koden ser slik ut:

<button style="background-color:yellow" 
        onclick="javascript:alert('jada, ikke mas')">
    <img src="bs1.gif" alt="bilde"/>
</button>

Vi kan imidlertid kombinere en form-relatert funksjon som submit eller reset med et button-element. Dette gjør vi ved å bruke attributten type for en button. Vi kan f.eks. lage:

Fortell meg om det:

HTML-koden ser slik ut:

<form action="https://borres.hiof.no/wep/commons/py/std.py" 
      method="post">
    <div style="font-weight:bold">Fortell meg om det:</div>
    <div>
    <textarea name="message" cols="15" rows="5"> 
    </textarea>
    <button type="submit" value="Send">
        <img src="bs1.gif" alt="bilde"/>
    </button>
    </div>
</form>

Vi kan lage tilsvarende reset knapper ved å gi type-attributten verdien reset.

image

Du kan lage bilder som submit-knapper med input type image, slik:

Fortell meg om det:

HTML-koden ser slik ut:

<form action="https://borres.hiof.no/wep/commons/py/std.py"
      method="get">
    <div style="font-weight:bold">Fortell meg om det:
    </div>
    <div>
<textarea name="message" cols="15" rows="5">
</textarea>
<input type="image" src="bs1.gif" alt="bilde"/>
</div>
</form>

Merk at koordinatene til museklikket på bildet sendes til scriptet. Origo i øvre venstre hjørne og positiv y-akse nedover. Det er derfor mulig å legge ut f.eks. et kart eller en plantegning og tolke koordinatene på tjenersiden.

[1]
Referanser
  1. HTML5 w3.org dev.w3.org/html5/spec/Overview.html 14-03-2011
Noen Elementer > Forms >Forms Button