15 besökare, 1 medlem och 2 Studenter ä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 TEXT 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:

 

Så här kan HTML-koden se ut:

<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.

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: 85%x;" används tillsammans med FIELDSET för att att ange bredden på "boxen":

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

<fieldset style="width: 85%;">
<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="40" rows="5"></textarea> <br>
<label for="skicka"></label>
<input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />

</fieldset>

</form>

Gruppera med flera FIELDSET

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: 85%;" används tillsammans med FIELDSET för att att ange bredden på "boxen":

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

<fieldset style="width: 85%;">
<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="40" rows="5"></textarea>
</fieldset>

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

</form>

 

Formulärkontroller och attribut

Formulärkontroller

Här är exempel på de olika formulärkontroller, INPUT, du kan använda.

Klicka på namnet för att gå direkt till avsnittet med kontrollen:

<input type="text">
<input type="button">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">

Följande formulärkontroller kan du använda i HTML5-dokument. Läs mer om HTML5 här »

<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="month">
<input type="number">
<input type="range">
<input type="search">
<input type="tel">
<input type="time">
<input type="url">
<input type="week">
<input type="required">

Attribut

maxlength
size
value
readonly
disabled
password
autocomplete
MIN och MAX
Step

 

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.

TEXT - 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" />

MAXLENGTH - fä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" />

SIZE - fä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" />

VALUE - fä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" />

READONLY - Inaktiverat fä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 />

DISABLED - Inaktiverat fä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 />

PASSWORD - lösenordsfält

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" />

Visa lösenordet

Om du vill låta användaren visa sitt lösenord i klartext för att undvika att teckenfel anges kan du använda ett Javascript.

Visa lösenordet

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

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

<input type="checkbox" onclick="ShowPassword()">Visa lösenordet

<!-- Javascript som visar lösenordet -->
<script>
function ShowPassword() {
var x = document.getElementById("login_password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>

 

 

 

HTML5 attribut

Följande attribut kan du använda i HTML5-dokument. Läs mer om HTML5 här »

Autocomplete

Med autocomplete kan du ange om webbläsaren ska hämta information baserad på vad användaren skrivit tidigare i ett formulärfält. Du kan ange att det ska gälla hela hela formuläret <FORM> och därefter koppla bort det i vissa fält.

Attributet autocomplete fungerar med <input> av typerna: text, search, url, tel, email, password, datepickers, range, och color.

I exemplet nedan gäller autocomplete för hela formuläret men är bortkopplat för "E-postadress". Prova att skicka formuläret och gå tillbaka och fyll i fälten igen. Då ska förslag på innehåll visas när du skriver de första bokstäverna.







 

<form id="form" name="form" method="post" action="" autocomplete="on">
<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" autocomplete="off" /><br>
<input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />
</form>

Input type COLOR - välj färg

Du kan visa en färgväljare med attributet <input type="color">

Vilken färgväljare som visas kan variera beroende på vilken webbläsare som används.


 

<label for="farg"><br>
Välj färg här:</label><br>


<input type="color" name="favcolor" value="#ff0000">

Input type DATE - välj datum

Om ett datum ska väljas kan du använda attributet <input type="date"> som delar upp formulärfältet i ÅR/MÅNAD/DAG

Vilken kalender som visas kan variera beroende på vilken webbläsare som används.


 

<label for="datum"><br>
Välj datum här:</label><br>

<input type="date" name="bokningsdatum">

Attributen MIN och MAX

Du kan ange attributen MIN och MAX för att begränsa tidsperioden som kan väljas.

Testa formuläret nedan och försök att skriva eller välja datum utanför det angivna tidsintervallet:

Ange ett datum före 2010-01-01:

Ange ett datum efter 2010-01-01:

 

Ange ett datum före 2010-01-01:<br>
<input type="date" name="bokningsdatum" max="2009-12-31"><br>
Ange ett datum efter 2010-01-01:<br>
<input type="date" name="bokningsdatum" min="2010-01-02">

Input type MONTH - välj månad och år

Om en månad ska väljas kan du använda attributet <input type="month"> som delar upp formulärfältet i MÅNAD/ÅR

OBS! Funktionen stöds inte av alla webläsare ännu.


 

<label for="manad"> Välj månad här:</label><br>
<input type="month" name="manad">

Input type NUMBER - för numeriska värden

Om du använder input type="number" så kan användaren bara ange siffror som värde. Du kan ange värden för MIN och MAX för att begränsa värden som kan anges.


 

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

<label for="dagsform">Ange ett betyg (mellan 1 till 10):</label><br>
<input type="number" name="dagsform" min="1" max="10">
<input type="submit" name="skicka" id="skicka" value="Skicka">

</form>

Attributet STEP

Du kan använda attributet STEP för att ange ett intervall för vilka värden som kan anges.


 

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

<label for="bidrag">Vilken summa vill du skänka?</label><br>
<input type="number" name="bidrag" step="50" value="500">
<input type="submit" name="skicka" id="skicka" value="Skicka">

</form>

Input type EMAIL - för e-postadresser

Om du använder input type="email" så sker en validering av att en e-postadress angivits i fältet.

Prova att ange en felaktig e-postadress i fältet nedan:


 

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

<label for="e-postadress">e-postadress:</label><br>
<input type="email" name="email">
<input type="submit" name="skicka" id="skicka" value="Skicka">

</form>

OBS! Detta är ingen fullständig validering av att e-postadressen är giltig. Kontrollen sker av att adressen innehåller tecknet @ och att inga blanksteg förekommer.

Läs mer i avsnittet Validering av ifyllda fält för enkel validering av formulärfält.

Läs mer i avsnittet Validering av e-postadresser med PREG_MATCH för avancerad validering av e-postadresser.

Input type FILE - välj fil

Om du använder input type="file" så kan användaren välja en fil som ska skickas.


 

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

<label for="selected_file">Välj fil här:</label><br>
<input type="file" name="selected_file">
<input type="submit" name="skicka" id="skicka" value="Skicka">

</form>

TIPS! Läs mer i guiden Uppladdning av fil - File upload hur du bifogar filer i formulär.

SEARCH - sökfält

Om du använder input type="googlesearch" så visas ett kryss till höger som kan användas för att radera sökvärdet och skriva ett nytt.


 

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

<label for="sokning">Sök i webbplatsen:</label><br>
<input type="search" name="sokning">
<input type="submit" name="skicka" id="skicka" value="Skicka">

</form>

OBS! Formulärkontrollen fungerar som ett vanligt textfält och ingen sökfunktion är kopplad till formuläret här.

REQUIRED - fält som måste fyllas i

Om du vill ange obligatoriska fält som måste fyllas i så kan du använda attributet REQUIRED som visar ett meddelande om information saknas i ett fält. Den text som visas beror på vilken webbläsare som används.

Attributet "required" fungerar tillsammans med kontrollerna: text, search, url, tel, email, password, date pickers, number, checkbox, radio, och file.

Prova att skicka formuläret nedan utan att fylla i namnet:



 

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

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

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

</form>

OBS! Formulärkontrollen fungerar som ett vanligt textfält och ingen sökfunktion är kopplad till formuläret här.

 

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>

 

AUTOFOCUS - Textmarkören i fält när sidan visas

Om du vill att textmarkören ska placeras i ett fält när sidan laddas in kan du använda AUTOFOCUS - se exempel här »

Så här kan koden se ut:

<form id="form" name="form" method="post" action="">
<label for="fnamn">Förnamn:</label><br>
<input type="text" name="fnamn" id="fnamn" autofocus /><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" /></form>

Klicka här för att se exemplet

 

Autofocus med Javascript

Exemplet ovan fungerar i HTML5 men om du vill vara säker på att det ska fungera även i äldre webbläsare kan du använda Javascript.

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

 

Kontrollera om Caps Lock är aktiv

Du kan kontrollera om användaren har tangenten Caps Lock aktiverad och varna för detta. Det här är en bra kontroll om du använder PASSWORD - lösenordsfält enligt ovan.

Prova att skriva ditt namn med Caps Lock aktiverad.

Varning! Du har Caps lock aktiverad.

 

Hela koden till formulärexemplet:

<!-- Döljer varningstexten i utgångsläget -->
<style>
#capslockvarning {display:none;color:red}
</style>

<!-- Formulärfält med samma ID som i Javascriptet -->
<p><label for="namntest">Namn:</label>
<input type="text" name="namntest" id="namntest" /></p>

<!-- Varningstext om Caps Lock är aktiverad -->
<p id="capslockvarning">Varning! Du har Caps lock aktiverad.</p>

<!-- Javascript till Caps Lock varning -->
<script>
var input = document.getElementById("namntest");
var text = document.getElementById("capslockvarning");
input.addEventListener("keyup", function(event) {if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
</script>

 

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.

CHECKBOX - kryssrutor

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>

Förvalda kryssrutor

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>

Visa text när ett alternativ väljs

Vill du ha visa en text när någon av kryssrutorna väljs kan du göra det med Javascript. Prova att välja alternativ nedan:

FAVORITÅRSTID


I exemplet används en egen funktion till varje checkbox med namn som myFunction(), myFunction2(), myFunction3() osv.

Hela koden till formulärexemplet:

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

<input type="checkbox" name="var" id="var_vald" value="var" onclick="myFunction()"/>
<label for="var">Vår</label>
<p id="var_visa_text" style="display:none">Äntligen är den mörka årstiden över!</p>
<br>

<input type="checkbox" name="sommar" id="sommar_vald" value="sommar" onclick="myFunction2()"/>
<label for="sommar">Sommar</label>
<p id="sommar_visa_text" style="display:none">Mmm... sommaren är inte kort om du tar vara på varje dag!</p>
<br>

<input type="checkbox" name="host" id="host_vald" value="host" onclick="myFunction3()"/>
<label for="host">Höst</label>
<p id="host_visa_text" style="display:none">Nu är luften klar och frisk och ett lugn lägger sig över dig som verkligen vill njuta av promenader och en varm kopp te!</p>
<br>

<input type="checkbox" name="vinter" id="vinter_vald" value="vinter" onclick="myFunction4()"/>
<label for="vinter">Vinter</label>
<p id="vinter_visa_text" style="display:none">Snö?! Oavsett om du gillar det eller inte så är det bara att gilla läget.</p>
</fieldset>

<!-- Javascript som visar och döljer texten -->
<script>

<!-- Funktion som används till checkbox 1 -->
function myFunction() {
var checkBox = document.getElementById("var_vald");
var text = document.getElementById("var_visa_text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}

<!-- Funktion som används till checkbox 2 -->
function myFunction2() {
var checkBox2 = document.getElementById("sommar_vald");
var text2 = document.getElementById("sommar_visa_text");
if (checkBox2.checked == true){
text2.style.display = "block";
} else {
text2.style.display = "none";
}
}

<!-- Funktion som används till checkbox 3 -->
function myFunction3() {
var checkBox3 = document.getElementById("host_vald");
var text3 = document.getElementById("host_visa_text");
if (checkBox3.checked == true){
text3.style.display = "block";
} else {
text3.style.display = "none";
}
}

<!-- Funktion som används till checkbox 4 -->
function myFunction4() {
var checkBox4 = document.getElementById("vinter_vald");
var text4 = document.getElementById("vinter_visa_text");
if (checkBox4.checked == true){
text4.style.display = "block";
} else {
text4.style.display = "none";
}
}

</script>

TIPS! Du kan lägga texten som ska visas i en DIV istället för <P>.

 

RADIO - 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>

 

Listor, dropdownlista och flervalslista

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

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>

 

HTML5 Dropdownlista

I HTML5 kan du använda attributet LIST för att referera till elementet <datalist> som innehåller fördefinerade val i listan. Jämför detta exempel med SELECT ovan så ser du skillnaden i formulärkontrollen.

FAVORITÅRSTID

 

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


<input list="arstid">

<datalist id="arstid">
<option value="Vår">
<option value="Sommar">
<option value="Höst">
<option value="Vinter">
</datalist>

</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 SUBMIT och RESET

Knappar finns av typen SUBMIT, RESET och BUTTON:

<input type="submit">  Skickar innehållet i ett formulär
<input type="reset">  Återställer innehållet i ett formulär
<input type="button">  Klickbar knapp som används i tex Javascript

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 åtgärder 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.

SUBMIT och RESET

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" />

 

IMAGE - bild som knapp

Du kan ersätta SUBMIT-knappen med en egen bild genom att använda input type="image"

Exempel på knapp av typen IMAGE:

<input type="image" name="submit" id="submit" src="submit_knapp.gif" width="auto" height="50"/>

WIDTH och HEIGHT

Med attributet width och height kan du ange bredd och höjd för bild som används som formulärkontroll. Se exemplet ovan.

 

 

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>

 

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 två av alternativen du kan använda; MAILTO och PHP

 

MAILTO för att skicka formulärets innehåll

Ä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">

Om du vill ha fler CC-mottagare anger du dem å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 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):

 

PHP för att skicka formulärets innehåll

PHP är ett serverside scriptspråk kan bäddas in direkt i HTML-koden.

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

Läs mer i PHP-guiden Formmail - skicka formulär till e-post » 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 »