JavaScript Academy · Les

Inputwaarden lezen

Lees waarden uit tekstvelden, checkboxen en selectvelden.

Les 1 van 413 stappen

Inputwaarden lezen is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Werken met formuliergegevens

Formulieren verzamelen gebruikersinvoer via velden zoals tekstvakken, selectievakjes, keuzerondjes en keuzelijsten. Elk veld geeft zijn gegevens op een iets andere manier beschikbaar.

input.value

Tekstachtige invoervelden geven hun huidige inhoud via de eigenschap value terug, altijd als tekenreeks.

const name = document.querySelector("#name");
console.log(name.value);

value is altijd een tekenreeks

Zelfs numerieke invoervelden geven een tekenreeks terug. Zet de waarde expliciet om wanneer je een getal nodig hebt.

const age = document.querySelector("#age");
const n = Number(age.value);

valueAsNumber

Numerieke en datumvelden bieden valueAsNumber, waarmee je rechtstreeks een getal terugkrijgt, of NaN als de waarde leeg of ongeldig is.

const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);

checkbox.checked

Selectievakjes geven hun status terug via de booleaanse eigenschap checked, niet via value.

const agree = document.querySelector("#agree");
console.log(agree.checked); // true or false

Keuzerondjes

Zoek in een groep keuzerondjes het geselecteerde rondje. De eigenschap checked geeft aan welke optie is geselecteerd.

const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");

De waarde van select

Een keuzelijst met één selectie geeft de gekozen optie terug via value.

const country = document.querySelector("#country");
console.log(country.value);

Meervoudige selectie

Lees bij een meervoudige selectie selectedOptions uit en zet de opties om naar waarden.

const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);

De input-gebeurtenis

Luister naar de gebeurtenis input om in realtime op elke toetsaanslag of wijziging te reageren.

name.addEventListener("input", (e) => {
  console.log(e.target.value);
});

De change-gebeurtenis

De gebeurtenis change wordt geactiveerd wanneer een veld de focus verliest nadat de waarde is gewijzigd, of direct bij selectievakjes en keuzelijsten.

country.addEventListener("change", (e) => {
  console.log("chose " + e.target.value);
});

FormData

FormData verzamelt alle benoemde velden van een formulier in één keer, wat ideaal is om ze naar een server te verzenden.

const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));

Korte controle

Lees het selectievakje op de juiste manier uit.

Beantwoord dit in de interactieve les

Samenvatting

Lees tekstvelden uit via value, dat altijd een tekenreeks is, en gebruik valueAsNumber voor getallen. Lees selectievakjes en keuzerondjes uit via checked en keuzelijsten via value of selectedOptions. Reageer met de gebeurtenis input op elke wijziging of met de gebeurtenis change bij bevestiging. Verzamel alles in één keer met FormData.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Inputwaarden lezen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Inputwaarden lezen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Inputwaarden lezen”?

Lees waarden uit tekstvelden, checkboxen en selectvelden. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Inputwaarden lezen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy