Gillar du den här guiden? Vill du att vi ska fortsätta göra fler guider? - läs mer här » 

skriv ut »

Formulär - forms

Formulär - exempel

Formulär används för att skicka eller ta emot information och du kan även ha menyer gjorda av formulärkontroller som "bläddringsmeny" eller "listmeny". Här är exempel på ett formulär med de vanligaste formulärkontrollerna. Prova att fylla i de olika kontrollerna för att se hur de fungerar!

Exempel:

Namn:
Lösenord:

Skriv meddelandet här:

Vilken eller vilka är din favoritårstid! Välj gärna flera!
Vår   Sommar   Höst   Vinter

Vilken är din favoritårstid?
Vår    Sommar   Höst   Vinter

Välj favoritårstid här:

Välj favoritårstid här (CTRL-klicka för flerval):

 

Formulärkontroller - grunder

Formulärkontrollerna som används i exemplet ovan koden under varje exempel visas här. Etiketterna till formulärfälten kan du skriva som vanlig text. Om du vill se hela formulärkoden direkt hittar du det längst ned på sidan »

Formulärområdet anges med med märket <FORM>. I exemplen är formulärfälten placerade i ett stycke <P> men du kan även lägga dem i en tabellcell <TD> om du använder tabeller.

Formulärområdet:

<form> ditt formulär... </form>

Textruta:

Namn:

<p>Namn: <input type="text" name="namn"></p>

Textruta med maximalt antal tecken:

Namn:

<p>Namn: <input type="text" name="namn" maxlength="10"></p>

Textruta med bestämd teckenbredd:

Namn:

<p>Namn: <input type="text" name="namn" size="50"></p>

Textruta för lösenord:

Lösenord:

<p>Lösenord: <input type="password" name="losenord"></p>

Textruta med flera rader och bestämd teckenbredd:

Skriv meddelandet här:


<p>Skriv meddelandet här:<br> <textarea name="Meddelande" rows="4"></textarea></p>

Samma meddelandefält med bestämd bredd i antal tecken.

Skriv meddelandet här:


<p>Skriv meddelandet här:<br><textarea name="Meddelande" rows="4" cols="50"></textarea></p>

Radbrytning i formulärfält

Texten som skrivs i fältet textarea eller input kan radbrytas virtuellt, fysiskt eller inte alls. Om inget annat anges radbryts texten virtuellt wrap="virtual" vilket innebär att texten radbryts vid formulärfältets kant men egentligen är en textmassa utan radbrytningar. Motsatsen är fysisk wrap="physical" radbrytning som skapar radbrytning vid kanten av formulärfältet men detta kan innebära att texten inte blir bra uppställd när du får formulärdatat skickad till textfil, mail eller databas.

Virtuell radbrytning

Skriv meddelandet här:


<p>Skriv meddelandet här:<br><textarea name="Meddelande" rows="3" wrap="virtual"></textarea></p>

Fysisk radbrytning

Skriv meddelandet här:


<p>Skriv meddelandet här:<br><textarea name="Meddelande" rows="3" wrap="physical"></textarea></p>

Ingen radbrytning

Skriv meddelandet här:


<p>Skriv meddelandet här:<br><textarea name="Meddelande" rows="3" wrap="off"></textarea></p>

Kryssrutor:

Vilken är din favoritårstid? Välj en eller flera!
Vår   Sommar   Höst   Vinter

Vilken är din favoritårstid?<br>
Vår <input type="checkbox" name="favoritarstid" value="Var">
Sommar <input type="checkbox" name="favoritarstid" value="Sommar">
Höst <input type="checkbox" name="favoritarstid" value="Host">
Vinter <input type="checkbox" name="favoritarstid" value="Vinter">

OBS! Viktigt att du använder samma parameter för name på alla alternativ om du vill ha en sammanställning av valen för din fråga.

Radioknappar:

Vilken är din favoritårstid? Du kan bara välja ett exempel:
Vår    Sommar   Höst   Vinter

Vilken är din favoritårstid?<br>
Vår <input type="radio" name="favoritarstid" value="Var">
Sommar <input type="radio" name="favoritarstid" value="Sommar">
Höst <input type="radio" name="favoritarstid" value="Host">
Vinter <input type="radio" name="favoritarstid" value="Vinter">

OBS! Viktigt att du använder samma name på alla alternativ om du vill att endast ett alternativ ska kunna väljas vilket ofat är fallet då radiobuttons används.

Dropdownmeny - Rullgardinsmeny:

Välj din favoritårstid här:


Välj din favoritårstid här:<br>
<select name="favoritarstid">
<option selected>-- välj här --</option>
<option>Vår</option>
<option>Sommar</option>
<option>Höst</option>
<option>Vinter</option>
</select>

Lista:

Ett formulärfält med egenskapen "select" har den egenskapen att du kan välja om ett eller flera alternativ ska kunna markeras genom att SHIFT eller CTRL hålls intryck när valen görs.

Envalslista

