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:
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:
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
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |