Form
You might say
Build a sign-up page where people fill in their information and submit it.
Collect several fields and submit them as one taskA form organizes multiple inputs into a task such as creating an account or placing an order. It needs clear labels, validation, error placement, submission state, and a final result so people know what to fix and whether their data was saved.
Form≠Fieldset
A Form collects and submits a complete task. A fieldset only groups related fields inside a form and commonly uses a legend to name the group.
When to use it
- Account registrationoil-oil••••••••Sign in
- CheckoutNameAlex ChenEmailyou@example.com
- Create or edit a record
- Any task that submits several related fields
When NOT to use it
- Ask for information that is not needed for the task
- Clear every field after one error
- Show only a generic error at the top
- Allow repeated submission while the first request is running
Anatomy
✕ Enter a valid email address
A complete unit of a field: label + control + error
Tells users what to enter
The control where someone enters or chooses a value
A nearby message that explains how to fix a validation error
Submit or cancel actions; make the primary action most prominent
Variants
Horizontal
When there are fewer fields and the page is wider, place the label on the left
Vertical
When there are many fields or the page is narrow, place the label above the input box
Inline
When filter controls and the search action should stay on one row
Validation
✕ Enter a valid email address
When validation fails, explain the error next to the affected field.
Typical use cases
Registration
LoginRegister
Checkout
Project settings
New project
Contact form
Order #20260721-018Completed¥ 329
Order #20260721-017In progress¥ 89
Further reading