Reading form inputs without a framework

Read what the user typed

const input = document.getElementById("email");
input.value;          // string — what's in the box right now
input.value = "";     // clear it

Every form control has .value. <input>, <textarea>, <select> — all the same.

Listening for changes

input.addEventListener("input",  () => { /* fires on every keystroke */ });
input.addEventListener("change", () => { /* fires on blur or on commit */ });

input fires while the user types. change waits for blur (or Enter on selects). Pick input for live validation; change for "user actually committed."

Reading checkboxes + radios

checkbox.checked;     // boolean
radio.checked;        // boolean — true only on the selected one

Same pattern, different property. The DOM gives you back the user's state directly.

A real "live preview" pattern

const input = document.getElementById("name");
const preview = document.getElementById("preview");
const render = () => preview.textContent = \`hi, ${input.value || "stranger"}\`;
input.addEventListener("input", render);
render();   // initial state

Read → render. Read → render. Same pattern as the C1 word counter, just glued to a different control.