Snabbreferens för HTML-formulär

De flesta attributen i tabellen nedanför är användbara till åtskilliga andra element än de de i tabellen är kopplade till. Vilka som fungerar till vad är ibland självklart, ibland kanske inte. Om du tvekar: pröva (eller gör en webbsökning).

Tabellen nedanför är inte nödvändigtvis 100% aktuell eller komplett. Om du vill gå till källan finns den officiella specifikationen hos W3C. Vill du se den absolut nyaste versionen (inte W3C recommendation ännu), Kan du läsa hos WHATWG. Ibland är WHATWG-texterna lite mer lättlästa, med många exempel.

Referenstabell för HTML-formulär
Element		Attribut
Element		Attribut
<form>	Definierar formuläret, kontrollerna placeras mellan `<form>` och `</form>`	`action`	Anger vad formuläret ska göra, utformat som en URL
		`method`	Anger hur formuläret ska skickas (http-metod). Två olika metoder används normalt för HTML-formulär: `get` och `post`.
		`name`	Formulärets namn, framför allt för att förenkla för scriptfunktioner.
		`enctype`	Hur data från formuläret ska kodas. Möjliga värden är `application/x-www-form-urlencoded`, `multipart/form-data` eller `text/plain`. Vilken som ska väljas beror, liksom vid `method` på var formuläret ska skickas och vad som ska hända med det.
		`autocomplete`	Avgör om `autocomplete` ska vara på eller av för formuläret. Autocomplete kan även styras i specifika formulärkontroller. Du kan alltså använda i hela formuläret utom en kontroll, om du vill.
		`accept-charset`	En möjlighet att bestämma vilka tecken användare tillåts mata in
		`novalidate`	Formuläret kommer inte kontrolleras för felaktigheter innan det skickas in. Attributet har inga värden.
<label>	En text som förklarar en formulärkontroll. `<label>` kan användas på lite olika sätt, antingen kan den kopplas till en viss formulärkontroll med attributet `for` och attributet `id` i t.ex ett `<input>`-element.	`for`	Värdet till `for` är samma som till `id` i det element som ska etiketteras.
<input>	De flesta formulärkontroller i ditt formulär.	`type="hidden"`	En formulärkontroll som inte visas för användaren, för data som behövs för en viss funktion, men inte ska kunna ändras av användaren. Kolla gärna sökfunktionen här ovan, den har flera kontroller som är dolda för användaren
		`type="text"`	Kortare textinput
		`type="search"`	Som `"text"`, men speciellt för sökfält.
		`type="tel"`	För att fylla i telefonnummer.
		`type="url"`	För att skriva in URL:ar
		`type="email"`	För att skriva in epostadresser
		`type="password"`	För att skriva in lösenord. Döljer texten.
		`type="date"`	För datum.
		`type="month"`	För månad och år.
		`type="week"`	Veckonummer
		`type="time"`	Tid, klockslag
		`type="datetime-local"`	Datum och tid, inte korrigerat efter tidszoner
		`type="number"`	Ett siffervärde
		`type="range"`	Ett ungefärligt värde på en skala.
		`type="color"`	En färgväljare.
		`type="checkbox"`	En kryssruta, flera kan kryssas i
		`type="radio"`	Radioknapp, bara en kan vara intryckt
		`type="file"`	För att skicka in filer.
		`type="submit"`	Skickar in formuläret
		`type="image"`	En klickbar bild i ett formulär. Antingen är det en knapp i form av en bild, eller en bild där knappen är en del av bilden (bild: Icon made by Freepik from www.flaticon.com)
		`type="reset"`	Återställer formuläret.
		`type="button"`	En knapp i största allmänhet, kan användas till olika saker
		`maxlength`	Begränsar hur långt användaren kan skriva.
		`minlength`	Begränsar hur kort användaren kan skriva.
		`size`	Värdet till size är fältets bredd i antal tecken.
		`readonly`	Readonly kan användas för att förhindra att användaren ändrar innehållet i kontrollen.
		`required`	Required markerar att en kontroll måste vara ifylld av användaren för att formuläret ska vara giltigt.
		`multiple`	Anger om användaren ska tillåtas mata in mer än ett värde.
		`pattern`	Kan användas för att på ett detaljerat vis villkora vad som får matas in med hjälp av Reguljära uttryck, RegExp. I detta fall är det frågan om JavaScript/Ecmascript-RegExp. Det finns ju lite olika varianter
		`max`	Används för att definiera ett maxvärde för det som är möjligt att mata in.
		`min`	Definierar ett minimivärde för det som får matas in.
		`step`	Anger hur stora steg som till exempel en `<input type="range">` ska använda. Hur noggrann inställningen ska vara med andra ord.
		`list`	Kan användas tillsammans med elementet `<datalist>` för att kunna skapa urvalslistor till `<input>`-kontroller. värdet till `list` är `<datalist>`s `id`
		`placeholder`	Anger en text som visas i kontrollen tills dess användaren matar inn något, det är t.ex vanligt att ordet "sök" står i en sökruta innan man börjar skriva i den.
<button>	Ett annat sätt att skriva knappar, detta kan användas även utanför formulär, för att utlösa olika händelser, vanligtvis skriptfunktioner	`type="submit"`	Se ovan
		`type="reset"`	Se ovan
		`type="button"`	Se ovan
		`autofocus`	Anger att elementet ska vara i fokus när sidan laddar, alltså (bland annat) att det kommer att utlösas när användaren trycker på enter
		`disabled`	Anger att kontrollen är avaktiverad
		`form`	En möjlighet att koppla elementet till ett formulär, även om det är placerat utanför detta i HTML-koden.
		`formaction`	Motsvarar `action` i ett `<form>`-element
		`formenctype`	Motsvarar `enctype` i ett `<form>`-element
		`formmethod`	Motsvarar `method` i ett `<form>`-element
		`formnovalidate`	Motsvarar `novalidate` i ett `<form>`-element
		`formtarget`	används som `target` i länkar, för att bestämma om resultatet från formuläret ska öppnas i en ny flik, nytt fönster, eller samma flik.
<select>	En urvalslista, de olika alternativen anges med elementet `<option>`
<datalist>	Elementet används på samma sätt som `<select>` med `<option>`. Det gör dock inte en egen kontroll, men kan via sitt `id` kopplas till någon annan kontroll med hjälp av dess `list`-attribut
<optgroup>	I långa `<select>` eller `<datalist>` kan optgroup användas för att gruppera flera `<option>`.	`label`	Det viktigaste attributet i detta sammanhang, används för att namnge gruppen.
<option>	Se `<select>` eller `<datalist>`	`value`	Anger ordningen som de olika alternativen visas i. Värdet är en siffra.
<textarea>	En yta att skriva längre texter i, kan varieras på många sätt.	`cols`	Anger radlängden i den skrivna texten, angett som antal tecken.
		`dirname`	Anger i vilken riktning texten skrivs, från vänster till höger (ltr) eller från höger till vänster (rtl). ltr är standard.
		`rows`	Antal rader som ska visas i textfältet.
		`wrap`	Anger om radbrytningar i den inmatade texten ska vara hårda (hard) eller mjuka (soft).
<output>	Ger en möjlighet att visa upp ett resultat från ett formulär på sidan. det kan till exempel utföra enkla beräkningar, som att lägga ihop värden från input i olika kontroller.	`for`	Används för att ange vilka kontrollers värden som ska behandlas för output.
<progress>	Anger en visuell mätare (progress bar) för en process. Används oftast tillsammans med JavaScript. 25%	`value`	Mätarens aktuella tillstånd
<progress>		`max`	Mätarens maxvärde
<meter>	En lite annorlunda mätare än `<progress>`. Syftet är att visa tillstånd snarare än process. minimivärde bör anges. Kompletteras med fördel med JavaScript, liksom `<progress>` 12cm
<fieldset>	Används för att gruppera kontroller i ett formulär.	`name`	för att ge ett individuellt namn till elemenet.
<legend>	ger en rubrik i ett `<fieldset>`