37 besökare, 0 medlemmar och 1 Student är online nu
Loopia

Webdesign och HTML

Formulär används till att skicka och hämta information. Ett vanligt exempel är kontaktformulär där du anger ditt ärende tillsammans med ditt namn och e-postadress. Formulär används när du gör en Google-sökning eller hämtar annan information från databaser. Du kan dessutom använda formulärkontroller till menyer och andra funktioner.

Formulär, grunderna

Ett HTML-formulär är uppbyggt av formulärkontroller med olika egenskaper som tex kryssrutor, radioknappar, textfält och meddelandefält. Alla formulärkontroller, text och övriga element placeras inom märket <FORM>.

I vårt första exempel används formulärkontrollerna INPUT och TEXTAREA för textfält och meddelandefält. Namnen eller etiketterna till varje formulärfält är skriven med vanlig text.

Förnamn:

Efternamn:

E-postadress:

Meddelande:

Koden till exemplet ovan:

<form id="form" name="form" method="post" action=" ">

Förnamn:<br />
<input type="text" name="fnamn" id="fnamn" /> <br />

Efternamn:<br />

<input type="text" name="enamn" id="enamn" /> <br />

E-postadress:<br />

<input type="text" name="epost" id="epost" /> <br />

Meddelande:<br />

<textarea name="meddelande" id="meddelande" cols="45" rows="5"></textarea> <br />

<input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />

</form>

Förklaring till koden ovan:

form action
Ett formulär fyller ingen funktion om det inte uför något, egenskapen för "action" är alltså den åtgärd som utförs när formuläret skickas. Åtgärden kan tex vara: action="formmail.php" som anropar ett PHP-script för att bearbeta och skicka innehållet i formuläret. I exemplet ovan är ingen "action" angiven men du kan läsa mer om detta i avsnittet ACTION - skicka innehållet i formuläret » nedan.

form method
Det finns två metoder för att skicka innehållet i formuläret; POST och GET. Den mest använda metoden är POST som skickar innehållet utan att det visas för användaren. Metoden GET visar innehållet i formuläret som en URL (webadress) i webbläsarens adressfält. Innehållet hämtas från formuläret och visas separerat med ett frågetecken (?) och mellanslag visas som plustecken (+).
Exemplet nedan visar hur URL:en kan se ut när formuläret i exemplet ovan skickats med GET:
http://www.dinadress.se/formular.php?fnamn=Lisa&enamn=Johansson&epost=lisa@dromvavaren.se
&meddelande=Hej&skicka=Skicka+meddelandet

input type="text"
Formulärfält med egenskapen "text" där en standardstorlek används för bredden på formulärfältet. Om du vill ange storleken på textytan lägger du till attributet size="30" där värdet "30" anger teckenbredden. Textinnehållet kan vara fler tecken än vad som visas i textytan och det går alltså att skriva fler tecken än den angivna teckenbredden. Om du vill begränsa antalet tecken som kan skrivas i textytan lägger du till attributet maxlength="30" där värdet "30" anger det maximala antalet tecken som kan skrivas i formulärfältet.

textarea
En textarea är meddelandefält där en större mängd text visas i flera rader. Bredd i antal tecken anges med attributet cols="45" och höjden i rader anges med attributet rows="5". Även här kan textinnehållet vara mer än vad som visas i textytan och innehållet kan då scrollas med en bläddringlist.

input type="submit"
Knappen som används för att skicka informationen i formuläret. Du kan också lägga till en knapp som rensar informationen i formulärfälten:
<input type="reset" name="rensa" id="rensa" value="Rensa" />

"name" och "id"
Formuläret och formulärkontrollerna tilldelas en unik identifierare med de två attributen "name" och "id". Se inforutan nedan:

OBS! Alla exempel i denna guide använder både attributen NAME och ID Anledningen är att "name" används av programkod som tex PHP och javascript. Om bara "id" används är risken stor att funktionerna blir felaktiga och det kan vara en bra idé att använda både "name" och "id" under en övergångsperiod .
Alternativet är att du kontrollerar all befintlig programkod och javascript och anpassar den till att anropa "id" istället för "name"..

 

