Button i form
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="http://www.it.hiof.no/~borres/cgi-bin/forms/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="http://www.it.hiof.no/~borres/cgi-bin/forms/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:
HTML-koden ser slik ut:
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/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:
HTML-koden ser slik ut:
<form action="http://www.it.hiof.no/~borres/cgi-bin/forms/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.
