HTML Input Egenskaber

value-egenskab

value Egenskab definerer inputfeltets standardværdi:

Example

<form action="">
 Fornavn:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Efternavn:<br>
<input type="text" name="lastname">
</form>

Try It Yourself

readonly-egenskab

readonly Egenskab definerer inputfeltet som skrivebeskyttet (kan ikke ændres):

Example

<form action="">
 Fornavn:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Efternavn:<br>
<input type="text" name="lastname">
</form>

Try It Yourself

readonly-egenskab kræver ingen værdi. Det svarer til readonly="readonly".

disabled-egenskab

disabled Egenskab definerer inputfeltet som deaktiveret.

Deaktiverede elementer er utilgængelige og ikke klikbare.

Deaktiverede elementer blive ikke indsendt.

Example

<form action="">
 Fornavn:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Efternavn:<br>
<input type="text" name="lastname">
</form>

Try It Yourself

disabled-egenskab kræver ingen værdi. Det svarer til disabled="disabled".

size-egenskab

size Egenskab definerer størrelsen på inputfeltet (i tegn):

Example

<form action="">
 Fornavn:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Efternavn:<br>
<input type="text" name="lastname">
</form>

Try It Yourself

maxlength-egenskab

maxlength Egenskab definerer maksimal længde for inputfeltet:

Example

<form action="">
 Fornavn:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Efternavn:<br>
<input type="text" name="lastname">
</form>

Try It Yourself

Hvis du sætter maxlength-attributten, accepterer inputkontrollen ikke mere end det tilladte antal tegn.

Denne egenskab giver ingen feedback. Hvis du har brug for at give brugeren besked, skal du skrive JavaScript-kode.

Bemærk:Inputbegrænsninger er ikke altid fejlfri. JavaScript tilbyder mange metoder til at tilføje ulovlige input. For at begrænse input sikkert, skal modtageren (serveren) også kontrollere begrænsningerne.

HTML5-egenskaber

HTML5 har tilføjet følgende egenskaber til <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height og width
  • list
  • min og max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

og tilføj følgende egenskaber til <form>:

  • autocomplete
  • novalidate

autocomplete-attributten

autocomplete-attributten definerer om formularen eller inputfeltet skal automatisk udfyldes.

Når automatisk udfyldelse er aktiveret, udfylder browseren automatisk baseret på brugerens tidligere inputværdier.

Tip:Du kan sætte formens autocomplete til on, mens du sætter specifikke inputfelter til off, og omvendt.

autocomplete-attributten gælder for <form> samt følgende <input>-typer: text, search, url, tel, email, password, datepickers, range og color.

Example

Automatisk udfyldelse aktiveret HTML-formular (en inputfelt er off):

<form action="action_page.php" autocomplete="on">
   Fornavn:<input type="text" name="fname"><br>
   Efternavn: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Try It Yourself

Tip:I nogle browsere skal du måske manuelt aktivere auto-completion-funktionen.

novalidate egenskab

novalidate egenskab tilhører <form>-egenskaben.

Hvis der er indstillet, bestemmer novalidate, at formdata ikke skal valideres ved indsendelse af formularen.

Example

Indikerer, at formularen ikke skal valideres, når den indsendes:

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

Try It Yourself

autofocus egenskab

autofocus egenskab er en boolsk egenskab.

Hvis der er indstillet, bestemmer det, at <input>-elementet skal have automatisk fokus, når siden lastes ind.

Example

Gør "Fornavn"-indtastningsfeltet automatisk fokuseret, når siden lastes ind:

Fornavn:<input type="text" name="fname" autofocus>

Try It Yourself

form egenskab

form egenskab bestemmer et eller flere formulær, der tilhører <input>-elementet.

Tip:Hvis der skal henvises til en formular, skal form id-listen adskilles af mellemrum.

Example

Indtastningsfeltet ligger uden for HTML-formen (men tilhører stadig formularen):

<form action="action_page.php" id="form1">
   Fornavn: <input type="text" name="fname"><br>
   <input type="submit" value="Indsend">
</form>
 Efternavn: <input type="text" name="lname" form="form1">

Try It Yourself

formaction egenskab

formaction egenskab bestemmer URL'en, der skal håndtere filen for den input-kontrol, når formularen indsendes.

formaction egenskab dekker <form>-elementets action egenskab.

formaction egenskab er anvendelig på type="submit" og type="image".

Example

En HTML-form med to submit-knapper og forskellige handlinger:

<form action="action_page.php">
   Fornavn: <input type="text" name="fname"><br>
   Efternavn: <input type="text" name="lname"><br>
   <input type="submit" value="Indsend"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

Try It Yourself

formenctype egenskab

formenctype egenskab bestemmer hvordan formdata (form-data) skal kodes, når den sendes til serveren (kun for formulær med method="post").

formenctype egenskab dekker <form>-elementets enctype egenskab.