LABEL FOR (etiketter till formulärfälten)

För att öka tillgängligheten och underlätta navigeringen för användare kan du tilldela formulärfälten egna etiketter som beskriver vad som kan anges i fälten. Elementet LABEL FOR används för att ange en etikett till varje formulärfält.

Formuläret nedan ser ut exakt som vårt tidigare exempel men skillnaden är att du nu kan klicka i textetiketten för att placera textmarkören i formulärfältet. Prova att klicka i etiketten (texten) ovanför formulärfältet!









Koden till exemplet ovan. Observera att namnet som används till LABEL FOR ska vara detsamma som namnet på formulärkontrollen NAME och ID:

<form id="form" name="form" method="post" action="">

<label for="fnamn">Förnamn:</label> <br />
<input type="text" name="fnamn" id="fnamn" /> <br />

<label for="enamn">Efternamn:</label> <br />
<input type="text" name="enamn" id="enamn" /> <br />

<label for="epost">E-postadress:</label> <br />
<input type="text" name="epost" id="epost" /> <br />

<label for="meddelande">Meddelande:</label> <br />
<textarea name="meddelande" id="meddelande" cols="45" rows="5"></textarea> <br />

<input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />

</form>

 

Tillgänglighet med LEGEND och FIELDSET

För att öka tillgängligheten kan elementet FIELDSET användas för att gruppera formulärkontroller och ge en tydlig översikt över formulärets delar. Du kan dela in formuläret i flera grupper genom ange flera FIELDSET. Om du vill ha en rubrik till grupperingen kan du använda elementet LEGEND som även underlättar navigeringen. När du använder LEGEND skapas en "box" runt formulärgruppen och en kantlinje visas runt området. OBS! Kantlinjens utseende kan variera beroende på vilken webbläsare som används. Internet Explorer visar en grå linje med runda hörn och Firefox visar en svart linje utan runda hörn.

Så här kan exemplet se ut när hela formuläret grupperats med FIELDSET och LEGEND:

FORMULÄR FÖR ATT SKICKA MEDDELANDE







Koden till exemplet ovan. Notera att CSS-formateringen style="width: 450px;" används tillsammans med FIELDSET för att att ange bredden på "boxen":

<form id="form" name="form" method="post" action="">

<fieldset style="width: 450px;">
<legend>FORMULÄR FÖR ATT SKICKA MEDDELANDE</legend>

<label for="fnamn">Förnamn:</label> <br />
<input type="text" name="fnamn" id="fnamn" /> <br />
<label for="enamn">Efternamn:</label> <br />
<input type="text" name="enamn" id="enamn" /> <br />
<label for="epost">E-postadress:</label> <br />
<input type="text" name="epost" id="epost" /> <br />
<label for="meddelande">Meddelande:</label> <br />
<textarea name="meddelande" id="meddelande" cols="45" rows="5"></textarea> <br />
<label for="skicka"></label>
<input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />

</fieldset>

</form>

Om du vill strukturera innehållet ännu mer kan du indela formulärets innehåll i flera grupper. Så här kan exemplet se ut när hela formuläret grupperats med två FIELDSET och LEGEND:

AVSÄNDARE






ÖVRIG INFORMATION


Koden till exemplet ovan. Notera att CSS-formateringen style="width: 450px;" används tillsammans med FIELDSET för att att ange bredden på "boxen":

<form id="form" name="form" method="post" action="">

<fieldset style="width: 450px;">
<legend>AVSÄNDARE</legend>
<label for="fnamn">Förnamn:</label> <br />
<input type="text" name="fnamn" id="fnamn" /> <br />
<label for="enamn">Efternamn:</label> <br />
<input type="text" name="enamn" id="enamn" /> <br />
<label for="epost">E-postadress:</label> <br />
<input type="text" name="epost" id="epost" />
</fieldset>

<br />
<br />

<fieldset
style="width: 450px;">
<legend>ÖVRIG INFORMATION</legend>
<label for="meddelande">Meddelande:</label> <br />
<textarea name="meddelande" id="meddelande" cols="45" rows="5"></textarea>
</fieldset>

<br />
<br />
<input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />

</form>

 

Textfält, grunderna för INPUT

Det finns flera typer av formulärkontroller som kan användas i formuläret. De kan vara av typen knappar (buttons), kryssrutor (checkboxes), radioknappar (radiobuttons), menyer, text eller gömda fält (hidden field).

I exemplen nedan används LABEL FOR för att öka tillgängligheten och användbarheten. Vill du inte använda etiketter hoppar du över elementet i din egen kod.

OBS! Alla exempel i denna guide använder både attributen NAME och ID Anledningen är att "name" används av programkod som tex PHP och javascript. Om bara "id" används är risken stor att funktionerna blir felaktiga och det kan vara en bra idé att använda både "name" och "id" under en övergångsperiod .
Alternativet är att du kontrollerar all befintlig programkod och javascript och anpassar den till att anropa "id" istället för "name"..

 

 

Textfält

Formulärkontroll för textinnehåll där innehållet visas i en rad. Observera att du kan skriva mer textinnehåll i textfältet än vad den visuella bredden antyder. Prova att skriva en längre text i fältet nedan:

<label for="namn">Namn:</label>

<input type="text" name="namn" id="namn" />

 

Textfält med maximalt antal tecken

Om du vill begränsa det antal tecken som kan skrivas i textfältet kan du ange attributet MAXLENGTH i antal tecken. Prova att skriva fler än 10 tecken i fältet nedan:

<label for="namn">Namn:</label>

<input type="text" name="namn" id="namn" maxlength="10" />

 

Textfält med angiven teckenbredd

Om du vill ange bredden på formulärkontrollen kan du använda attributet SIZE för att ange bredd i antal tecken. Den verkliga storleken på kontrollen beror på vilken teckensnitt och storlek som används och resultatet kan variera i olika webbläsare. Notera att du fortfarande kan skriva betydligt mer information än vad som visas i fältet, det är den visuella storleken som angivits och det begränsar inte innehållet.

<label for="namn">Namn:</label>

<input type="text" name="namn" id="namn" size="10" />

 

Textfält med förvalt innehåll

Formulärkontroller som ofta innehåller samma värde kan du med attributet VALUE ange ett default-värde så att användaren inte behöver fylla i fältet (innehållet kan ändras vid behov).

<label for="land">Land:</label>

<input type="text" name="land" id="land" value="Sverige" />

 

Inaktiverat textfält

Ett textfält med innehåll som bara ska kunna läsas och kopieras kan anges med attributet READONLY. Innehållet kan då inte ändras men markeras och kopieras.

<label for="land">Land:</label>

<input name="land" type="text" id="land" value="Sverige" readonly />

 

Inaktiverat och nedtonat textfält

Ett textfält med innehåll som inte ska gå att bearbeta alls kan anges med attributet DISABLED. Innehållet kan då varken ändras, markeras eller kopieras.

<label for="land">Land:</label>

<input name="land" type="text" id="land" value="Sverige" disabled />

 

Lösenordsfält med maskerat innehåll

Vid inloggning där lösenordet inte ska vara synligt kan du använda typen PASSWORD för att ange att tecknen som skrivs in ska maskeras. Prova att skriva i lösenordsfältet nedan:

<label for="pass">Lösenord:</label>

<input type="password" name="pass" id="pass" />

 

 

Textarea med flera rader och angiven bredd:

Till meddelanden eller annan längre textinformation kan TEXTAREA användas. Attributen COLS och ROWS används för att ange den visuella bredden i rader och tecken. Notera att du fortfarande kan skriva betydligt mer information än vad som visas i fältet, det är den visuella storleken som angivits och det begränsar inte innehållet.


<label for="meddelande">Meddelande eller frågor:</label>
<br />

<textarea name="meddelande" id="meddelande" cols="45" rows="5"></textarea>

 

Radbrytning i textarea

Texten som skrivs i konrollen av typen TEXTAREA kan radbrytas virtuellt, fysiskt eller inte alls. Prova de tre textfälten nedan för att se skillnaden när du skriver en längre text än vad som får plats visuellt i i textytan.

Virtuell radbrytning

Standard om inget anges är att texten radbryts virtuellt vilket innebär att texten visuellt radbryts vid formulärfältets kant men egentligen är en textmassa utan radbrytningar. Om du däremot gör en manuell radbrytning med ENTER-tangenten så bryts raden där på samma sätt som i vanliga ordbehandlingsdokument. Du behöver inte ange något alls för att virtuell radbrytning ska användas då detta är standard för textarea (attributet är WRAP="VIRTUAL" om du vill ange detta).


<label for="meddelande">Meddelande eller frågor:</label>
<br />

<textarea name="meddelande" id="meddelande" cols="45" rows="5"
wrap="virtual"
></textarea>

 

Fysisk radbrytning

En fysisk radbrytning är en verklig radbrytning vid kanten av formulärfältet och anges med attributet WRAP="PHYSICAL". Raderna blir då lika långa som de visas i textboxen/textarean. Observera att detta kan innebära att texten inte blir snyggt uppställd när formulärets innehåll skickas till textfiler eller databas.


<label for="meddelande">Meddelande eller frågor:</label>
<br />

<textarea name="meddelande" id="meddelande" cols="45" rows="5"
wrap="physical"
></textarea>

 

Ingen radbrytning

Om ingen radbrytning alls ska användas kan du ange detta med WRAP="OFF". Resultatet blir att innehållet skrivs som en enda lång rad utan radbrytning.


<label for="meddelande">Meddelande eller frågor:</label>
<br />

<textarea name="meddelande" id="meddelande" cols="45" rows="5"
wrap="off"
></textarea>

 

 

Kryssrutor och radioknappar

Kryssrutor och radioknappar kan användas när värdet för formulärkontrollen är angivet. Användaren klickar i kontrollen för att välja värdet.

Kryssrutor, checkboxes

Användaren kan välja ett eller flera värden genom att klicka i kryssrutan som är själva kontrollen CHECKBOX. Du kan gruppera valen genom att använda samma värde för attributet NAME men det är inget krav. Vill du ha etiketter till kryssrutorna skriver du det som vanlig text eller med LABEL FOR. Här används dessutom FIELDSET för att gruppera kryssrutorna och öka tillgängligheten.

FAVORITÅRSTID


 

<fieldset style="width: 300px;">
<legend>Favoritårstid</legend>


<input type="checkbox" name="favoritarstid" id="var" value="var"/>
<label for="var">Vår</label><br />

<input type="checkbox" name="favoritarstid" id="sommar" value="sommar"/>
<label for="sommar">Sommar</label> <br />

<input type="checkbox" name="favoritarstid" id="host" value="host"/>
<label for="host">Höst</label> <br />

<input type="checkbox"
name="favoritarstid" id="vinter" value="vinter"/>
<label for="vinter">Vinter</label>

</fieldset>

 

Kryssrutor som ska vara förvalda kan anges med attributet CHECKED="CHECKED"

FAVORITÅRSTID


 

<input type="checkbox" name="favoritarstid" id="var" value="var" checked="checked"/>
<label for="var">
Vår</label><br />

 

Radioknappar

Radioknappar används när värdet för formulärkontrollen är angivet. Skillnaden mot kryssrutor är att användaren bara kan ange ett värde genom att klicka i kontrollen RADIO.
OBS! Du måste gruppera valen genom att använda samma värde för attributet NAME annars kan flera radioknappar väljas. Vill du ha etiketter till radioknapparna skriver du det som vanlig text eller med LABEL FOR. Här används dessutom FIELDSET för att gruppera radioknapparna och öka tillgängligheten.

FAVORITÅRSTID


 

<fieldset style="width: 300px;">
<legend>Favoritårstid</legend>


<input type="radio" name="favoritarstid" id="var" value="var" />
<label for="var">Vår</label> <br />

<input type="radio" name="favoritarstid" id="sommar" value="sommar" />
<label for="sommar">Sommar</label> <br />

<input type="radio" name="favoritarstid" id="host" value="host" />
<label for="host">Höst</label> <br />

<input type="radio" name="favoritarstid" id="vinter" value="vinter" />
<label for="vinter">Vinter</label>

</fieldset>

 

Radioknapp som ska vara förvald kan anges med attributet CHECKED="CHECKED"

FAVORITÅRSTID


 

<input name="favoritarstid" type="radio" id="var" value="var" checked="checked" />
<label for="var">Vår</label>

 

 

Lista, dropdownlista, flervalslista

Formulärkontrollen SELECT kan användas som lista där ett eller flera val kan väljas eller som en dropdownlista.

TIPS! Du kan göra en drop-downmeny genom att använda javascript tillsamnans med formulärkontrollen SELECT.

Läs mer i guiden Dropdown-meny 1 »

 

Dropdownlista

En dropdownlista passar bra när du har en lång lista med val som kan väljas. Formulärkontrollen anges med SELECT och värdet som skickas är det som anges inom OPTION. Du kan dessutom använda attributet VALUE men detta är inget krav (kan användas om du vill skicka ett annat värde till script eller databas).

FAVORITÅRSTID

 

<fieldset style="width: 300px;">
<legend>FAVORITÅRSTID</legend>


<label for="select"><br />
Välj din favoritårstid här:</label><br />

<select name="favoritarstid" id="favoritarstid">
<option> Välj årstid här! </option>
<option value="var"> Vår </option>
<option value="sommar"> Sommar </option>
<option value="host"> Höst </option>
<option value="vinter"> Vinter </option>
</select>

</fieldset>

 

Lista och flervalslista

Om du vill visa flera rader med val så kan du använda attributet SIZE för att ange antal rader som ska visas i listan. Exemplet nedan använder 4 rader och visar alla fyra valen i vår lista.

FAVORITÅRSTID

 

<fieldset style="width: 300px;">
<legend>FAVORITÅRSTID</legend>


<label for="select"><br />
Välj din favoritårstid här:</label><br />

<select name="favoritarstid" id="favoritarstid" size="4">
<option> Välj årstid här! </option>
<option value="var"> Vår </option>
<option value="sommar"> Sommar </option>
<option value="host"> Höst </option>
<option value="vinter"> Vinter </option>
</select>

</fieldset>

Om du har fler val (option) än antalet rader (size) så kan listan bläddras:

FAVORITÅRSTID

 

Ska flera val kunna göras används attributet MULTIPLE och du kan då göra flera val med CTRL+klick eller SHIFT+klick. Prova att välja flera årstider nedan!

FAVORITÅRSTID

 

<fieldset style="width: 300px;">
<legend>FAVORITÅRSTID</legend>


<label for="select"><br />
Välj din favoritårstid här:</label><br />

<select name="favoritarstid" id="favoritarstid" size="4" multiple="multiple">
<option> Välj årstid här! </option>
<option value="var"> Vår </option>
<option value="sommar"> Sommar </option>
<option value="host"> Höst </option>
<option value="vinter"> Vinter </option>
</select>

</fieldset>

 

Gruppera valen med OPTGROUP

Du kan gruppera valen i listan och göra den mer tillgänglig med OPTGROUP som används tillsammans med LABEL för att ge en etikett till gruppen. I exemplet nedan kan du dessutom göra flera val då vi använt attributet MULTIPLE.

FAVORITMÅNAD

 

<fieldset style="width: 300px;">
<legend>FAVORITMÅNAD</legend>


<label for="select"><br />
Välj en eller flera favoritmånader här:<br />
</label>

<select name="favoritmanad" id="favoritmanad" size="16" multiple="multiple">

<optgroup label="Kvartal 1">
<option value="jan">Januari</option>
<option value="feb">Februari</option>
<option value="mar">Mars</option>
</optgroup>

<optgroup label="Kvartal 2">
<option value="apr">April</option>
<option value="maj">Maj</option>
<option value="jun">Juni</option>
</optgroup>

<optgroup label="Kvartal 3">
<option value="jul">Juli</option>
<option value="aug">Augusti</option>
<option value="sep">September</option>
</optgroup>

<optgroup label="Kvartal 4">
<option value="okt">Oktober</option>
<option value="nov">November</option>
<option value="dec">December</option>
</optgroup>

</select>

</fieldset>

 

 

Knappar - buttons

Knappar används för att skicka eller hämta innehållet som angivits in formulärkontrollerna. Den vanligaste typen av knapp är SUBMIT som utför den åtgärd (action) som angivits. Åtgärden kan tex vara: action="formmail.php" som anropar ett PHP-script för att bearbeta och skicka innehållet i formuläret.
Läs mer om action i avsnittet ACTION - skicka innehållet i formuläret »

Om innehållet som angivits formulärkontrollerna ska tas bort används en knapp av typen RESET som återställer formuläret till ursprungsläget. Observera att återställa inte behöver innebära att alla fält rensas och töms. Om ett textfält har ett standardvärde angivet med VALUE så visas det ändå. Samma sak gäller för radiobuttons och checkboxes med värdet CHECKED.

Exempel på knappar av typen SUBMIT och RESET:

<input type="submit" name="submit" id="submit" value="Skicka meddelandet" />
<input type="reset" name="reset" id="reset" value="Återställ formuläret" />

Du kan ersätta SUBMIT-knappen med en egen bild genom att ändra kontrollen till typen IMAGE. OBS! Fungerar inte med RESET. Texten på knappen är då en del av bilden och kan inte ändras i formulärkontrollen. Notera också att en bild istället för en vanlig submit-kontroll kan innebära problem för de som använder webbläsare som inte stöder grafik...

Exempel på knapp av typen IMAGE:

<input type="image" name="submit" id="submit" src="submit_knapp.gif" />

Du kan även använda en egen bakgrundsbild till kontrollen av typen SUBMIT. Skillnaden mot knappen av typen IMAGE är att den text som visas inte är en del av bilden utan anges i kontrollen. Bakgrundsbilden anges med CSS - läs mer i guiden CSS - formatering av formulär »

 

 

Tillgänglighet med TABINDEX

För att öka tillgängligheten och bestämma i vilken ordning markören förflyttas när TABB-tangenten används för att manövrera i formuläret kan du använda attributet TABINDEX. Observera att Tabindex gäller för hela formuläret <FORM> och att du måste ange tabindex för alla formulärkontroller om det ska fungera. Du kan alltså inte ange tabindex för enstaka formulärfält.

Formulär utan TABINDEX där markören förflyttas från vänster till höger. Klicka in markören i det första fältet (Förnamn) och använd TABB-tangenten för att prova:

Kunduppgifter

 

Formulär med TABINDEX där markören förflyttas i angiven ordning (uppifrån vänster och nedåt). Klicka in markören i det första fältet (Förnamn) och använd TABB-tangenten för att prova:

Kunduppgifter

 

<form id="form" name="form" method="post" action="">
<fieldset style="width: 500px;">
<legend>Kunduppgifter</legend>


<label for="fnamn">Förnamn</label>
<input type="text" name="fnamn" id="fnamn" tabindex="1" />

<label for="postnr">Postnummer</label>
<input type="text" name="postnr" id="postnr" tabindex="4" /> <br />

<label for="enamn">Efternamn</label>
<input type="text" name="enamn" id="enamn" tabindex="2" value=" 2." />

<label for="ort">Ort</label>
<input type="text" name="ort" id="ort" tabindex="5" />

<label for="gatuadress"> Gatuadress</label>
<input type="text" name="gatuadress" id="gatuadress" tabindex="3" />

<label for="tel">Telefon</label>
<input type="text" name="tel" id="tel" tabindex="6" />

</fieldset>
</form>

 

 

Textmarkören i formulärfält när sidan visas

Om du vill tilldela formuläret fokus när sidan visas kan du placera textmarkören i valfritt formulärfält genom att använda javascript - se ett exempel här Öppnas i nytt fönster (Open in new window) 

Placera koden inom <BODY> och byt ut "formulärnamn" och "fältnamn" mot dina egna namn:

<body onload="document.formulärnamn.fältnamn.focus();">

Hela koden till formulärexemplet:

<body onload="document.kontaktform.fnamn.focus();">

<form name="kontaktform" id="kontaktform" method="post" action="">

<fieldset style="width: 300px;">
<legend>Textmarkören i formulärfält</legend>

<label for="fnamn">Förnamn:</label> <br />
<input type="text" name="fnamn" id="fnamn" /> <br />

<label for="enamn">Efternamn:<br /> </label>
<input type="text" name="enamn" id="enamn" /> <br />

<label for="epost">E-postadress:<br /> </label>
<input type="text" name="epost" id="epost" />

</fieldset>

</form>


</body>

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

 

 

ACTION - skicka innehållet i formuläret

Med attributet ACTION anger du vilken typ av bearbetning som ska ske. Formulärets innehåll måste bearbetas för att skickas, sparas, visa bekräftelsesida, resultatsida, skicka svar via epost mm.

Formuläret bygger du med vanlig HTML men för att bearbeta innehållet krävs att du använder ett serverside-script som tar emot och bearbetar informationen. Om informationen dessutom ska lagras används en databas eller loggfiler.

Här visar vi tre av alternativen du kan använda; MAILTO - CGI - PHP

 

Metod 1:
MAILTO för att skicka formulärets innehåll till e-postadress

Även om du bara vill skicka innehållet i ett formulär till en e-postadress rekommenderas att du använder ett script som kommunicerar med webbservern. Du kan istället använda funktionen MAILTO som anropar en epostklient lokalt på användarens dator och skickar innehållet som ett vanligt epost-meddelande. Som ACTION anger du MAILTO: tillsammans med den e-postadress som ska vara mottagare av formuläret:

<form method="post" action="mailto:epostadress@foretag.se">

För innehållet ska formateras som text med radbrytningar och mellanslag används ENCTYPE

<form method="post" action="mailto:epostadress@foretag.se" enctype="text/plain">

Om ENCTYPE inte används kan meddelandet visas som en enda lång textrad med tecknet & istället för radbrytning och med plustecken istället för mellanslag:

Vill du att en meddelanderubrik (subject) ska visas i meddelandet kan du använda SUBJECT som anges i anslutning till e-postadressen inom MAILTO (åtskiljd med ett frågetecken ?)

<form method="post" action="mailto:epostadress@foretag.se?subject=Ditt meddelande" enctype="text/plain">

Om du vill att formuläret skall skickas till fler än en mottagare kan du ange CC (carbon copy) inom MAILTO (åtskiljd med ett frågetecken ?):

<form method="post" action="mailto:epostadress@foretag.se?subject=Ditt meddelande?cc=epostadress_2@foretag.se" enctype="text/plain">

...fler CC-mottagare anger du åtskiljda med kommatecken:

<form method="post" action="mailto:epostadress@foretag.se?subject=Ditt meddelande?cc=epostadress_2@foretag.se,epostadress_3@foretag.se" enctype="text/plain">

 

Prova själv! Skicka formuläret nedan med MAILTO-funktionen:

MAILTO-formulär









 

När meddelandet (från formuläret ovan) skickats så kan resultatet se ut så här när det öppnas i mottagarens epost-program:

Problem som kan förekomma med MAILTO
Observera att det finns flera nackdelar med metoden MAILTO. Användaren måste ha en fungerande och konfigurerad epost-klient lokalt på sin dator, tex Outlook, Outlook Express, Eudora etc. Om formuläret skickas från en allmän dator som tex en skola eller bibliotek så finns förmodligen inga epost-konton konfigurerade och funktionen mailto kanske inte kan använda epost-programmet. När formuläret skickas visar en del webbläsare information om att e-postmeddelande kommer att skickas. Användaren måste kanske bekräfta och godkänna att det sker och detta kan vara förvirrande. Här är exempel på meddelanden som visas i Internet Explorer när formuläret skickas med MAILTO-funktionen:

