The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Submit with POST | <form action="/submit" method="post"></form> | View examples |
| Submit with GET | <form action="/search" method="get"></form> | View examples |
| Label a control | <label for="email">Email</label> | View examples |
| Describe a control | <input aria-describedby="email-help"> | View examples |
| Collect an email | <input type="email" name="email"> | View examples |
| Collect a phone number | <input type="tel" name="phone"> | View examples |
| Enable autofill | <input name="email" autocomplete="email"> | View examples |
| Create a choice list | <select name="role"></select> | View examples |
| Add a select option | <option value="developer">Developer</option> | View examples |
| Require a value | <input name="email" required> | View examples |
| Limit text length | <input name="username" minlength="3" maxlength="20"> | View examples |
| Require a pattern | <input name="username" pattern="[A-Za-z0-9_]+"> | View examples |
| Submit the form | <button type="submit">Save profile</button> | View examples |
| Run a custom action | <button type="button">Preview</button> | View examples |
| Reset form fields | <button type="reset">Reset fields</button> | View examples |
Use native form elements first. They provide keyboard support, browser validation, autofill, and accessibility behavior before you add any JavaScript.
Step by step
Detailed examples
Create the form container
The form element owns the controls submitted together. Use GET for safe retrieval such as search, and POST for operations that create or change data.
<form action="/newsletter" method="post">
<label for="newsletter-email">Email</label>
<input id="newsletter-email" name="email" type="email" required>
<button type="submit">Subscribe</button>
</form>Note: Every submitted control needs a name. The id is for labels and page scripting; the name becomes the submitted key.
Connect every field to a label
A label enlarges the clickable area and gives assistive technology an accessible name. Placeholder text is an example, not a replacement for a label.
<label for="full-name">Full name</label>
<input id="full-name" name="fullName" autocomplete="name"><label for="password">Password</label>
<input id="password" name="password" type="password"
aria-describedby="password-help">
<p id="password-help">Use at least 12 characters.</p>Use the most specific input type
Specific types communicate intent and improve mobile keyboards, autofill, and validation. Common choices include email, tel, url, date, number, checkbox, and radio.
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email">
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">Note: Use type=number for quantities that users calculate with, not for postal codes, phone numbers, or identifiers.
Present a defined list of options
Use a select for a manageable list of mutually exclusive choices. Give every option an explicit value when the submitted value differs from its visible label.
<label for="role">Role</label>
<select id="role" name="role" required>
<option value="">Choose a role</option>
<option value="developer">Developer</option>
<option value="designer">Designer</option>
<option value="manager">Engineering manager</option>
</select>Layer native and server-side validation
Browser attributes improve feedback but can be bypassed. Repeat every security and data-integrity check on the server and return specific, field-level errors.
<label for="username">Username</label>
<input id="username" name="username"
required minlength="3" maxlength="20"
pattern="[A-Za-z0-9_]+"
aria-describedby="username-help">
<small id="username-help">3–20 letters, numbers, or underscores.</small>Use an explicit submit button
Buttons inside forms default to submit in HTML. Always declare the type so future controls do not accidentally submit the form.
<button type="submit">Save profile</button>
<button type="reset">Reset fields</button>
<button type="button">Preview profile</button>Note: Reset buttons can surprise users by erasing work. Include one only when the workflow clearly benefits from it.
Local code tester
Try an accessible form
Edit the markup and run it in a sandboxed preview. Form submission is disabled.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.