Het HTML <input> element stelt ons in staat om verschillende formulierbesturingselementen te maken voor het verzamelen van gebruikersinvoer. Je kunt het gedrag en de uitstraling van deze besturingselementen aanpassen met behulp van verschillende attributen. Laten we enkele veelgebruikte attributen verkennen:

value

Het value attribuut wordt gebruikt om de initiële waarde van het <input> element in te stellen. De specifieke waarde die het aanneemt, hangt af van het invoertype:

• Voor knoppen (type="button", type="reset", type="submit"), definieert het de tekst die op de knop wordt weergegeven;

• Voor tekst (type="text") en wachtwoord (type="password") velden, definieert het de standaardwaarde van het invoerveld;

• Voor selectievakjes (type="checkbox") en keuzerondjes (type="radio"), definieert het de waarde die aan de invoer is gekoppeld.

Opmerking

Het value attribuut kan niet worden gebruikt met <input type="file">.

autofocus

Het autofocus attribuut specificeert dat het invoerveld automatisch de focus moet hebben wanneer de webpagina wordt geladen. Wanneer de pagina laadt, wordt het invoerveld automatisch geselecteerd, zodat de gebruiker kan beginnen met typen zonder eerst op het invoerveld te klikken.

Opmerking

Autofocus werkt hier niet omdat de pagina niet opnieuw laadt wanneer je op de "Run Code" knop klikt.

required

Het required attribuut wordt gebruikt om een invoerveld verplicht te maken. Het specificeert dat het invoerveld moet worden ingevuld voordat de gebruiker het formulier kan indienen. Als de gebruiker probeert het formulier in te dienen zonder het verplichte invoerveld in te vullen, ontvangt hij een validatiefoutmelding die aangeeft dat het veld verplicht is.

placeholder

Het placeholder attribuut biedt een hint of voorbeeld van de verwachte invoerwaarde aan de gebruiker. Een korte tekststring wordt weergegeven in het invoerveld voordat de gebruiker een waarde invoert. Dit is nuttig voor velden die specifieke opmaak vereisen, zoals telefoon- of creditcardnummers.

Opmerking

In de bovenstaande voorbeelden worden verschillende type attributen voor de <input> elementen gebruikt, wat hun uiterlijk en functionaliteit aanzienlijk beïnvloedt. Je zult dieper ingaan op verschillende invoertypen in het volgende hoofdstuk.