HTML Input-eigenschappen

value-eigenschap

value Eigenschap die de oorspronkelijke waarde van het invoerveld specificeert:

Voorbeeld

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

Probeer het zelf

readonly-eigenschap

readonly Eigenschap die specificeert dat het invoerveld alleen-lezen is (kan niet worden gewijzigd):

Voorbeeld

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

Probeer het zelf

De readonly-eigenschap vereist geen waarde. Het is equivalent aan readonly="readonly".

disabled-eigenschap

disabled Eigenschap die specificeert dat het invoerveld geblokkeerd is.

Geblokkeerde elementen zijn niet beschikbaar en klikbaar.

Geblokkeerde elementen worden niet ingediend.

Voorbeeld

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

Probeer het zelf

De disabled-eigenschap vereist geen waarde. Het is equivalent aan disabled="disabled".

size-eigenschap

size Eigenschap die de grootte van het invoerveld specificeert (aantal tekens):

Voorbeeld

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

Probeer het zelf

maxlength-eigenschap

maxlength Eigenschap die de maximale lengte van het invoerveld specificeert:

Voorbeeld

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

Probeer het zelf

Indien de maxlength-eigenschap is ingesteld, zal het invoerveld geen meer dan het toegestane aantal tekens accepteren.

Deze eigenschap biedt geen feedback. Als u gebruikers wilt waarschuwen, moet u JavaScript-code schrijven.

Opmerking:Inputbeperkingen zijn niet onmiskenbaar. JavaScript biedt veel methoden om ongeldige invoer toe te voegen. Voor het veilig beperken van invoer moet de ontvanger (server) tegelijkertijd controles uitvoeren.

HTML5 eigenschappen

HTML5 voegt de volgende eigenschappen toe aan <input>:

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

en voeg extra eigenschappen toe aan <form>:

  • autocomplete
  • novalidate

autocomplete eigenschap

De autocomplete eigenschap bepaalt of een formulier of invoerveld automatisch moet worden voltooid.

Wanneer de automatische voltooiing is ingeschakeld, zal de browser automatisch waarden invullen op basis van de eerdere invoer van de gebruiker.

Tip:U kunt de autocomplete instelling van het formulier instellen op on, en specifieke invoervelden op off, en vice versa.

De autocomplete eigenschap is van toepassing op <form> en de volgende <input> types: text, search, url, tel, email, password, datepickers, range en color.

Voorbeeld

Automatische voltooiing ingeschakeld HTML formulier (een invoerveld is off):

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

Probeer het zelf

Tip:In sommige browsers moet je mogelijk de automatische voltooiingsfunctie handmatig inschakelen.

De novalidate-eigenschap

De novalidate-eigenschap behoort tot de <form>-eigenschappen.

Indien ingesteld, bepaalt novalidate dat de gegevens van het formulier niet gecontroleerd moeten worden bij het indienen.

Voorbeeld

Geef aan dat het formulier niet gecontroleerd moet worden bij het indienen:

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

Probeer het zelf

De autofocus-eigenschap

De autofocus-eigenschap is een booleaanse eigenschap.

Indien ingesteld, bepaalt het dat het <input>-element automatisch focus moet krijgen bij het laden van de pagina.

Voorbeeld

Maak de invoerveld "Voornaam" automatisch focus krijgen bij het laden van de pagina:

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

Probeer het zelf

De form-eigenschap

De form-eigenschap bepaalt één of meerdere formulieren van waaruit het <input>-element behoort.

Tip:Gebruik een gescheiden lijst van formulier-id's met spaties om meerdere formulieren te verwijzen.

Voorbeeld

Invoervelden liggen buiten het HTML-formulier (maar behoren nog steeds tot het formulier):

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>
 Achternaam: <input type="text" name="lname" form="form1">

Probeer het zelf

De formaction-eigenschap

De formaction-eigenschap bepaalt de URL waar de bestanden van de invoercontroleur worden verwerkt bij het indienen van het formulier.

De formaction-eigenschap overschrijft de action-eigenschap van het <form>-element.

De formaction-eigenschap is van toepassing op type="submit" en type="image".

Voorbeeld

Een HTML-formulier met twee submit-knoppen voor verschillende acties:

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

Probeer het zelf

Het formenctype-eigenschap

Het formenctype-eigenschap bepaalt hoe de gegevens van het formulier (form-data) gecodeerd moeten worden wanneer deze naar de server worden verzonden (alleen voor formulieren met method="post").

Het formenctype-eigenschap overschrijft de enctype-eigenschap van het <form>-element.

formenctype 属性适用于 type="submit" 以及 type="image"。

Voorbeeld

发送默认编码以及编码为 "multipart/form-data"（第二个提交按钮）的表单数据（form-data）：

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

Probeer het zelf

formmethod 属性

formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。

formmethod 属性覆盖 <form> 元素的 method 属性。

formmethod 属性适用于 type="submit" 以及 type="image"。

Voorbeeld

第二个提交按钮覆盖表单的 HTTP 方法：

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Using POST submit">
</form>

Probeer het zelf

formnovalidate 属性

novalidate 属性是布尔属性。

如果设置，则规定在提交表单时不对 <input> 元素进行验证。

formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

formnovalidate 属性可用于 type="submit"。

Voorbeeld

拥有两个提交按钮的表单（验证和不验证）：

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Without validation submit">
</form>

Probeer het zelf

formtarget-eigenschap

De formtarget-eigenschap bepaalt de naam of het trefwoord dat aangeeft waar de ontvangen reactie wordt weergegeven nadat het formulier is ingediend.

De formtarget-eigenschap overschrijft de target-eigenschap van het <form> element.

De formtarget-eigenschap kan worden gebruikt met type="submit" en type="image".

Voorbeeld

Deze formulier heeft twee submit-knoppen, die verschillende doelvensters weergeven:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <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>

Probeer het zelf

De height en width-eigenschappen

De height en width-eigenschappen bepalen de hoogte en breedte van het <input> element.

De height en width-eigenschappen zijn alleen van toepassing op <input type="image">.

Opmerking:Altijd de afmetingen van de afbeelding opgeven. Als de browser de afmetingen van de afbeelding niet weet, zal de pagina flitsen bij het laden van de afbeelding.

Voorbeeld

Definieer een afbeelding als submit-knop en stel de height en width-eigenschappen in:

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

Probeer het zelf

list-eigenschap

De list-eigenschap verwijst naar het <datalist> element dat de vooraf gedefinieerde opties van het <input> element bevat.

Voorbeeld

Gebruik <datalist> om een <input> element met vooraf gedefinieerde waarden in te stellen:

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

Probeer het zelf

De min- en max-eigenschappen

De min- en max-eigenschappen specify the minimum and maximum values of the <input> element.

De min- en max-eigenschappen zijn van toepassing op invoertypen zoals number, range, date, datetime, datetime-local, month, time en week.

Voorbeeld

Een <input> element met een minimum- en maximumwaarde:

Voer een datum in voor 1980-01-01:
Voer een datum in voor 1980-01-01:
 Voer een datum in voor 1980-01-01:
Voer een datum in na 2000-01-01:
 Aantal (tussen 1 en 5):
<input type="number" name="quantity" min="1" max="5">

Probeer het zelf

De multiple-eigenschap

De multiple-eigenschap is een boolean-eigenschap.

Indien ingesteld, specifies that the user is allowed to enter more than one value in the <input> element.

De multiple-eigenschap is van toepassing op de volgende invoertypen: email en file.

Voorbeeld

Een invoerveld voor het uploaden van meerdere waarden:

Selecteer een afbeelding: <input type="file" name="img" multiple>

Probeer het zelf

De pattern-eigenschap

De pattern-eigenschap specifies a regular expression used to check the value of the <input> element.

De pattern-eigenschap is van toepassing op de volgende invoertypen: text, search, url, tel, email en password.

Tip:Gebruik de globale title-eigenschap om het patroon te beschrijven om de gebruiker te helpen.

Tip:Leer meer over reguliere expressies in onze JavaScript-tutorial.

Voorbeeld

Het invoerveld mag alleen drie letters bevatten (geen cijfers of speciale tekens):

Landcode: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Drieletterige landcode">

Probeer het zelf

De placeholder-eigenschap

De placeholder-eigenschap specifies a hint (sample value or a brief description of the format) that describes the expected value of the input field.

Deze melding wordt weergegeven in het invoerveld voordat de gebruiker een waarde invoert.

De placeholder-eigenschap is van toepassing op de volgende invoertypen: text, search, url, tel, email en password.

Voorbeeld

Een invoerveld met een placeholder-tekst:

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

Probeer het zelf

Required-eigenschap

De required-eigenschap is een booleaanse eigenschap.

Indien ingesteld, bepaalt het dat het invoerveld moet worden ingevuld voordat het formulier wordt ingediend.

De required-eigenschap is van toepassing op de volgende invoertypen: text, search, url, tel, email, password, date pickers, number, checkbox, radio en file.

Voorbeeld

Verplichte invoervelden:

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

Probeer het zelf

Step-eigenschap

De step-eigenschap bepaalt de geldige numerieke interval van het <input>-element.

Voorbeeld: Als step="3" is, zijn de geldige cijfers -3, 0, 3, 6, etc.

Tip:De step-eigenschap kan samen met de max en min-eigenschappen worden gebruikt om een bereik van geldige waarden te creëren.

De step-eigenschap is van toepassing op de volgende invoertypen: number, range, date, datetime, datetime-local, month, time en week.

Voorbeeld

Een invoerveld met een specifieke wettelijke numerieke interval:

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

Probeer het zelf