Registration Form Project
What Is It?
Build a small registration form one field at a time. HTML creates the form. A real registration service also needs a server.
What the Tags Mean
form: groups the answers.label: explains a field.input: collects an answer.required: asks the browser to check that an answer exists.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form Project</title>
</head>
<body>
<form>
<label for="name">Your name</label>
<input id="name" name="name" required>
<button type="button">Continue</button>
</form>
<pre id="result" role="status">Your answers will appear here. Nothing is sent or saved.</pre>
<script>
document.querySelectorAll("form").forEach((form) => {
form.addEventListener("submit", (event) => {
event.preventDefault();
const answers = [];
for (const [name, value] of new FormData(form)) {
answers.push(name + ": " + (value instanceof File ? value.name : value));
}
document.getElementById("result").textContent = answers.join("\n") || "No answers entered.";
});
});
document.querySelectorAll("button[type=button]").forEach((button) => {
button.addEventListener("click", () => {
button.closest("form").requestSubmit();
});
});
</script>
</body>
</html>Browser preview
What you see: Type your name and press Continue to see it below the form. The script displays it locally without saving a registration.
Example 2: Another Use
This second complete page shows a workshop dropdown. Select a workshop to try the control.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form Project</title>
</head>
<body>
<label for="workshop">Workshop</label>
<select id="workshop" name="workshop">
<option value="html">HTML basics</option>
<option value="books">Book repair</option>
</select>
</body>
</html>Browser preview
Simple Tip
Keep your form small at first. The demo script only shows answers on the page. A real booking needs a server.
Try It Yourself
Add a labelled email input. Check that clicking each label focuses the right field.