HTML invoertypes

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

Invoertype: text

<input type="text"> Definieert voorTekst invoerenkele 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 zo uit in de browser:

Voornaam:


Achternaam:

Invoertype: password

<input type="password"> definieertWachtwoordveld：

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 zo uit in de browser:

Gebruikersnaam:


Gebruikerswachtwoord:

Opmerking:Karakters in het veld 'wachtwoord' worden gemaskeerd (weergegeven als sterretjes of bolletjes).

Invoertype: submit

<input type="submit"> definieertIndienenFormuliergegevens naarFormulierverwerkingsprogrammaknoppen.

Het formulierverwerkingsprogramma (form-handler) is meestal een serverpagina die scripts bevat voor het verwerken van invoergegevens.

Geef in de action-eigenschap van het formulier de formulushandelaar (formulier处理器) 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 zo uit in de browser:

Voornaam:


Achternaam:


Als je de value-eigenschap van de submit knop over slaat, 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

Input 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 zo uit in de browser:

Man

Vrouw

Input Type: selectievak

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

Een selectievak toestaat de gebruiker om nul of meerdere opties uit een beperkt aantal te kiezen.

Voorbeeld

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

Probeer het zelf

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

Ik heb een fiets

Ik heb een auto

Input Type: knop

<input type="button"> definieertknop。

Voorbeeld

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

Probeer het zelf

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

HTML5 invoertypen

HTML5 heeft meerdere nieuwe invoertypen toegevoegd:

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

Opmerking:Oude webbrowsers ondersteunen geen invoertypen en worden als invoertype text beschouwd.

Invoertype: number

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

Je kunt cijfers beperken.

Afhankelijk van de browserondersteuning kunnen beperkingen 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 zijn enkele veelgebruikte invoerbeperkingen (sommige 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 moet controleren.
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 van invoervelden in (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 datumkeuze in het invoerveld.

Voorbeeld

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

Probeer het zelf

Je kunt beperkingen 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 kleuren moeten bevatten.

Afhankelijk van de browserondersteuning, verschijnt de kleurkeuze 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 waarden 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 limieten te stellen: min, max, step, value.

Invoertype: month

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

Afhankelijk van de browserondersteuning, verschijnt de datumkeuze 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 datumkeuze 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 tijdkeuze 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 datumkeuze 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 datumkeuze 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.

Op basis van browserondersteuning kan het e-mailadres automatisch worden geverifieerd bij indienen.

Sommige smartphones herkennen het type email en voegen ".com" toe aan het toetsenbord om e-mailinvoer te matchen.

Voorbeeld

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

Probeer het zelf

Invoertype: search

<input type="search"> Gebruikt voor zoekvelden (zoekvelden hebben een vergelijkbare presentatie 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 ondersteunt alleen Safari 8 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.

Op basis van browserondersteuning kan de URL-veld automatisch worden geverifieerd bij indienen.

Sommige smartphones herkennen URL-typen en voegen ".com" toe aan het toetsenbord om URL-invoer te matchen.

Voorbeeld

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

Probeer het zelf