HTML Forms & Validation

Semantic elements for structuring forms, labeling controls, and collecting user input.

Term / Syntax	Name	Description	Example
<form>	Form Container	Groups controls and defines how form data is submitted.	<form action="/contact" method="post">...</form>
<label>	Control Label	Associates visible text with a specific form control.	<label for="email">Email</label> <input id="email" type="email">
<textarea>	Multiline Text	Accepts multiple lines of text.	<textarea name="message"></textarea>
<select>	Option Menu	Provides a control for choosing from a predefined list of options.	<select name="contact">...</select>
<option>	Menu Option	Defines a choice within a <select> control.	<option value="email">Email</option>
<fieldset>	Control Group	Groups related controls, especially radios and checkboxes.	<fieldset><legend>Contact preference</legend>...</fieldset>
<legend>	Group Label	Provides the accessible name for a fieldset.	<legend>Contact preference</legend>
<button>	Form Action	Creates a native button for submitting a form or triggering another action.	<button type="submit">Send</button>

Input types that provide appropriate browser behavior, input methods, and validation.

Term / Syntax	Name	Description	Example
type="text"	Plain Text	Accepts a single line of general text.	<input type="text" name="name">
type="email"	Email Address	Accepts an email address and provides built-in format validation.	<input type="email" name="email">
type="password"	Password	Masks entered characters.	<input type="password" name="password">
type="number"	Number	Accepts numeric values with optional min, max, and step constraints.	<input type="number" min="1" max="10">
type="date"	Date	Provides a date-oriented control where supported.	<input type="date" name="start-date">
type="checkbox"	Checkbox	Represents an independent on/off choice.	<input type="checkbox" id="updates" name="updates">
type="radio"	Radio Button	Represents one choice in a group where only one option can be selected.	<input type="radio" name="contact" value="email">

Attributes that control submission, validation, browser behavior, and accessible input.

Term / Syntax	Name	Description	Example
name	Submission Name	Identifies a control's value when form data is submitted.	<input name="email">
value	Submitted Value	Defines the value associated with a form control when submitted.	<input name="contact" value="email">
action	Submission URL	Specifies where form data is sent when the form is submitted.	<form action="/contact">...</form>
method	Submission Method	Specifies the HTTP method used to submit form data.	<form method="post">...</form>
required	Required Field	Requires a value before the form can pass native constraint validation.	<input type="email" required>
autocomplete	Autocomplete Token	Helps browsers and assistive technology understand expected personal data.	<input autocomplete="email">
minlength	Minimum Length	Sets the minimum number of characters accepted.	<input minlength="8">
maxlength	Maximum Length	Sets the maximum number of characters accepted.	<input maxlength="100">
pattern	Pattern Constraint	Defines a regular-expression constraint for certain text-like inputs.	<input pattern="[A-Za-z]{3,}">
aria-describedby	Related Instructions	Associates a control with supporting instructions or an error message.	<input aria-describedby="email-help email-error">

Patterns for validating input while keeping errors understandable and accessible.

Term / Syntax	Name	Description	Example
ValidityState	Native Validity State	Exposes individual constraint-validation results on a form control.	email.validity.typeMismatch
checkValidity()	Check Validity	Returns whether a control or form currently satisfies constraints.	form.checkValidity();
reportValidity()	Report Validity	Runs constraint validation and asks the browser to show feedback.	form.reportValidity();
setCustomValidity()	Custom Message	Sets or clears a custom constraint-validation error.	email.setCustomValidity(isValid ? "" : "Enter a valid email.");
aria-live	Dynamic Error Announcement	Allows newly added status or error text to be announced without moving focus.	<p aria-live="polite" id="form-status"></p>