formenctype-egenskaben gælder for type="submit" samt type="image".

Example

Send standardkodning samt formulardata (form-data) kodet som "multipart/form-data" (den anden submit-knap):

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

Try It Yourself

formmethod-egenskaben

formmethod-egenskaben definerer den HTTP-metode, der bruges til at sende formulardata (form-data) til action URL.

formmethod-egenskaben overstyrer <form>-elementets method-egenskab.

formmethod-egenskaben gælder for type="submit" samt type="image".

Example

Den anden submit-knap overstyrer formularens HTTP-metode:

<form action="action_page.php" method="get">
   Fornavn: <input type="text" name="fname"><br>
   Efternavn: <input type="text" name="lname"><br>
   <input type="submit" value="Indsend">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Indsend ved POST">
</form>

Try It Yourself

formnovalidate-egenskaben

novalidate-egenskaben er en boolsk egenskab.

Hvis sat, definerer det, at der ikke skal udføres validering af <input>-elementet ved indsendelse af formularen.

formnovalidate-egenskaben overstyrer <form>-elementets novalidate-egenskab.

formnovalidate-egenskaben kan bruges med type="submit".

Example

En formular med to submit-knapper (validering og ikke-validering):

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Indsend"><br>
   <input type="submit" formnovalidate value="Indsend uden validering">
</form>

Try It Yourself

formtarget-attributten

formtarget-attributten definerer navnet eller nøglen, der indikerer, hvor svaret vises efter at formularen er sendt.

formtarget-attributten overskriver <form>-elementets target-attribut.

formtarget-attributten kan bruges sammen med type="submit" og type="image".

Example

Denne formular har to submit-knapper, der svarer til forskellige mål-vinduer:

<form action="action_page.php">
   Fornavn: <input type="text" name="fname"><br>
   Efternavn: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

Try It Yourself

height og width-attributter

height og width-attributter bestemmer højden og bredden af <input> elementet.

height og width-attributter bruges kun til <input type="image">.

Bemærk:Angiv altid dimensionerne for billeder. Hvis browseren ikke kender billedets dimensioner, vil siden blinke, når billedet indlæses.

Example

Definer et billede som en submit-knap og sæt height og width-attributterne:

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

Try It Yourself

list-attributten

list-attributten refererer til <datalist> elementet, som indeholder foruddefinerede valg for <input> elementet.

Example

Brug <datalist> til at sætte et foruddefineret værdi for <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>

Try It Yourself

min og max-attributterne

min og max-attributterne specificerer den mindste og maksimale værdi for <input>-elementet.

min og max-attributterne gælder for følgende input-typer: number, range, date, datetime, datetime-local, month, time og week.

Example

Input-elementer med mindste og maksimale værdier:

Indtast en dato før 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Indtast en dato efter 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
 Antal (mellem 1 og 5):
<input type="number" name="quantity" min="1" max="5">

Try It Yourself

multiple-attributten

multiple-attributten er en boolsk attribut.

Hvis indstillet, bestemmer det, at brugeren kan indtaste en eller flere værdier i <input>-elementet.

multiple-attributten gælder for følgende input-typer: email og file.

Example

Filopladningsfelt, der accepterer flere værdier:

Vælg et billede: <input type="file" name="img" multiple>

Try It Yourself

pattern-attributten

pattern-attributten specificerer den regulære udtryk, der bruges til at kontrollere værdien af <input>-elementet.

pattern-attributten gælder for følgende input-typer: text, search, url, tel, email og password.

Tip:Brug den globale title-attribut til at beskrive mønstret for at hjælpe brugeren.

Tip:Lær mere om regulære udtryk i vores JavaScript-undervisning.

Example

Indtastningsfeltet kan kun indeholde tre bogstaver (ingen tal eller specialtegn):

Landekode: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Tre bogstaver landekode">

Try It Yourself

placeholder-attributten

placeholder-attributten specificerer en beskrivelse af den forventede værdi for inputfeltet (et eksempelværdi eller en kort beskrivelse af formatet).

Advarselsteksten vises før brugeren indtaster et værdi i inputfeltet.

The placeholder attribute is applicable to the following input types: text, search, url, tel, email, and password.

Example

Input fields with placeholder text:

<input type="text" name="fname" placeholder="First name">

Try It Yourself

Required Attribute

The required attribute is a boolean attribute.

If set, it specifies that the input field must be filled out before submitting the form.

The required attribute is applicable to the following input types: text, search, url, tel, email, and password.

Example

Required input fields:

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

Try It Yourself

Step Attribute

The step attribute specifies the valid numeric intervals for the <input> element.

Example: If step="3", the valid numbers should be -3, 0, 3, 6, and so on.

Tip:The step attribute can be used with the max and min attributes to create a range of valid values.

The step attribute is applicable to the following input types: number, range, date, datetime, datetime-local, month, time, and week.

Example

Input fields with specific legal numeric intervals:

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

Try It Yourself