HTML Forms — Class 03
Today's class covers HTML forms: form elements, attributes, input types, labeling, accessibility, and basic client-side validation.
Learning outcomes
- Understand <form> structure and attributes (action, method)
- Use common input types: text, email, password, number, radio, checkbox, select, textarea
- Associate labels with inputs for accessibility
- Perform simple client-side validation using HTML attributes (required, pattern, min/max)
- Style forms using CSS
Basic form example
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<button type="submit">Submit</button>
</form>
Form demo
Styling tips
Use CSS to improve form layout. Example uses `form.css` rules for headings and legends.
Accessibility notes
- Always use <label> elements linked via the
for attribute.
- Provide
aria-* attributes for complex widgets.
- Ensure keyboard focus order and visible focus indicators.