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.

Know first

Input Button

Name

Email✕ Enter a valid email address

City

Quick checkChoose the best answer

A sign-up page collects an email, verification code, and password to create one account. How should the form be organized?

Submit them together but only show an 'Invalid information' message at the topPut a Save button beside each field and submit all three separatelyGroup the fields in one form, show errors nearby, and submit them together

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 registration
oil-oil••••••••
Sign in
Checkout
NameAlex Chen
Emailyou@example.com
Create or edit a record
Emailoil-oil@abc
✕ Invalid email format
Any task that submits several related fields
NameAlex Chen
CityShenzhen
Notifications
Save

When NOT to use it

Ask for information that is not needed for the task
Search form
Enter keywords…Submit
One search field doesn’t need extra form structure
Clear every field after one error
Too many fields on one page make the form burdensome
Show only a generic error at the top
Password123
Submission failed: password must be at least 8 charactersThe rule is hidden until submission fails
Allow repeated submission while the first request is running
Versionv2.4.0
Authoroil-oil
Putting read-only information in fields makes people think they can edit it

Anatomy

Email✕ 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

Name

When there are fewer fields and the page is wider, place the label on the left

Vertical

Name

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

Email✕ Enter a valid email address

When validation fails, explain the error next to the affected field.

Typical use cases

Registration

LoginRegister

Checkout

Nickname

City

Project settings

New project

Contact form

Order #20260721-018Completed¥ 329

Order #20260721-017In progress¥ 89

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.