Logga in
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.
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.
Så här kan HTML-koden se ut:
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:
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:
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:
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":
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:
Koden till exemplet ovan. Notera att CSS-formateringen style="width: 85%;" används tillsammans med FIELDSET för att att ange bredden på "boxen":
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">
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.
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:
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:
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.
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).
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.
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.
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:
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
Följande attribut kan du använda i HTML5-dokument. Läs mer om HTML5 här »
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.
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.
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.
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:
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.
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.
Du kan använda attributet STEP för att ange ett intervall för vilka värden som kan anges.
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:
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.
Om du använder input type="file" så kan användaren välja en fil som ska skickas.
TIPS! Läs mer i guiden Uppladdning av fil - File upload hur du bifogar filer i formulär.
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.
OBS! Formulärkontrollen fungerar som ett vanligt textfält och ingen sökfunktion är kopplad till formuläret här.
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:
OBS! Formulärkontrollen fungerar som ett vanligt textfält och ingen sökfunktion är kopplad till formuläret här.
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.
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.
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).
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.
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.
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:
Klicka här för att se exemplet
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:
Hela koden till formulärexemplet:
Klicka här för att se exemplet
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:
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.
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.
Kryssrutor som ska vara förvalda kan anges med attributet CHECKED="CHECKED"
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:
I exemplet används en egen funktion till varje checkbox med namn som myFunction(), myFunction2(), myFunction3() osv.
Hela koden till formulärexemplet:
TIPS! Du kan lägga texten som ska visas i en DIV istället för <P>.
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.
Radioknapp som ska vara förvald kan anges med attributet CHECKED="CHECKED"
Formulärkontrollen SELECT kan användas som lista där ett eller flera val kan väljas eller som en 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).
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.
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.
Om du har fler val (option) än antalet rader (size) så kan listan bläddras:
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!
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.
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.
Exempel på knappar av typen SUBMIT och RESET:
Du kan ersätta SUBMIT-knappen med en egen bild genom att använda input type="image"
Exempel på knapp av typen IMAGE:
Med attributet width och height kan du ange bredd och höjd för bild som används som formulärkontroll. Se exemplet ovan.
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:
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:
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
Ä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:
För innehållet ska formateras som text med radbrytningar och mellanslag används ENCTYPE
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 ?)
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 ?):
Om du vill ha fler CC-mottagare anger du dem åtskiljda med kommatecken:
Prova själv! Skicka formuläret nedan med MAILTO-funktionen:
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:
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 är ett serverside scriptspråk kan bäddas in direkt i HTML-koden.
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 »
skriv ut »