HTML Input 属性

value 属性

value 属性规定输入字段的初始值：

Exempel

<form action="">
 Förnamn:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Efternamn:<br>
<input type="text" name="lastname">
</form>

Prova själv

readonly 属性

readonly 属性规定输入字段为只读（不能修改）：

Exempel

<form action="">
 Förnamn:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Efternamn:<br>
<input type="text" name="lastname">
</form>

Prova själv

readonly 属性不需要值。它等同于 readonly="readonly"。

disabled 属性

disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

Exempel

<form action="">
 Förnamn:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Efternamn:<br>
<input type="text" name="lastname">
</form>

Prova själv

disabled 属性不需要值。它等同于 disabled="disabled"。

size 属性

size 属性规定输入字段的尺寸（以字符计）：

Exempel

<form action="">
 Förnamn:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Efternamn:<br>
<input type="text" name="lastname">
</form>

Prova själv

maxlength 属性

maxlength 属性规定输入字段允许的最大长度：

Exempel

<form action="">
 Förnamn:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Efternamn:<br>
<input type="text" name="lastname">
</form>

Prova själv

Om du ställer in maxlength-attributet accepterar inmatningskontrollen inte fler tecken än det tillåtna antalet.

Detta attribut ger ingen feedback. Om du behöver påminna användaren måste du skriva JavaScript-kod.

Kommentar:Inmatningsbegränsningar är inte alltid tillförlitliga. JavaScript erbjuder många sätt att förhindra ogiltiga inmatningar. För att säkert begränsa inmatningar måste mottagaren (servern) kontrollera begränsningarna både på server- och klient-sidan.

HTML5-attribut

HTML5 har lagt till följande egenskaper för <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • höjd och bredd
  • list
  • min och max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

och lägg till följande egenskaper för <form>:

  • autocomplete
  • novalidate

autocomplete-attribut

autocomplete-attributet specificerar om formulär eller inmatningsfält ska automatiskt fyllas i.

När automatisk completion är aktiverad, fyller webbläsaren automatiskt i värden baserat på användarens tidigare inmatningar.

Tips:Du kan ställa in formulärets autocomplete till på, samtidigt som du ställer in specifika inmatningsfält till av, och vice versa.

autocomplete-attributet gäller för <form> och följande <input>-typer: text, sök, url, tel, e-post, lösenord, datumväljare, range och färg.

Exempel

Automatisk completion aktiverad HTML-formulär (vissa inmatningsfält är avstängda):

<form action="action_page.php" autocomplete="on">
   Förnamn:<input type="text" name="fname"><br>
   Efternamn: <input type="text" name="lname"><br>
   E-post: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Prova själv

Tips:I vissa webbläsare kanske du behöver aktivera automatiskt slutförande manuellt.

novalidate egenskapen

novalidate egenskapen tillhör <form>-egenskapen.

Om satt, bestämmer novalidate att formulärdatan inte ska valideras vid skickande av formuläret.

Exempel

Indikerar att formuläret inte ska valideras när det skickas:

<form action="action_page.php" novalidate>
   E-post: <input type="email" name="user_email">
   <input type="submit">
</form>

Prova själv

autofocus egenskapen

autofocus egenskapen är en boolesk egenskap.

Om satt, bestämmer det att <input>-elementet automatiskt får fokus när sidan laddas.

Exempel

Låt "Första namnet"-inmatningsfältet automatiskt få fokus när sidan laddas:

Första namnet:<input type="text" name="fname" autofocus>

Prova själv

form egenskapen

form egenskapen bestämmer ett eller flera formulär som tillhör <input>-elementet.

Tips:Om flera formulär ska hänvisas till, använd en blankstegsseparerad lista över formulär-id:er.

Exempel

Inmatningsfältet ligger utanför HTML-formen (men tillhör formlen):

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

Prova själv

formaction egenskapen

formaction egenskapen bestämmer URL:en för den fil som behandlas när formuläret skickas.

formaction egenskapen täcker <form>-elementets action egenskap.

formaction egenskapen gäller för type="submit" och type="image".

Exempel

En HTML-form med två submit-knappar och olika åtgärder:

<form action="action_page.php">
   Förnamn: <input type="text" name="fname"><br>
   Efternamn: <input type="text" name="lname"><br>
   <input type="submit" value="Skicka"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Som admin skicka"
</form>

Prova själv

formenctype egenskapen

formenctype egenskapen bestämmer hur formulardata (form-data) kódas när den skickas till servern (endast för formulär med method="post").

formenctype egenskapen täcker <form>-elementets enctype egenskap.

formenctype-attributet gäller för type="submit" samt type="image".

Exempel

Skicka formulärdata med standardkodning samt kodning för "multipart/form-data" (den andra skickningsknappen):

<form action="demo_post_enctype.asp" method="post">
   Förnamn: <input type="text" name="fname"><br>
   <input type="submit" value="Skicka">
   <input type="submit" formenctype="multipart/form-data">
   value="Skicka som Multipart/form-data">
</form>

Prova själv

formmethod-attributet

formmethod-attributet definierar den HTTP-metod som används för att skicka formulärdata (form-data) till action-URL:n.

formmethod-attributet överskriver <form>-elementets method-attribut.

formmethod-attributet gäller för type="submit" samt type="image".

Exempel

Den andra skickningsknappen överskriver formulärets HTTP-metod:

<form action="action_page.php" method="get">
   Förnamn: <input type="text" name="fname"><br>
   Efternamn: <input type="text" name="lname"><br>
   <input type="submit" value="Skicka">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Skicka med POST">
</form>

Prova själv

formnovalidate-attributet

novalidate-attributet är ett booleskt attribut.

Om det är inställt, specificerar det att <input>-elementen inte ska valideras vid formulärskick.

formnovalidate-attributet överskriver <form>-elementets novalidate-attribut.

formnovalidate-attributet kan användas för type="submit"。

Exempel

En formulär med två skickningsknappar (validering och utan validering):

<form action="action_page.php">
   E-post: <input type="email" name="userid"><br>
   <input type="submit" value="Skicka"><br>
   <input type="submit" formnovalidate value="Skicka utan validering">
</form>

Prova själv

formtarget-attributet

formtarget-attributet definierar namnet eller nyckelordet som anger var den mottagna responsen ska visas efter att formuläret har skickats.

formtarget-attributet kommer att överskriva <form>-elementets target-attribut.

formtarget-attributet kan användas med type="submit" och type="image".

Exempel

Denna formulär har två submit-knappar som motsvarar olika mål-fönster:

<form action="action_page.php">
   Förnamn: <input type="text" name="fname"><br>
   Efternamn: <input type="text" name="lname"><br>
   <input type="submit" value="Skicka som normalt">
   <input type="submit" formtarget="_blank"
   value="Skicka till ett nytt fönster">
</form>

Prova själv

height och width-attribut

height och width-attribut definierar höjden och bredden på <input>-elementet.

height och width-attribut används endast för <input type="image">.

Kommentar:Ange alltid storleken på bilden. Om webbläsaren inte vet bildens storlek kommer sidan att blinka när bilden laddas.

Exempel

Definiera en bild som submit-knapp och ställ in höjd och bredd egenskaper:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Prova själv

list-attributet

list-attributet refererar till <datalist>-elementet som innehåller fördefinierade alternativ för <input>-elementet.

Exempel

Använd <datalist> för att sätta fördefinierade värden för <input>-elementet:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

Prova själv

min och max-attributet

min och max-attributet specificerar det minsta och största värdet för <input>-elementet.

min och max-attributet gäller för följande inmatningstyper: number, range, date, datetime, datetime-local, month, time och week.

Exempel

Inmatningselement med minsta och största värden:

Ange ett datum före 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Ange ett datum före 1980-01-01:
Ange ett datum efter 2000-01-02:
 Antal (mellan 1 och 5):
<input type="number" name="quantity" min="1" max="5">

Prova själv

multiple-attributet

multiple-attributet är ett booleskt attribut.

Om satt, specificerar det att användaren får mata in mer än ett värde i <input>-elementet.

multiple-attributet gäller för följande inmatningstyper: email och file.

Exempel

Filuppladdningsfält som accepterar flera värden:

Välj en bild: <input type="file" name="img" multiple>

Prova själv

pattern-attributet

pattern-attributet specificerar den reguljära uttrycket som används för att kontrollera värdet på <input>-elementet.

pattern-attributet gäller för följande inmatningstyper: text, search, url, tel, email och password.

Tips:Använd den globala title-attributet för att beskriva mönstret för att hjälpa användaren.

Tips:Lär dig mer om reguljära uttryck i vår JavaScript-tutorial.

Exempel

Inmatningsfältet får endast innehålla tre bokstäver (ingen siffror eller specialtecken):

Landskod: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Prova själv

placeholder-attributet

placeholder-attributet specificerar en ledtråd som beskriver den förväntade värdet för inmatningsfältet (en exempelvärde eller en kort beskrivning av formatet).

Denna varning kommer att visas i inmatningsfältet innan användaren matar in ett värde.

placeholder-attributet gäller för följande inmatningstyper: text, search, url, tel, email och password.

Exempel

Inmatningsfält med plats持ers text:

<input type="text" name="fname" placeholder="Förnamn">

Prova själv

required-attributet

required-attributet är ett booleskt attribut.

Om inställt, specificeras att inmatningsfältet måste fyllas i innan formuläret skickas in.

required-attributet gäller för följande inmatningstyper: text, search, url, tel, email, password, date pickers, number, checkbox, radio och file.

Exempel

Obligatoriska inmatningsfält:

Username: <input type="text" name="usrname" required>

Prova själv

step-attributet

step-attributet specificerar den lagliga numeriska intervallet för <input>-elementet.

Exempel: Om step="3", så är de giltiga talen -3, 0, 3, 6, och så vidare.

Tips:step-attributet kan användas tillsammans med max- och min-attributen för att skapa ett intervall av giltiga värden.

step-attributet gäller för följande inmatningstyper: number, range, date, datetime, datetime-local, month, time och week.

Exempel

Inmatningsfält med specifik laglig numerisk intervall:

<input type="number" name="points" step="3">

Prova själv