HTML Forms | Quotes

What you'll learn

Build forms with proper semantic HTML and input types

Use labels, fieldset, and legend for accessible form structure

Implement client-side validation with HTML5 attributes

Structure form data submission with proper encoding methods

Create custom form controls while maintaining accessibility

Handle form errors and success states with clear user feedback

Forms collect user input. Well-structured forms improve accessibility and UX.

Form Structure

<form action="/submit" method="POST" novalidate>
  <fieldset>
    <legend>Personal Information</legend>

    <div>
      <label for="name">Full Name</label>
      <input type="text" id="name" name="name" required />
    </div>

    <div>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" />
    </div>
  </fieldset>

  <button type="submit">Submit</button>
</form>

Input Types

Type	Purpose
text	General text input
email	Email address (validates @)
password	Masked text input
number	Numeric input with steppers
tel	Phone numbers
url	URLs (validates format)
date	Date picker
checkbox	Multiple selection
radio	Single selection

Validation Attributes

<input type="text" required minlength="2" maxlength="50" pattern="[A-Za-z]+" />

Next Steps

Key Takeaways

Every input needs an associated <label> for accessibility — use htmlFor or wrap the input in label

<fieldset> and <legend> group related form controls and provide context for screen readers

HTML5 validation attributes (required, minLength, pattern, type) provide built-in client-side validation

Form data can be sent as URL-encoded (default) or multipart/form-data (for file uploads)

Custom form controls must maintain keyboard accessibility and ARIA roles for screen reader support