Input

Denna tag används för att skapa diverse gränssnitt-komponenter i ett formulär. Taggen kan användas till att skapa en mängd olika komponenter.

Se formulär för mer info och exempel.

Tillgängliga attribut

De globala attributen är tillgängliga för denna tagg.

`accept`

Används för att begränsa vilka typer av filer som ska kunna laddas upp om detta är ett file-fält. Som parameter sätts en sträng med kommaseparerat innehåll. Följande värden kan förekomma i strängen:

En punkt följt av en filändelse, t.ex. ".jpg, .png".
En MIME-typ, några exempel:
- audio/* för olika typer av ljudfiler.
- video/* för olika typer av videofiler.
- image/* för olika typer av grafikfiler.

`autocomplete`

Anger om formulär-elementet ska fyllas i automatiskt med det värde som användaren tidigare angett i likvärdig element. Möjliga värden är:

off: Inga tidigare värden fylls i.
on: Om användaren använt detta formulär förut, kommer eventuella värden ifrån tidigare omgångar visas som föreslagna förval.

`autofocus`

Specificerar att fältet ska ha fokus när sidan laddas. Enbart ett HTML-element per dokument kan ha denna tagg.

`autosave`

Det användaren skriver in i ett sökfält sparas undan som sökhistorik. Med detta attribut kan man ange namnet på en kategori i sökhistoriken för att på så vis gruppera samman liknande sökningar.

`checked`

Anger att ett fält av typen checkbox eller radio är ikryssad.

`disabled`

Indikerar att fält inte ska vara aktivt och användbart. Fält som är markerade som disabled skickar inte med sina värden till servern.

`formaction`

Sätts till en URL som ska behandla data ifrån fältet. Om denna är satt kommer denna URL att gälla istället för den som är definierad för formuläret.

`formenctype`

Om fältet är en form av submit-knapp avgör detta attribut hur formulärets innehåll ska skickas till servern. Möjliga värden är:

application/x-www-form-urlencoded: Detta är förvalet om inget annat anges.
multipart/form-data: Använd detta om du har en input-tagg som har type satt till file.
text/plain

Om detta attribut är satt kommer dess värde att gälla istället för formulärets värde.

`formmethod`

Om fältet är en form av submit-knapp avgör detta attribut vilken HTTP-method som webbläsaren ska använda för att skicka in formulärdatan. Se formulär för mer information om hur dessa parametrar fungerar. Möjliga värden är:

post: All formulärdata inkluderas i HTTP-meddelandet.
get: All formulärdata läggs till i slutet av URI:n.

`formnovalidate`

Om fältet är en form av submit-knapp sätter detta attribut att formuläret inte ska valideras innan det skickas in. Om attributet är angivet kommer det att gälla istället för eventuellt novalidate-attribut i formuläret.

`formtarget`

Om fältet är en form av submit-knapp anger detta attribut var resultatdatat ska visas. Sätt antingen till ett av de speciella värdena eller namnet på en browsing context. Se browsing context för mer information.

`height`

Om fältet är av typen image, anger detta höjden i CSS-pixlar.

`inputmode`

Föreslår vilken typ av tangentbord som webbläsaren ska visa. Möjliga värden är:

verbatim: Ett vanligt alfanumeriskt tangentbord, avsett för att skriva in namn, lösenord och liknande.
latin: Ett vanligt alfanumeriskt tangentbord, avsett för att skriva in text i sökboxar och liknande.
latin-name: Som latin fast avsett för namn.
latin-prose: Som latin fast avsett för IM och liknande.
latin-width-latin: Som latin fast avsett för andra språk än användarens förvalda språk.
kana: För japanska.
katakana: För japanska.
numeric: För att skriva in olika nummer och tal.
tel: För att skriva in telefonnummer.
email: För att skriva in mejladresser.
url: För att skriva in URLer.

`list`

Pekar på en lista med möjliga förval, måste sättas till den id på datalist som innehåller förvalen.

`max`

Det högsta möjliga talet som kan skrivas in, måste vara högre än min.

`max-length`

Anger det högsta antalet tecken användaren kan skriva in.

`min`

Anger det lägsta talet som användaren kan skriva in. Måste vara lägre än max

`min-length`

Anger det lägsta antalet tecken användaren kan skriva in i fältet.

`multiple`

Anger om användaren kan skriv in mer än ett värde.

`pattern`

Ett reguljärt uttryck som fältet kontrolleras mot. Används för att kontrollera att rätt saker har skrivits in i fältet.

`placeholder`

Används för att ge användaren en ledtråd om vad som ska skrivas in i fältet.

`readonly`

Sätts på fält som användaren inte ska kunna redigera.

`required`

Sätt på de fält som användaren måste fylla i innan formuläret kan skickas in.

`selectionDirection`

Anger i vilken riktning ett urval görs. Kan vara:

forward
backward
unknown: Om det är okänt

`size`

Om type är någon av textfält-typerna, anger detta hur många tecken brett fältet ska vara.

`spellcheck`

Anger om fältet ska stavningskontrolleras eller ej.

`src`

Om fältet är av typen image används detta attribut för att ange en URL till bilden.

`step`

Anger i hur stora steg fältförändringar ska ske.

`tabindex`

Anger i vilken ordning fälten ska komma när man tabbar sig mellan dem.

`name`

Namnet på elementet, används när datan skickas in till servern.

`type`

Anger vilken typ av komponent detta är. Kan sättas till följande värden:

button: En knapp.
checkbox: En kryssruta. Man måste ange value-attributet också. Den sätts till checked om rutan är ikryssad.
color: Ett sätt att välja färger. I det enklaste utförande kanske man bara kan skriva in ett färgnamn. I andra fall kanske en palettväljare visas upp.
data: Skapar ett fält som är till för att skriva in ett datum.
datetime: Skapar ett fält som är till för att skriva in ett datum och en tid.
datetime-local: Skapar ett fält som är till för att skriva in ett datum och en tid utan att behöva ange en tidszon.
email: Skapar ett fält som är till för att skriva in en mejladress.
file: Skapar ett fält som tillåter uppladdning av filer. Man kan lägg till ett accept-attribut för att sätta vilka typer av filer som ska få laddas upp.
hidden: Skapar ett dold fält, som aldrig visas, men vars värde skickas med till servern.
image: Visar upp den angivna grafikfilen och använder den som en knapp.
month: Används för att ange en månad.
number: Används för att ange ett flyttal.
password: Används för att skriva in ett lösenord.
radio: En radioknapp.
range: Används för att ange ett tal vars värde inte behöver vara alltför exakt.
reset: En knapp som nollställer formuläret till de värden de hade när dokumentet laddades in.
search: Används för att ange söksträngar.
submit: En knapp som används för att skicka in formulärdatan till en server.
tel: Ett fält avsett för telefonnummer.
text: Ett enraders textfält.
url: Ett textfält avsett för URLer.
week: Ett fält avsett för att ange ett veckonummer.

`value`

Det förvalda värde som fältet ska ha vid uppstart.

`width`

Om fältet är av typen image anger detta attribut bredden i CSS-pixlar.

Exempel

See the Pen OVZRLX by Patrik Grip-Jansson (@PGJ) on CodePen.

Här skapas ett minimalt textfält. Se formulär för fler exempel.

Referenser

Taggens definition i WHATWGs levande HTML-standard

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#the-input-element

Taggens definition i HTML5-standarden

http://www.w3.org/TR/html5/forms.html#the-input-element