Last updated:
Separate examples show what each HTML control looks like. This project shows how the controls work together. After reviewing the HTML examples on Playcode123.com, build a small activity selector that displays your choices locally. This is a learning demo, not a contact form for the blog.
What you will make
The visitor gives a project a title, chooses an HTML topic, optionally asks for hints, and writes a short note. A preview button displays the choices beneath the controls. Use invented practice text rather than personal details.
HTML builds the controls. A small JavaScript section reads their values and updates the preview. You can study the HTML first and treat the script as a working helper until you are ready for the JavaScript lessons.
Save and open the example
Create practice-selector.html and paste the complete example. Open the file in your browser. No server or email service is required. The script prevents normal form submission, and the preview button is explicitly type="button". This example does not send or persist your entries.
Complete example to try locally
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A local practice selector</title>
<style>
body{font-family:system-ui,sans-serif;line-height:1.6;margin:0;padding:24px;color:#172b3a;background:white}main{max-width:720px;margin:auto}a{color:#145da0}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #145da0;outline-offset:3px}input,select,textarea,button{font:inherit;max-width:100%;box-sizing:border-box}
input[type="text"],select,textarea{width:100%;padding:8px}button{padding:10px 16px}#result{white-space:pre-wrap;overflow-wrap:anywhere}
</style>
</head>
<body>
<main>
<h1>Choose a practice activity</h1>
<p>This demo only previews your choices in this page. Nothing is sent or saved.</p>
<form id="practice-form">
<p><label for="project">Project title</label><br>
<input id="project" name="project" type="text" maxlength="60"
placeholder="For example: My plant page"></p>
<p><label for="topic">Topic</label><br>
<select id="topic" name="topic">
<option value="HTML images">HTML images</option>
<option value="HTML tables">HTML tables</option>
<option value="HTML links">HTML links</option>
</select></p>
<p><label><input id="hints" name="hints" type="checkbox"> Include hints</label></p>
<p><label for="notes">Practice notes</label><br>
<textarea id="notes" name="notes" rows="4" maxlength="200"></textarea></p>
<button type="button" id="preview">Preview choices</button>
</form>
<p id="result" role="status"></p>
</main>
<script>
const form = document.getElementById("practice-form");
form.addEventListener("submit", (event) => event.preventDefault());
document.getElementById("preview").addEventListener("click", () => {
const project = document.getElementById("project").value.trim() || "Untitled project";
const topic = document.getElementById("topic").value;
const hints = document.getElementById("hints").checked ? "yes" : "no";
const notes = document.getElementById("notes").value.trim() || "No notes";
document.getElementById("result").textContent =
project + "\nTopic: " + topic + "\nHints: " + hints + "\nNotes: " + notes;
});
</script>
</body>
</html>Check the result
Enter “Plant page”, select HTML images, tick Include hints, and type “Check the image path” in the notes box. Choose Preview choices. The message should contain your title, selected topic, “Hints: yes”, and the note.
Untick the checkbox and preview again. The hints line should change to “no”. Clear the title and note: the preview should use “Untitled project” and “No notes”. The output only changes when you choose Preview choices.
Connect labels to controls
The for value of a label matches a control’s id. Clicking Project title should focus that input. The checkbox sits inside its label, so clicking Include hints can toggle the checkbox too.
A placeholder is only a short example; it disappears when the visitor types. Keep visible labels even when a placeholder is present. Use a select when the visitor should choose one item from a defined list, and a textarea when a note can span several lines.
Understand the preview helper
Text inputs and the select expose a value. A checkbox exposes a Boolean checked state. The script turns that state into words so readers do not need to interpret a symbol.
The message is assigned with textContent. If someone types HTML-like text, the preview shows it as text rather than inserting it as markup. This matters whenever a page displays something entered by a visitor.
Common mistakes to avoid
- A label does not focus its input: compare for and id character by character.
- A control was renamed and preview stopped working: update the matching getElementById call too.
- The page reloads unexpectedly: keep the non-submit button type and the submit-prevention listener.
- You expected an email: this demo has no backend. A real submission service requires separate implementation and testing.
If you later build a real form, do not treat browser-side limits or validation as security checks. The receiving service must validate submissions and handle privacy and abuse protection.
Exercise: add one more topic
Add “Semantic HTML” as a fourth dropdown option. Keep its value and displayed text the same. No JavaScript change is needed because the script reads whichever option is selected.
Solution: insert <option value="Semantic HTML">Semantic HTML</option> before the closing select tag. Select it and confirm that the preview reports “Topic: Semantic HTML”.
Test without a mouse
Use Tab to move through every control. Type a title, change the selection with the keyboard, toggle the checkbox with Space, and activate the button. The focus indicator should remain visible. This test catches problems that are easy to miss when you only click with a mouse.
Continue your project
Create an Interactive Button with JavaScript is a useful next step. Return to the HTML examples on Playcode123.com whenever you want to review the basic syntax.
Further reference
Technical reference: MDN: your first form.