Välj en favoritårstid här:


Välj en favoritårstid här:<br>
<select name="favoritarstid" size="4">
<option>Vår</option>
<option>Försommar</option>
<option>Sommar</option>
<option>Sensommar</option>
<option>Höst</option>
<option>Vinter</option>
<option>Senvinter</option>
</select>

Ska flera val kunna göras med CTRL eller SHIFT intryckt när valen görs används attributet multiple.

Flervalslista

Välj flera favoritårstider här:


Välj en favoritårstid här:<br>
<select name="favoritarstid" size="4" multiple>
<option>Vår</option>
<option>Försommar</option>
<option>Sommar</option>
<option>Sensommar</option>
<option>Höst</option>
<option>Vinter</option>
<option>Senvinter</option>
</select>

Knappar - buttons:

För att skicka innehåll från ett formulär eller hämta innehåll till ett formulär används knappar med egenskaperna submit och reset.



<input type="submit" name="Skicka" value="Skicka mina uppgifter!">
<input type="reset" name="Rensa" value="Rensa formuläret ..">

 

Flera möjligheter med formulär

Det går att styra formulärfälten på flera sätt vad det gäller funktion och utseende. Du kan tex ha information som inte går att skriva över, bara läsas och kopieras.

Inaktiverat textfält:



<input type="text" name="info" value="Text som bara kan läsas och kopieras..." readonly>

Inaktiverat och nedtonat textfält:



<input type="text" name="info" value="Nedtonad text som bara kan läsas..." disabled>

 

Formatering av formulär med CSS

Med hjälp av CSS kan du anpassa dina formulärkontroller så de får det utseende du vill. Du kan även lägga koden i en egen CSS-mall istället för direkt i dokumentet - läs mer om formatering med CSS »

Bakgrundsfärg

Formatera ditt formulär med hjälp av stilmallar. I exemplet nedan är bakgrundsfärgen i formulärfälten formaterad med CSS. (Koden hittar du under formuläret). CSS-koden som placeras inom <HEAD> är en anpassad formatering som kan tillämpas på de flesta märken.

Namn:


