HTML and CSS State
Form Validation
Input State Enables an Action
An email field changes value, touched styling, validation copy, and submit-button state. Each replay step pairs the source statement with the browser-rendered form.
Program
The source mutates ordinary form controls. CSS turns those DOM state changes into visible validation feedback.
form_validation.js
const email = document.querySelector('#email');
const hint = document.querySelector('#email-hint');
const submit = document.querySelector('#submit');
email.value = 'learner@egtry.dev';
email.classList.add('touched');
hint.textContent = 'Email format is valid.';
hint.classList.add('valid');
submit.disabled = false;
submit.dataset.state = 'ready';
form state
Form state is the current data and UI status of form controls, such as an input value or a disabled button.
disabled control
A disabled control cannot be submitted or clicked. Removing `disabled` is often the final step after validation passes.
data attribute
A data attribute stores small UI state on an element so CSS and JavaScript can both read it.