Verschillende Invoertypen in HTML Verkennen
HTML biedt verschillende <input> elementen waarmee je verschillende soorten gegevens van gebruikers kunt vastleggen. Laten we enkele veelgebruikte invoertypen verkennen:
email en wachtwoord
type="email": gebruikt voor e-mailinvoervelden die een geldig e-mailadres vereisen. De browser valideert automatisch het e-mailadres en vraagt de gebruiker om ongeldige invoer te corrigeren;type="password": gebruikt voor wachtwoordvelden waarbij de ingevoerde tekst om veiligheidsredenen wordt gemaskeerd. Je kunt ook de attributenminLengthenmaxLengthspecificeren om wachtwoordlengtevereisten in te stellen.
index.html
nummer
type="number": gebruikt voor numerieke invoer. Je kunt een specifiek bereik definiëren met de min en max attributen en een specifieke stapwaarde instellen met het step attribuut.
index.html
telefoon
type="tel": bedoeld voor het invoeren van telefoonnummers, maar het voert geen validatie uit op de invoer. Het is aan de ontwikkelaar om de invoer te valideren en ervoor te zorgen dat het een geldig telefoonnummer is.
index.html
checkbox
type="checkbox": stelt de gebruiker in staat om een of meer opties uit vooraf gedefinieerde keuzes te selecteren. Het attribuut checked maakt een selectievakje standaard aangevinkt.
index.html
radio
type="radio": maakt een reeks opties waarbij slechts één optie kan worden geselecteerd. Een keuzerondje vertegenwoordigt elke optie, en het kiezen van één deselecteert automatisch de anderen. Elk keuzerondje moet een unieke value-attribuut hebben om het te identificeren.
index.html
range
type="range": maakt een schuifregelaar waarmee gebruikers een waarde binnen een specifiek bereik kunnen selecteren. Je kunt min, max, step en value attributen toepassen om het gedrag te definiëren.
index.html
index.js
Opmerking
JavaScript is niet het onderwerp van deze cursus, dus de logica erachter zal worden overgeslagen.
datum en tijd
type="date": stelt gebruikers in staat een datum te selecteren uit een kalenderpopup;type="time": stelt gebruikers in staat een tijd in te voeren in een 24-uurs formaat;type="datetime-local": combineert tijd- en datum invoer.
Voorbeeld:
index.html
Opmerking
Voor consistente styling op verschillende apparaten worden vaak kant-en-klare oplossingen gebruikt voor popupkalenders en tijdinvoer.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain more about how browser validation works for these input types?
What are some best practices for using these different input types in forms?
Can you show examples of how to use these input types in an HTML form?
Awesome!
Completion rate improved to 2.56Verschillende Invoertypen in HTML Verkennen
Veeg om het menu te tonen
HTML biedt verschillende <input> elementen waarmee je verschillende soorten gegevens van gebruikers kunt vastleggen. Laten we enkele veelgebruikte invoertypen verkennen:
email en wachtwoord
type="email": gebruikt voor e-mailinvoervelden die een geldig e-mailadres vereisen. De browser valideert automatisch het e-mailadres en vraagt de gebruiker om ongeldige invoer te corrigeren;type="password": gebruikt voor wachtwoordvelden waarbij de ingevoerde tekst om veiligheidsredenen wordt gemaskeerd. Je kunt ook de attributenminLengthenmaxLengthspecificeren om wachtwoordlengtevereisten in te stellen.
index.html
nummer
type="number": gebruikt voor numerieke invoer. Je kunt een specifiek bereik definiëren met de min en max attributen en een specifieke stapwaarde instellen met het step attribuut.
index.html
telefoon
type="tel": bedoeld voor het invoeren van telefoonnummers, maar het voert geen validatie uit op de invoer. Het is aan de ontwikkelaar om de invoer te valideren en ervoor te zorgen dat het een geldig telefoonnummer is.
index.html
checkbox
type="checkbox": stelt de gebruiker in staat om een of meer opties uit vooraf gedefinieerde keuzes te selecteren. Het attribuut checked maakt een selectievakje standaard aangevinkt.
index.html
radio
type="radio": maakt een reeks opties waarbij slechts één optie kan worden geselecteerd. Een keuzerondje vertegenwoordigt elke optie, en het kiezen van één deselecteert automatisch de anderen. Elk keuzerondje moet een unieke value-attribuut hebben om het te identificeren.
index.html
range
type="range": maakt een schuifregelaar waarmee gebruikers een waarde binnen een specifiek bereik kunnen selecteren. Je kunt min, max, step en value attributen toepassen om het gedrag te definiëren.
index.html
index.js
Opmerking
JavaScript is niet het onderwerp van deze cursus, dus de logica erachter zal worden overgeslagen.
datum en tijd
type="date": stelt gebruikers in staat een datum te selecteren uit een kalenderpopup;type="time": stelt gebruikers in staat een tijd in te voeren in een 24-uurs formaat;type="datetime-local": combineert tijd- en datum invoer.
Voorbeeld:
index.html
Opmerking
Voor consistente styling op verschillende apparaten worden vaak kant-en-klare oplossingen gebruikt voor popupkalenders en tijdinvoer.
Bedankt voor je feedback!