Formulärets innehåll kan skickas som en bilaga (attachment) istället för som ett vanligt meddelande. Bilagan kan vara kan vara av filtypen .ATT och vara svår att öppna för mottagaren. Här är ett exempel där textmeddelandet skickats som en bilaga (kan öppnas med Anteckningar/Notepad):

 

 

Metod 2:
Serverside-script: CGI

CGI (Common Gateway Interface) är en metod för HTML-dokument att kommunicera med webbservrar och används tex till att hantera information i formulär, gästböcker, forum, besöksräknare och sökfunktioner. CGI-script kan skrivas i flera olika programspråk som tex C/C++, Fortran, PERL, TCL, Visual Basic mm. CGI-script kan köras på UNIX-, Linux- och Windowsservrar och erbjuds på alla webbhotell.

Många formulär använder det numera klassiska CGI-scriptet FormMail. Med hjälp av FormMail kan du skicka formulärets innehåll till en e-postadress och dessutom skicka bekräftelse till användaren samt visa en bekräftelsesida när formuläret skickats. Läs mer i Dreamweaver-guiden FormMail » om hur du installerar och använder FormMail.

TIPS! Kolla om ditt webbhotell erbjuder FormMail eller liknade funktioner. Du som är kund hos Loopia Öppnas i nytt fönster (Open in new window) kan använda CGI-scriptet utan att själv installera scriptet.

Läs mer i deras Kunskapsdatabas Öppnas i nytt fönster (Open in new window)  i kategorin "Övrigt/Kontaktformulär (Formmail)

 

 

Metod 3:
Serverside-script: PHP - ASP mfl inbäddade script

PHP, ASP och liknande serverside scriptspråk kan till (skillnad från CGI) bäddas in direkt i HTML-koden. OBS! Kontrollera om din webbserver måste ha stöd för det scriptspråk du väljer. Webdesignskolan har valt PHP framför ASP, ASP.net, ColdFusion och andra serverside-språk då PHP är gratis och utvecklas opensource. Dessutom kan PHP köras på flera olika webbservrar som tex Apache webbserver som liksom PHP är gratis och opensource. ASP är utvecklat av Microsoft och kräver deras egen webbserver IIS (Internet information server) eller PWS (Personal webbserver).

Fakta om PHP
PHP är en förkortning av "PHP Hypertext Preprocessor" där själva förkortningen ingår som första ord i förkortningen vilket kallas för återkommande akronym (recursive acronyme). Namnet "Hypertext Preprocessor" antyder också vad PHP gör - förbehandlar kod som sedan visas som hypertext i webbläsaren. PHP är ett scriptspråk som skrivs direkt i HTML-koden där instruktionerna utförs av webbservern och inte i webbläsaren. Om du väljer att visa källkoden i webbläsaren så ser du inte PHP-koden då den redan är interpreterad till HTML av webbservern innan den skickas till webbläsaren (klienten). PHP har likheter med CGI-script (Perl) men då CGI-script körs som egen fil så infogas PHP direkt i HTML-koden. PHP används för att skapa dynamiska och interaktiva sidor som e-butiker, forum, gästböcker, communities, formulär, inloggningssystem mm. PHP kan alltså användas tillsammans med databaser där information kan hämtas och sparas. Du har även stor användning av PHP i dina "vanliga" HTML-dokument. Ett exempel är menyer som återanvänds på flera sidor i din webbplats - genom att infoga samma menysida i alla dokument med PHP-kod så kan du ändra menyn i ett enda dokument och menyn på alla sidor uppdateras - du har då dynamiska sidor med hjälp av PHP. Du kan alltså inte använda endast PHP för att bygga dina webbplatser utan som ett komplement till HTML.

TIPS! Du kan lära dig PHP från grunden i våra guider om PHP »

Här är ett fungerande exempel på ett formulär som använder PHP för att bearbeta informationen. Prova att fylla i alla uppgifter och skicka formuläret!

Klicka här för att se exemplet nedan Öppnas i nytt fönster (Open in new window) 

Läs mer i PHP-guiden Formmail - skicka formulär till epost » om hur du bygger och använder ditt eget FormMail .

Läs mer om formulär:

CSS - formatering av formulär »

Fler formulärfunktioner med javascript »