Ét felt · 6 minutter
Læs formularens værdi
Ingen værdi aflæst endnu.
Ca. 6 minutter · Fokus: FormData bruger feltets name.
Formularens submit-handler og visningen er færdige. Læs den indtastede e-mailadresse med FormData. Alt foregår lokalt i previewet.
const email = "" med to linjer: Opret data med new FormData(form), og hent e-mailværdien med data.get(...).ida@example.com, og tryk på Læs værdien. Prøv derefter med en anden adresse.name="email". Indtast en gyldig adresse igen, hvis previewet er nulstillet, og indsend. Hvad viser resultatet nu?name="email", og kontrollér at værdien igen bliver læst.Færdig når: Resultatet følger den indtastede værdi. Uden name viser det null, selvom feltet stadig har sit id og en fungerende label.
Forklar til en makker: Hvorfor læser vi email, når feltets id er contact-email?
new FormData(form) aflæser formularens aktuelle værdier. Argumentet til .get() skal matche feltets name, ikke dets id.
Erstat TODO-linjen med:
const data = new FormData(form)const email = data.get("email")id="contact-email" forbinder feltet med labelens for. name="email" giver værdien dens nøgle i formulardata. .get() returnerer null, hvis nøglen ikke findes.
Skift name="email" til name="contactEmail". Forudsig resultatet, og prøv det. Ret derefter kun argumentet til .get(), så aflæsningen virker igen. Labelens for og feltets id skal blive stående.
<main>
<p class="eyebrow">Ét felt · 6 minutter</p>
<h1>Læs formularens værdi</h1>
<form aria-labelledby="form-title">
<h2 id="form-title">Prøv en e-mailadresse</h2>
<label for="contact-email">E-mail (påkrævet)</label>
<input id="contact-email" name="email" type="email" autocomplete="email" required>
<button type="submit">Læs værdien</button>
</form>
<p class="result" id="result" role="status">Ingen værdi aflæst endnu.</p>
</main>
const form = document.querySelector("form")
const result = document.querySelector("#result")
function handleSubmit(event) {
event.preventDefault()
// TODO: Opret FormData fra form, og læs feltet med name="email".
const email = ""
// Visningen er givet. JSON.stringify gør også null synlig.
result.textContent = `Aflæst værdi: ${JSON.stringify(email)}`
}
form.addEventListener("submit", handleSubmit)
Et lille hint
data.get("feltets-name")