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.
You can say this to an AI Agent
Turn email, verification code, and password into one sign-up form submission. Show errors beside the relevant fields, prevent duplicate submission while pending, and report success or failure. Verify empty, invalid, and successful cases.
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 registrationans-studio••••••••Sign in
- CheckoutNameAlex ChenEmailyou@example.com
- Create or edit a recordEmailans-studio@abc✕ Invalid email format
- Any task that submits several related fieldsNameAlex ChenCityShenzhenNotificationsSave
When NOT to use it
- Ask for information that is not needed for the taskSearch formEnter keywords…SubmitOne search field doesn’t need extra form structure
- Clear every field after one errorToo many fields on one page make the form burdensome
- Show only a generic error at the topPassword123Submission failed: password must be at least 8 charactersThe rule is hidden until submission fails
- Allow repeated submission while the first request is runningVersionv2.4.0Authorans-studioPutting read-only information in fields makes people think they can edit it
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check