Inputvelden

Wat zijn inputvelden

In HTML heb je input-velden die je kent van het maken van een formulier:

<input type="text" name="username" class="username-input">

HTML beveiliging op inputvelden

Je kan een formulier en een inputveld met HTML attributen "beveiliging" dit is niet echt een beveiliging natuurlijk want gebruikers (net als jij) kunnen via de Developers Console de HTML-code (en JavaScript) code aanpassen. Op MBO-SD leren we je deze opties niet, voor meer informatie raden we je aan om Google te gebruiken: HTML input element security options. De reden dat we hier niet op ingaan is omdat het voor JavaScript oplossingen niet relevant is.

Tip van Flip:

Inputvelden ophalen

Het ophalen van een inputveld doe je uiteraard met een querySelector. We gebruiken het element wat hier boven staat in ons voorbeeld.

const userNameField = document.querySelector('.username-input');

Waarde tonen/ gebruiken .value

Als je een element hebt opgeslagen in een variabele heeft deze variabele een attribute .value Dit haalt de waarde op die in in het inputveld zit.

In bovenstaand inputveld is de waarde MBO-SD om deze op te halen gebruik je in je JS code

console.log(userNameField.value) //In de console wordt nu MBO-SD getoond

Waarde aanpassen met .value

Je kan de waarde met dezelfde .value ook aanpassen, als je bijvoorbeeld een wachtwoord wilt voorstellen of omdat je informatie wilt aanpassen.

userNameField.value = 'Jan Janssen'; //Het input element heeft nu de waarde van Jan Janssen