HTML -zelfstudie

HTML HOME HTML-introductie HTML-editors HTML basis HTML-elementen HTML-kenmerken HTML-koppen HTML-alinea's HTML-stijlen HTML-opmaak HTML-citaten HTML-opmerkingen HTML-kleuren HTML-CSS HTML-links HTML-afbeeldingen HTML-favicon HTML-tabellen HTML-lijsten HTML-blok en inline HTML-klassen HTML-ID HTML-iframes HTML-JavaScript Paden voor HTML-bestanden HTML-kop HTML-indeling HTML-responsief HTML-computercode HTML-semantiek HTML-stijlgids HTML-entiteiten HTML-symbolen HTML-emoji's HTML-tekenset HTML-URL-codering HTML versus XHTML

HTML -formulieren

HTML-formulieren HTML-formulierkenmerken HTML-formulierelementen HTML-invoertypen HTML-invoerkenmerken Kenmerken HTML-invoerformulier

HTML -afbeeldingen

HTML-canvas HTML-SVG

HTML- media

HTML-media HTML-video HTML-audio HTML-plug-ins HTML-YouTube

HTML API's

HTML-geolocatie HTML slepen/neerzetten HTML-webopslag HTML-webwerkers HTML-SSE

HTML- voorbeelden

HTML-voorbeelden HTML-quiz HTML-oefeningen HTML-certificaat HTML-samenvatting HTML-toegankelijkheid

HTML- verwijzingen

HTML-taglijst HTML-kenmerken Algemene HTML-kenmerken Ondersteuning voor HTML-browser HTML-gebeurtenissen HTML-kleuren HTML-canvas HTML-audio/video HTML-documenttypen HTML-tekensets HTML-URL-codering HTML-taalcodes HTTP-berichten HTTP-methoden PX naar EM-omzetter Toetsenbord sneltoetsen

HTML -invoertypen


Dit hoofdstuk beschrijft de verschillende typen voor het HTML- <input>element.


HTML-invoertypen

Dit zijn de verschillende invoertypen die u in HTML kunt gebruiken:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

Tip: De standaardwaarde van het typeattribuut is "tekst".


Invoertype Tekst

<input type="text">definieert een tekstinvoerveld met één regel :

Voorbeeld

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Zo wordt de bovenstaande HTML-code weergegeven in een browser:

Voornaam:

Achternaam:


Invoertype Wachtwoord

<input type="password">definieert een wachtwoordveld :

Voorbeeld

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

Zo wordt de bovenstaande HTML-code weergegeven in een browser:

Gebruikersnaam:

Wachtwoord:

De tekens in een wachtwoordveld zijn gemaskeerd (weergegeven als sterretjes of cirkels).



Invoertype Verzenden

<input type="submit">definieert een knop voor het verzenden van formuliergegevens naar een formulier-handler .

De formulier-handler is meestal een serverpagina met een script voor het verwerken van invoergegevens.

De form-handler wordt gespecificeerd in het action attribuut van het formulier:

Voorbeeld

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Zo wordt de bovenstaande HTML-code weergegeven in een browser:

Voornaam:

Achternaam:


Als u het waardekenmerk van de verzendknop weglaat, krijgt de knop een standaardtekst:

Voorbeeld

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form>

Ingangstype resetten

<input type="reset">definieert een resetknop die alle formulierwaarden terugzet naar hun standaardwaarden:

Voorbeeld

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

Zo wordt de bovenstaande HTML-code weergegeven in een browser:

Voornaam:

Achternaam:


Als u de invoerwaarden wijzigt en vervolgens op de knop "Reset" klikt, worden de formuliergegevens teruggezet naar de standaardwaarden.


Ingangstype Radio

<input type="radio">definieert een keuzerondje .

Met keuzerondjes kan een gebruiker SLECHTS ÉÉN van een beperkt aantal keuzes selecteren:

Voorbeeld

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Zo wordt de bovenstaande HTML-code weergegeven in een browser:




Invoertype Selectievakje

<input type="checkbox">definieert een selectievakje .

Met selectievakjes kan een gebruiker NUL of MEER opties van een beperkt aantal keuzes selecteren.

Voorbeeld

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

Zo wordt de bovenstaande HTML-code weergegeven in een browser:




Invoertype-knop

<input type="button">definieert een knop :

Voorbeeld

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

Zo wordt de bovenstaande HTML-code weergegeven in een browser:


Invoertype Kleur

De <input type="color">wordt gebruikt voor invoervelden die een kleur moeten bevatten.

Afhankelijk van de browserondersteuning kan er een kleurkiezer in het invoerveld verschijnen.

Voorbeeld

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

Invoertype Datum

De <input type="date">wordt gebruikt voor invoervelden die een datum moeten bevatten.

Afhankelijk van de browserondersteuning kan er een datumkiezer in het invoerveld verschijnen.

Voorbeeld

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

U kunt ook de attributen minen maxgebruiken om beperkingen aan datums toe te voegen:

Voorbeeld

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

Invoertype Datum/tijd-lokaal

De <input type="datetime-local">specificeert een datum- en tijdinvoerveld, zonder tijdzone.

Afhankelijk van de browserondersteuning kan er een datumkiezer in het invoerveld verschijnen.

Voorbeeld

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Invoertype E-mail

De <input type="email">wordt gebruikt voor invoervelden die een e-mailadres moeten bevatten.

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

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

Voorbeeld

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

Invoertype Bestand

Het <input type="file"> definieert een veld voor het selecteren van bestanden en een knop "Bladeren" voor bestandsuploads.

Voorbeeld

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

Invoertype verborgen

De <input type="hidden"> definieert een verborgen invoerveld (niet zichtbaar voor een gebruiker).

Met een verborgen veld kunnen webontwikkelaars gegevens opnemen die gebruikers niet kunnen zien of wijzigen wanneer een formulier wordt ingediend.

Een verborgen veld slaat vaak op welk databaserecord moet worden bijgewerkt wanneer het formulier wordt verzonden.

Opmerking: hoewel de waarde niet aan de gebruiker wordt weergegeven in de inhoud van de pagina, is deze wel zichtbaar (en kan deze worden bewerkt) met behulp van de ontwikkelaarstools van elke browser of de functie "Bron weergeven". Gebruik geen verborgen invoer als een vorm van beveiliging!

Voorbeeld

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

Invoertype Maand

Hiermee kan de <input type="month">gebruiker een maand en jaar selecteren.

Afhankelijk van de browserondersteuning kan er een datumkiezer in het invoerveld verschijnen.

Voorbeeld

<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

Invoertypenummer

De <input type="number">definieert een numeriek invoerveld.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

Example

<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Input Restrictions

Here is a list of some common input restrictions:

Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:

Example

<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

Example

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

Example

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

Example

<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

Example

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

Example

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>

Input Type Week

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

Example

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>

HTML Exercises

Test Yourself With Exercises

Exercise:

In the form below, add an input field for text, with the name "username" .

<form action="/action_page.php">
<>
</form>


HTML Input Type Attribute

Tag Description
<input type=""> Specifies the input type to display