The <form> Element
As defined in the HTML Living Standard, the <form> element represents a hyperlink that can be manipulated such that it could be sent to the server with additional data, or a set of controls that can be used to perform a task.
<form action="/api/save" method="post">
<label for="email">Email Address:</label>
<input type="email" id="email" name="user_email">
<button type="submit">Subscribe</button>
</form>
View HTML Living Standard: The form element
Technical Requirements
- The
actionAttribute: Specifies the URL where the form data will be sent. - The
methodAttribute: Defines the HTTP method (typicallyGETorPOST) used when sending data. - No Nesting: A
<form>element cannot contain another<form>element.
WCAG Requirement: Labels or Instructions
Success Criterion 3.3.2 (Level A): Labels or instructions are provided when content requires user input.
The <form> is the container for input controls. Every control inside must be programmatically associated with a <label>. This ensures that screen reader users hear the label text when they focus on the input field.
Semantic Grouping
For complex forms, using the <form> element is only the first step. You should group related information to provide structural landmarks.
- Fieldsets: Use
<fieldset>and<legend>to group related inputs (like an address or a set of radio buttons). - Autocompletion: Use the
autocompleteattribute to help users fill in common fields (name, email, credit card) automatically, satisfying WCAG SC 1.3.5 (Identify Input Purpose).
A11y Tip: Preventing Accidental Submission
Ensure your <form> handles the Enter key predictably. By default, pressing Enter in a single-line text field submits the form. For multi-step forms, ensure the primary action is clearly labeled and that the user is warned of any irreversible consequences (satisfying WCAG SC 3.3.4).