< input > : The Input (Form Input) element
Wat is een input
Het < input > HTML-element wordt gebruikt om interactieve besturingselementen voor webgebaseerde formulieren te maken om gegevens van de gebruiker te accepteren; er is een grote verscheidenheid aan soorten invoergegevens en besturingswidgets beschikbaar, afhankelijk van het apparaat en de user-agent. Het < input >-element is een van de krachtigste en meest complexe in HTML vanwege het enorme aantal combinaties van invoertypes en attributen.
probeer het uit
Tip: verander of voeg een input type toe en zie hoe ze geplaatst worden. Voeg de onderstaande regel code maar toe.<br>
<input type="color" id="name" name="name" required>
<input type="button">
Een drukknop zonder standaardgedrag die de waarde van het value kenmerk weergeeft, standaard leeg.
Example
<input type="button" onclick ="alert('Hello World!')" value="Click Me!"> Zo wordt de bovenstaande HTML-code weergegeven in een browser:<input type="checkbox">
Met selectievakjes kan een gebruiker NUL of MEER opties selecteren/deselecteren uit een beperkt aantal keuzes.
Example
<form><input type="checkbox" id ="vehicle1" name="vehicle1" value="Car">
<label for="vehicle1"> ik heb een fiets <label> <br>
<input type="checkbox" id ="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> ik heb een auto <label> <br>
<input type="checkbox" id ="vehicle3" name="vehicle3" value="Car">
<label for="vehicle3"> ik heb een boot <label> <br>
</form> Zo wordt de bovenstaande HTML-code weergegeven in een browser:
<input type="color">
De <input type="color"> wordt gebruikt voor invoervelden die een kleur moeten bevatten.
Afhankelijk van de browserondersteuning kan er een kleurenkiezer verschijnen in het invoerveld.
Example
<form><label for="favcolor"> Select your favorite color: <label>
<input type="color" id ="favcolor" name="favcolor">
</form> Zo wordt de bovenstaande HTML-code weergegeven in een browser:
<input type="date">
De <input type="date"> wordt gebruikt voor invoervelden die een datum (jaar, maand en dag, zonder tijd) moeten bevatten.
Afhankelijk van de browserondersteuning kan er een datumkiezer in het invoerveld verschijnen.
Example
<form><label for="birthday"> Birthday: <label>
<input type="date" id ="birthday" name="birthday">
</form> You can also use the min and max attributes to add restrictions to dates:
Example
<form><label for="datemax"> Enter a date before 01-01-1979: <label>
<input type="date" id ="datemin" name="datemin" min="1979-12-31">
<label for="datemax"> Enter a date before 31-12-2023: <label>
<input type="date" id ="datemax" name="datemax" max="2023-12-31">
</form> Zo wordt de bovenstaande HTML-code weergegeven in een browser:
<input type="datetime-local">
Het <input type="datetime-local"> specificeert een invoerveld voor datum en tijd, zonder tijdzone.
Afhankelijk van browserondersteuning kan er een datumkiezer verschijnen in het invoerveld.
Example
<form><label for="birthdaytime"> Birthday (date and time): <label>
<input type="datetime-local" id ="birthdaytime" name="birthdaytime">
</form> Zo wordt de bovenstaande HTML-code weergegeven in een browser:
<input type="email">
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 wanneer het wordt verzonden.
Sommige smartphones herkennen het e-mailtype en voegen ".com" aan het toetsenbord toe om overeen te komen met de e-mailinvoer.
Example
<form><label for="email"> Enter your email: <label>
<input type="email" id ="email" name="email">
</form> Zo wordt de bovenstaande HTML-code weergegeven in een browser:
<input type="file">
De <input type="file"> definieert een veld voor het selecteren van bestanden en een knop "Bladeren" voor het uploaden van bestanden.
Example
<form><label for="myfile"> Select a file: <label>
<input type="file" id ="myfile" name="myfile">
</form> Zo wordt de bovenstaande HTML-code weergegeven in een browser:
<input type="hidden">
De definieert een verborgen invoerveld (niet zichtbaar voor een gebruiker).
Met een verborgen veld kunnen webontwikkelaars gegevens opnemen die niet door gebruikers kunnen worden gezien of gewijzigd wanneer een formulier wordt ingediend.
Een verborgen veld slaat vaak op welk databaserecord moet worden bijgewerkt wanneer het formulier wordt ingediend.
Opmerking: hoewel de waarde niet aan de gebruiker wordt weergegeven in de inhoud van de pagina, is deze 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!
Example
<form><label for="fname"> First name: <label>
<input type="text" id ="fname" name="fname">
<input type="hidden" id ="custId" name="custId" value="3487">
<input type="submit" value ="submit" >
</form> Zo wordt de bovenstaande HTML-code weergegeven in een browser:
<input type="hidden">
De definieert een verborgen invoerveld (niet zichtbaar voor een gebruiker).
Met een verborgen veld kunnen webontwikkelaars gegevens opnemen die niet door gebruikers kunnen worden gezien of gewijzigd wanneer een formulier wordt ingediend.
Een verborgen veld slaat vaak op welk databaserecord moet worden bijgewerkt wanneer het formulier wordt ingediend.
Opmerking: hoewel de waarde niet aan de gebruiker wordt weergegeven in de inhoud van de pagina, is deze 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!
Example
<form><input type="image" src ="img_submit.gif" alt="Submit" width="48" height="48">
</form> Zo wordt de bovenstaande HTML-code weergegeven in een browser:
(Verander de src naar je eigen afbelding)
<input type="bdaymonth">
Met <input type="month"> kan de gebruiker een maand en een jaar selecteren.
Afhankelijk van browserondersteuning kan er een datumkiezer verschijnen in het invoerveld.
Example
<form><label for="bdaymonth"> Birthday (month and year): <label>
<input type="month" id ="bdaymonth" name="bdaymonth">
</form> Zo wordt de bovenstaande HTML-code weergegeven in een browser:
<input type="number">
Het <input type="number"> definieert een numeriek invoerveld.
U kunt ook beperkingen instellen voor welke nummers worden geaccepteerd.
In het volgende voorbeeld wordt een numeriek invoerveld weergegeven, waarin u een waarde van 1 tot 5 kunt invoeren:
Example
<form><label for="quantity"> Quantity (between 1 and 5): <label>
<input type="number" id ="quantity" name="quantity" min="1" max="5">
</form> Zo wordt de bovenstaande HTML-code weergegeven in een browser:
<input type="password">
<input type="radio"> definieert een keuzerondje.
Met keuzerondjes kan een gebruiker SLECHTS EEN van een beperkt aantal keuzes selecteren:
Example
<form><input type="radio" id ="html" name="fav_language" value="HTML">
<label for="html"> HTML <label>
<input type="radio" id ="css" name="fav_language" value="css">
<label for="css"> css <label>
<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: