HTML invoertypen

Dit hoofdstuk beschrijft de invoertypen van het <input>-element.

Invoertype: text

<input type="text"> DefinieertTekstinputenkele regel invoervelden:

Voorbeeld

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

Probeer het zelf

Deze HTML-code ziet er in de browser zo uit:

Voornaam:


Achternaam:

Invoertype: password

<input type="password"> definiërenWachtwoordveld：

Voorbeeld

<form>
 Gebruikersnaam:<br>
<input type="text" name="username">
<br>
 Gebruikerswachtwoord:<br>
<input type="password" name="psw">
</form>

Probeer het zelf

Deze HTML-code ziet er in de browser zo uit:

Gebruikersnaam:


Gebruikerswachtwoord:

Opmerking:Karakters in het wachtwoordveld worden gemaskeerd (weergegeven als sterren of bolletjes).

Invoertype: submit

<input type="submit"> definiërenIndienenFormulierdata naarFormulierverwerkingsprogrammaknoppen.

Het formulierverwerkingsprogramma (form-handler) is meestal een serverpagina die scripts bevat die de invoerdata verwerken.

Geef in het action-eigenschap van het formulier de formulushandelaar (form-handler) op:

Voorbeeld

<form action="action_page.php">
Voornaam:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Achternaam:<br>
<input type="text" name="lastname" value="Muis">
<br><br>
<input type="submit" value="Indienen">
</form>

Probeer het zelf

Deze HTML-code ziet er in de browser zo uit:

Voornaam:


Achternaam:


Als je de value-eigenschap van de submit knop overslaat, krijgt de knop de standaard tekst:

Voorbeeld

<form action="action_page.php">
Voornaam:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Achternaam:<br>
<input type="text" name="lastname" value="Muis">
<br><br>
<input type="submit">
</form>

Probeer het zelf

Invoer Type: radio

<input type="radio"> Definieert een radio knop.

Radio knoppen laten een gebruiker slechts ÉÉN van een beperkt aantal keuzes selecteren:

Voorbeeld

<form>
<input type="radio" name="sex" value="male" checked>Man
<br>
<input type="radio" name="sex" value="female">Vrouw
</form>

Probeer het zelf

Deze HTML-code ziet er in de browser zo uit:

Man

Vrouw

Invoer Type: selectievakbalk

<input type="checkbox"> Definieert een selectievakbalk.

Een selectievakbalk staat gebruikers toe om uit een beperkt aantal opties nul of meerdere opties te kiezen.

Voorbeeld

<form>
<input type="checkbox" name="vehicle" value="Bike">Ik heb een fiets
<br>
<input type="checkbox" name="vehicle" value="Car">Ik heb een auto 
</form>

Probeer het zelf

Deze HTML-code ziet er in de browser zo uit:

Ik heb een fiets

Ik heb een auto

Invoer Type: knop

<input type="button"> definiërenknop。

Voorbeeld

<input type="button" onclick="alert('Hello World!')" value="Klik Mij!">

Probeer het zelf

Deze HTML-code ziet er in de browser zo uit:

HTML5 invoertypes

HTML5 voegt meerdere nieuwe invoertypes toe:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Opmerking:Oude webbrowsers ondersteunen geen invoertypes en worden behandeld als invoertype text.

Invoertype: number

<input type="number"> Gebruikt voor invoervelden die een numerieke waarde moeten bevatten.

Je kunt restricties instellen voor cijfers.

Afhankelijk van de browserondersteuning kunnen restricties worden toegepast op invoervelden.

Voorbeeld

<form>
  Aantal (tussen 1 en 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Probeer het zelf

Invoerbeperkingen

Hier worden enkele veelgebruikte invoerbeperkingen vermeld (enkele zijn nieuw in HTML5):

Eigenschap Beschrijving
disabled Stel in of invoervelden moeten worden uitgeschakeld.
max Stel de maximale waarde in voor invoervelden.
maxlength Stel het maximale aantal tekens in voor invoervelden.
min Stel de minimale waarde in voor invoervelden.
pattern Stel het reguliere uitdrukking in dat de invoerwaarden controleert.
readonly Stel in of invoervelden alleen-lezen zijn (kan niet worden gewijzigd).
required Stel in of invoervelden verplicht zijn (moeten worden ingevuld).
size Stel de breedte in van invoervelden (aantal tekens).
step Stel de geldige numerieke intervallen in voor invoervelden.
value Stel de standaardwaarde in voor invoervelden.

Je leert in het volgende hoofdstuk meer over invoerbeperkingen.

Voorbeeld

<form>
  Aantal:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Probeer het zelf

Invoertype: date

<input type="date"> Gebruikt voor invoervelden die een datum moeten bevatten.

Afhankelijk van de browserondersteuning, verschijnt de datumkeuzebalk in het invoerveld.

Voorbeeld

<form>
  Verjaardag:
  <input type="date" name="bday">
</form>

Probeer het zelf

Je kunt restricties toevoegen aan de invoer:

Voorbeeld

<form>
  Voer een datum in voordat 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Voer een datum in na 2000-01-01:
  Voer een datum in na 2000-01-01:<br>
</form>

Probeer het zelf

Invoertype: color

<input type="color"> Gebruikt voor invoervelden die een kleur moeten bevatten.

Afhankelijk van de browserondersteuning, verschijnt de kleurenkeuzebalk in het invoerveld.

Voorbeeld

<form>
  Selecteer je favoriete kleur:
  <input type="color" name="favcolor">
</form>

Probeer het zelf

Invoertype: range

<input type="range"> Gebruikt voor invoervelden die een waarde binnen een bepaald bereik moeten bevatten.

Afhankelijk van de browserondersteuning, kan het invoerveld worden weergegeven als een schuifregelaar.

Voorbeeld

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Probeer het zelf

Je kunt de volgende eigenschappen gebruiken om beperkingen op te leggen: min, max, step, value.

Invoertype: month

<input type="month"> Laat gebruikers een maand en jaar kiezen.

Afhankelijk van de browserondersteuning, verschijnt de datumkeuzebalk in het invoerveld.

Voorbeeld

<form>
  Verjaardag (maand en jaar):
  <input type="month" name="bdaymonth">
</form>

Probeer het zelf

Invoertype: week

<input type="week"> Laat gebruikers een week en jaar kiezen.

Afhankelijk van de browserondersteuning, verschijnt de datumkeuzebalk in het invoerveld.

Voorbeeld

<form>
  Selecteer een week:
  <input type="week" name="week_year">
</form>

Probeer het zelf

Invoertype: time

<input type="time"> Laat gebruikers een tijd kiezen (zonder tijdzone).

Afhankelijk van de browserondersteuning, verschijnt de tijdkeuzebalk in het invoerveld.

Voorbeeld

<form>
  Selecteer een tijd:
  <input type="time" name="usr_time">
</form>

Probeer het zelf

Invoertype: datetime

<input type="datetime"> Laat gebruikers een datum en tijd kiezen (met tijdzone).

Afhankelijk van de browserondersteuning, verschijnt de datumkeuzebalk in het invoerveld.

Voorbeeld

<form>
  Verjaardag (datum en tijd):
  <input type="datetime" name="bdaytime">
</form>

Probeer het zelf

Invoertype: datetime-local

<input type="datetime-local"> Laat gebruikers een datum en tijd kiezen (zonder tijdzone).

Afhankelijk van de browserondersteuning, verschijnt de datumkeuzebalk in het invoerveld.

Voorbeeld

<form>
  Verjaardag (datum en tijd):
  <input type="datetime-local" name="bdaytime">
</form>

Probeer het zelf

Invoertype: email

<input type="email"> Gebruikt voor invoervelden die e-mailadressen moeten bevatten.

Afhankelijk van de browserondersteuning kan het e-mailadres automatisch worden geverifieerd bij het indienen.

Sommige smartphones herkennen e-mailtypen en voegen ".com" toe aan het toetsenbord om overeen te komen met e-mailinvoer.

Voorbeeld

<form>
  E-mail:
  <input type="email" name="email">
</form>

Probeer het zelf

Invoertype: search

<input type="search"> Gebruikt voor zoekvelden (zoekvelden gedragen zich als reguliere tekstvelden).

Voorbeeld

<form>
  Zoek Google:
  <input type="search" name="googlesearch">
</form>

Probeer het zelf

Invoertype: tel

<input type="tel"> Gebruikt voor invoervelden die telefoonnummers moeten bevatten.

Momenteel wordt alleen Safari 8 ondersteund voor het type tel.

Voorbeeld

<form>
  Telefoon:
  <input type="tel" name="usrtel">
</form>

Probeer het zelf

Invoertype: url

<input type="url"> Gebruikt voor invoervelden die URL-adressen moeten bevatten.

Afhankelijk van de browserondersteuning kan de url-veld automatisch worden geverifieerd bij het indienen.

Sommige smartphones herkennen url-typen en voegen ".com" toe aan het toetsenbord om overeen te komen met url-invoer.

Voorbeeld

<form>
  Voeg je homepage toe:
  <input type="url" name="homepage">
</form>

Probeer het zelf