Hoppa till: navigering, sök

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