Att använda formulär

Formulär används för att besökarna skall kunna ge feedback på er sida.
För att ni skall kunna använda den inmatade informationen på er hemsida så krävs andra programmvaror som vi inte kommer att ta upp i kursen ex. PHP.
Besökaren kommer enbart kunna skicka e-post meddelande till er.

Det är möjligt att använda flera formulär samt vanlig HTML kod på samma sida och även ha HTML taggar i formuläret.
Jag kommer att ta upp formulärobjekten under varje rubrik och ge exempel på hur de ser ut.

<form>

Start och sluttagg för formuläret samt var informationen skall skickas. ex.
<form action="mailto:användare@dator.domän.se" enctype="text/plain">

action="mailto.. anger adressen för försändelsen.
enctype="text/plain... anger hur meddelandet skall visas, lämpligt med detta format för mail.

<input>

Taggen använd för att skapa de flesta typer av formulärobjekt och det finns tre vanliga attribut för taggen och det är:

type som bestämmer vilket formulärobjekt som skapas.
name anger namnet på objektet, viktigt när man sänder iväg det.
value anger objektets värde

Textfält(type="text")

Ett textfält där du kan bestämma storleken på rutan och om det skall vara någon förvald text, se exempel.

Är du en kille? <input type="text" name="kön" value="JA" size="5"/>
Är du en kille?

Dold text (type="password")

Observera att texten inte är krypterad utan kan plockas upp av mindre hedliga personer.
När du skriver in texten så visas den som symboler.

Skriv koden <input type="password" name="kod" maxlength="9" size="9"/>;
Skriv koden

Sändknapp (type="submit")

När användaren klickar på knappen så kommer formulärets innehåll att skickas.
När meddelandet skickas till dig så kommer följande värde att skickas: svar=JA eller svar=NEJ
Obs att attributet name används i detta fall för att specifiera en grupp knappar.

<input type="submit" name="svar" value="JA">
<input type="submit" name="svar" value="NEJ">

Återställningsknapp (type="reset")

När användaren klicka på denna knapp så återställs alla värden till deras förvalda värden.

<input type="reset" value="ta bort allt"/>

Kryssrutor (type="checkbox")

Kryssrutor delas in i grupper och kryssrutorna kan vara ifyllda eller tomma, det går att markera flera kryssrutor på samma gång.

Value är värdet som skickas om rutan är ifylld.
checkad används om rutan skall vara förvald.

<b><font size="4">Vad har du för husdjur</font></b>
Katt<input type="checkbox" name="husdjur" value="Katt" checked="checked"/>
Hund<input type="checkbox" name="husdjur" value="Hund"/>
Marsvin<input type="checkbox" name="husdjur" value="Marsv."/>

Vad har du för husdjur
Katt
Hund
Marsvin

Radioknappar (type="radio")

Fungerar som kryssrutor, men skiljer sig genom att du bara kan välja ett alternativ.
Tänk också på att du måste förvälja ett alternativ.

<b><font size="4">Om du skulle skaffa ett husdjur till, vilket skulle det då bli? </font></b>
Katt<input type="radio" name="husdjur" value="Katt" checked="checked"/>
Hund<input type="radio" name="husdjur" value="Hund"/>
Marsvin<input type="radio" name="husdjur" value="Marsv."/>

Om du skulle skaffa ett husdjur till, vilket skulle det då bli?
Katt
Hund
Marsvin

<textarea>

Pĺminner om text men här kan du bestämma både textareans höjd och bredd genom attributen cols och rows.

<textarea name="kommentar" rows="8" cols="40">Skriv in eventuell kommentar här! </textarea>

<select>

Används tillsammans med taggen <option> för att skapa listor, se nedan.

size bestämmer antalet synliga listelement
multiple ger användaren möjlighet att välja mera än ett alternativ.

<option>

Skapa olika element i en lista. Även här finns några attribut.

selected ger ett förvalt alternativ.
value gör så att detta värde skickas istället för elementets text.

<font size="4">vilka kurser läser du?</font>
<select name="Kurser" multiple="multiple" size="4">
<option value="1">Matematik
<option value="2" selected="selected">Datakunskap
<option value="3">Svenska
<option value="4">Programmering
<option value="5">Idrott
</select>

vilka kurser läser du?

<button>

Button är ett alternativ till sändknappen och återställningsknappen som jag tog upp tidigare.
Attributet type kan ha värderna submit (förvalt), reset och button.
submit sänder iväg formuläret, reset återställer formuläret och till button går det att koppla javascript och till alla knapparna kan ni koppla bilder.

<button name="send" >Skicka meddelandet</button>
<button type="reset"> Återställ</button>
<button type="button" name="inget"><img src="blom.jpg" alt="Inget händer"></button><br />

Ett exempel med all kod

<form action="mailto:per.edvardsson@tranemo.se">
Jag är man <input type="radio" name="kon" value="man" checked="checked"/>
Jag är kvinna <input type="radio" name="kon" value="tjej"/>
Jag är <input type="text" value="17" name="age" size="2"/> år
Mina hobbies är:
<select name="intresse" multiple="multiple" size="3"/>
<option>Hyra filmer</option>
<option>Lyssna på musik</option>
<option>Läsa böcker</option>
<option>Motionera</option>
<option>Spela dataspel</option>
<option>Spela kort</option>
<option>Titta på TV</option>
</select>
<textarea name="anteckning" rows="4" cols="40">Något övrigt du vill tillägga? </textarea>
<button type="reset" name="emty">Töm formuläret</button>
<button name="message">Sänd meddelandet till Läraren</button> </form>

Några taggar jag inte tar upp

<label>

Möjliggör för användaren att även klicka på texten när man använder ex. radioknappar.

<optgroup>

Gör det möjligt att gruppera listor som då får rubriker.

<fieldset> och <legend>

Används för att gruppera formulärobjekt, kan göra formuläret lite snyggare.

tabindex

tillĺter att man bestämmer vilken ordning som man hoppar med hjälp av tabb tangenten, annars kommer de i den ordning som du lagt in fälten.

accesskey

tillĺter att man ger fälten olika kort kommandon, har dock en begränsad nytt eftersom olika webbläsare och operativsystem använder olika kort kommandon. Ex. Alt + T eller Alt + skift + T eller skift + Escape och man får sedan välja bokstav.