HTML <input> etikett

Definition och användning

<input> Taggen definierar ett inmatningsfält där användaren kan mata in data.

<input> Element är de viktigaste formulärelementen.

<input> Element kan visas på flera sätt, beroende på type-attribut.

Här är olika inmatningstyper:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(standardvärde)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Se vidare type-attributFör att se exempel på varje inmatningstyp!

Exempel

HTML-formulär som innehåller tre inmatningsfält; två textfält och en submit-knapp:

<form action="/action_page.php">
  <label for="fname">Förnamn:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Efternamn:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Skicka">
</form>

Prova själv

Tips och kommentarer

Tips:Använd alltid <label>-taggen för att definiera etiketter för följande element:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Egenskap

Egenskap Värde Beskrivning
accept
  • File extension
  • audio/*
  • video/*
  • image/*
  • Media type

Bestämmer vilken typ av fil som skickas via filuppladdning.

Bestämmer vilka filtyper som användaren kan välja från filinmatningsdialogen (endast för type="file").
alt Text Bestämmer alternativtexten för bilden (endast för type="image").
autocomplete
  • on
  • off
 Bestämmer om <input>-elementet bör aktivera automatiskt slutför.
autofocus autofocus Bestämmer att <input>-elementet bör automatiskt fokuseras när sidan laddas.
checked checked Bestämmer att <input>-elementet bör vara förutvalt när sidan laddas (gäller för type="checkbox" eller type="radio").
dirname inputname.dir Bestämmer textriktningen som kommer att skickas.
disabled disabled Bestämmer att <input>-elementet bör vara inaktiverat.
form Formulär id Bestämmer formuläret som tillhör <input>-elementet.
formaction URL Bestämmer URL:en som används för att hantera filer från inmatningskontroller när formuläret skickas (gäller för type="submit" och type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Definierar hur formulärdatan ska kódas när den skickas till servern (gäller för type="submit" och type="image").
formmethod
  • get
  • post
 Definierar den HTTP-metod som används för att skicka data till action-URL (gäller för type="submit" och type="image").
formnovalidate formnovalidate Definierar att formuläremellen inte ska valideras vid skickande.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Fönsternamn 		Definierar var som svarsresponsen efter att ha skickat formuläret ska visas (gäller för type="submit" och type="image").
height Pixel Definierar höjden på <input>-elementet (endast tillämpligt för type="image").
list datalist_id Citerar en <datalist>-element som innehåller fördefinierade alternativ för <input>-elementet.
max
  • nummer
  • Datum
 Definierar det maximala värdet för <input>-elementet.
maxlength nummer Definierar det maximala antalet tecken som <input>-elementet tillåter.
min
  • nummer
  • Datum
 Definierar det minsta värdet för <input>-elementet.
minlength nummer Definierar det minsta antalet tecken som krävs i <input>-elementet.
multiple multiple Definierar att användaren kan mata in flera värden i <input>-elementet.
name Text Definierar namnet på <input>-elementet.
pattern Reguljärt uttryck Definierar den reguljära uttrycket för att kontrollera värdet för <input>-elementet.
placeholder Text Definierar en kort påminnelse om den förväntade värdet för <input>-elementet.
popovertarget Elementets id Definierar vilken popup-element som ska anropas (endast tillämpligt för type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Definierar vad som händer när du klickar på knappen (endast tillämpligt för type="button").
readonly readonly Definierar att inmatningsfältet är skrivskyddat.
required required Definierar att inmatningsfältet måste fyllas i innan formuläret skickas.
size nummer Definierar bredden på <input>-elementet (i tecken).
src URL URL för bilden som används som submit-knapp (endast tillämpligt för type="image").
step
  • nummer
  • any
 Bestämmer avståndet mellan giltiga tal i inputfältet.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Bestämmer vilken typ av <input>-element som ska visas.
value Text Bestämmer värdet för <input>-elementet.
width Pixel Bestämmer bredden på <input>-elementet (endast för type="image").

Globala egenskaper

<input> Etiketter stöder också Globala egenskaper i HTML.

Evennsegenskaper

<input> Etiketter stöder också Evennsegenskaper i HTML.

Standard CSS-inställningar

Ingen.

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd

Relaterade sidor

HTML-tillämpning:

HTML DOM-referenshandbok: