Challenge: Applying Form Inputs and Labels
Task
Create an HTML form to collect user information using input fields and corresponding labels.
index.html
index.js
<!DOCTYPE html>
<html>
<head>
<title>Personal Information Form</title>
<meta charset="UTF-8" />
</head>
<body>
<h2>User Information Form</h2>
<!-- Step 1: Provide correct `input` types for each case. -->
<!--
Step 2: Ensure that each input field has a unique `id` attribute
and each `<label>` element has a `for` attribute
that matches the `id` of its associated input field.
-->
<form onsubmit="return false">
<label for="name-field">Name:</label>
<!-- Add a text input -->
<input type="_____" id="name-field" required name="name" /><br />
<label for="email-field">Email:</label>
<!-- Add an email input -->
<input type="_____" id="_____" required name="email" /><br />
<label for="_____">_____:</label>
<!-- Add a password input -->
<input type="_____" id="password-field" required name="password" /><br />
<label for="birthdate-field">Birth date:</label>
<!-- Add a date input -->
<input type="_____" id="birthdate-field" required name="birthdate" /><br />
<button type="submit">Send form</button>
</form>
const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
event.preventDefault();
// Accessing form input values
const nameInput = form.elements["name"].value;
const emailInput = form.elements["email"].value;
const passwordInput = form.elements["password"].value;
const birthdayInput = form.elements["birthdate"].value;
// Displaying form input values in an alert
alert(
"Name: " +
nameInput +
"\nEmail: " +
emailInput +
"\nPassword: " +
passwordInput +
"\nBirthday: " +
birthdayInput
);
// Clearing form fields
form.reset();
});
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 4. Hoofdstuk 6
