HTML Forms and Validation Quiz
Four drills on HTML5 forms: building accessible forms with constraint validation, `<datalist>` autocomplete, the `<output>` element for live calculations, and ARIA roles for error reporting.
420 views
2
Build a basic sign-up form with name, email, and password fields. Use HTML5 constraint validation (required, type="email", minlength) so the form refuses to submit invalid input. Each input must be explicitly associated with a <label> and the submit button must be a real <button type="submit">.
<form>
<!-- your solution comes here -->
</form>Use <datalist> to attach a free-text autocomplete list to a browser input. The list should suggest Chrome, Firefox, Safari, and Edge, but the user should still be allowed to type any value not in the list.
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser" />
<datalist id="browsers">
<!-- options come here -->
</datalist>Use the <output> element together with two number inputs and a <form>'s oninput handler to show the live sum of the two values. Do not require a submit click; the output should update on every keystroke.
<form>
<!-- two number inputs + output comes here -->
</form>Annotate the form below with ARIA so that (a) the password field announces its requirements, (b) a validation error region is announced when an error appears, and (c) the submit button has an accessible name even when its text is just an icon. Do not duplicate any native role unnecessarily.
<form>
<label>Email
<input type="email" required />
</label>
<label>Password
<input type="password" required />
</label>
<div class="error"></div>
<button type="submit"><svg aria-hidden="true" width="16" height="16"><circle cx="8" cy="8" r="6" fill="currentColor" /></svg></button>
</form>