<HEAD>
<style type="text/css">
<!--
.bakgrund { background-color: #ffff00;}
-->
</style>
</HEAD>


Formulärkoden som formaterar formulärfältet INPUT:

Namn:<br><input name="namn" type="text" class="bakgrund1">

 

Skriv meddelandet här:


<textarea name="meddelande" " rows="4" class="bakgrund"></textarea>

 



<input name="skicka" type="submit" class="bakgrund" value="Skicka mina uppgifter!">
<input name="rensa" type="reset" class="bakgrund" value="Rensa formuläret">

Färg på kantlinjer

I exemplet nedan är kantlinjefärgen i formulärfälten samt bredd och typ av linje formaterad med CSS.

Namn:


<HEAD>
<style type="text/css">
<!--
.kantlinje {border: 1px solid #cc6633;}
-->
</style>
</HEAD>

Koden som formaterar formulärfältet input:

Namn:<br><input name="namn" type="text" class="kantlinje">

 

Namn:


<HEAD>
<style type="text/css">
<!--
.kantlinje {border: 1px dotted #cc6633;}
-->
</style>
</HEAD>

 

Namn:


<HEAD>
<style type="text/css">
<!--
.kantlinje { border: 5px double #666633; }
-->
</style>
</HEAD>

 



<HEAD>
<style type="text/css">
<!--
.kantlinje { border: 5px outset #669966; background-color: #669966; }
-->
</style>
</HEAD>

 



<HEAD>
<style type="text/css">
<!--
.skicka_knapp { background-color: #CC9966}
-->
</style>
</HEAD>

 



<HEAD>
<style type="text/css">
<!--
.skicka_knapp {background-color: #ffff66; border: 2px solid #996633;}
-->
</style>
</HEAD>

 



<HEAD>
<style type="text/css">
<!--
.skicka_knapp {height: 50px; width: 150px}
-->
</style>
</HEAD>

 



<HEAD>
<style type="text/css">
<!--
.skicka_knapp {color: #0066cc}
-->
</style>
 </HEAD>

Transparent bakgrund

En transparent bakgrund i formulärfälet passar bra över bakgrundsbilder.

Skriv meddelandet här:

<HEAD>
<style type="text/css">
<!--
.skicka_knapp {background-color: transparent; border: border: 1px solid #0099cc;}
-->
</style>
</HEAD>

Bildknapp

Vill du använda en egen bild på knapp kan du lägga den under formulärfältet button. I exemplet är bilden 160x60 pixlar och placeras då i en "box" med de måtten.




<HEAD>
<style type="text/css">
<!--
.skicka_knapp { background-color:transparent; background-image: url(knapp_css_ex.gif); height: 60px; width: 160px; border: none; }
-->
</style>
</HEAD>

 

Formulär: skugga i formulärfält

Läs mer om Skuggor här »

Namn:

Epost:

Meddelande:


 

Namn:

Epost:

Meddelande:

Läs mer om Skuggor här  »

 

Hur skickas innehållet i formuläret?

De flesta formulär kommunicerar med en webserver med script och databaser och du måste då ha stöd för att köra script på din webserver. Vanliga scriptspråk är CGI, PHP och ASP och ett alternativ till att ha ett eget script på webservern är att utnyttja någon av de tjänster som tillhandahåller script som körs på deras servrar. Du hittar resurser om script och tjänster som tillhandahåller script i våra Weblänkar »

FormMail - CGI-script

Många formulär du använder på nätet drivs av CGI-scriptet FormMail - läs mer i guiden "FormMail" »

Med hjälp av FormMail kan du:

Om du vill använda CGI-script får du en bra introduktion i guiden "FormMail" »

Mailto: för att skicka till epostmottagare

Du kan använda funktionen "mailto:" som händelse (action) när formuläret skickas. Då skickas uppgifterna i formuläret som ett mail. Nackdelen är att det förutsätter att det finns ett konfigurerat emailprogram på den dator formuläret skickas ifrån vilket det ofta inte finns i offentliga miljöer som skolor, bibliotek, internet-cafeér mm.

Formuläret kopplat till epost:

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

Vill du att ett Ärende (subject) skall var ifyllt i meddelandet kan du lägga till subject:

Formuläret kopplat till epost med ärendemening:

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

Om du vill att formuläret skall skickas till ytterligare en mottagare kan du ange "kopia till" (carbon copy):

Formuläret med kopia till annan mottagare:

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

Meny med formulärkontroll

För att få en enkel meny där du använt formulärkontrollen "select" att fungera kan du använda ett javascript för att länkningen skall fungera. Det första exemplet nedan är en meny utan koppling till javascript som inte fungerar och det andra exemplet är kopplat till javascriptet som utför menyvalen.

Meny utan koppling till javascript:

Fungerar inte...
<FORM>
<select name="meny">
<option selected>välj här!</option>
<option value="../javascripts.htm">Javascripts</option>
<option value="../weblinks.htm">Weblänkar</option>
<option value="../start.htm">Startsidan</option>
</select>
</FORM>

Meny med koppling till javascript:

Fungerar...
<FORM>
<select name="meny" onChange="MM_jumpMenu('parent',this,1)">
<option selected>välj här!</option>
<option value="../javascripts.htm">Javascripts</option>
<option value="../weblinks.htm">Weblänkar</option>
<option value="../start.htm">startsidan</option>
</select>
</FORM>

OBS! Vill du att länkarna ska öppnas i en ram i frameset anger du ramens namn som mål för länken:

onChange="MM_jumpMenu('parent.frames[\'ditt_ramnamn\']',this,1)">

Javascriptet som gör menyalternativen klickbara:

<HEAD>
<script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</HEAD>

 

TIPS! Fler exempel på Dropdown-menyer » metoder att kontrollera formuläret » med Javascript.

Koden till hela formuläret längst upp på sidan:

<form name="exempelformular" action="#" method="post" >
Namn:<input type="text" name="Namn22" size="50"><br>
L&ouml;senord:<input type="password" name="losenord" value="">
<p>Skriv meddelandet h&auml;r:<br><textarea name="textarea" rows="4" cols="50"></textarea></p>
<p>Vilken eller vilka &auml;r din favorit&aring;rstid! V&auml;lj g&auml;rna flera!<br>
V&aring;r<input type="checkbox" name="favoritarstid" value="Var">
Sommar<input type="checkbox" name="favoritarstid" value="Sommar">
H&ouml;st<input type="checkbox" name="favoritarstid2" value="Host">
Vinter<input type="checkbox" name="favoritarstid" value="Vinter"></p>
<p>Vilken &auml;r din favorit&aring;rstid?<br>
V&aring;r<input type="radio" name="favoritarstid2" value="Var">
Sommar<input type="radio" name="favoritarstid2" value="Sommar">
H&ouml;st<input type="radio" name="favoritarstid2" value="Host">
Vinter<input type="radio" name="favoritarstid2" value="Vinter"></p>
<p>V&auml;lj favorit&aring;rstid h&auml;r:<br>
<select name="select">
<option selected>-- v&auml;lj h&auml;r --</option>
<option>V&aring;r</option>
<option>Sommar</option>
<option>H&ouml;st</option>
<option>Vinter</option>
</select></p>
<p>V&auml;lj favorit&aring;rstid h&auml;r
(CTRL-klicka f&ouml;r flerval):<br>
<select name="select2" size="4" multiple>
<option>V&aring;r</option>
<option>F&ouml;rsommar</option>
<option>Sommar</option>
<option>Sensommar</option>
<option>H&ouml;st</option>
<option>Vinter</option>
<option>Senvinter</option>
</select></p>
<p><input type="submit" name="skicka" value="Skicka mina uppgifter!">
<input type="reset" name="rensa" value="Rensa formul&auml;ret .."></p>
</form>