表单

Form

初级通用

表单（Form）是让用户填写、选择并提交一组信息的界面，通常包含字段、提示和提交操作。它把零散输入组织成一次可检查、可处理的请求，例如在后台填写商品信息后保存。

你可能会说：「我想让用户填完几项资料再一起保存，还要提示漏填和填错的地方。」

动手看看新增商品信息表单

新增商品填写基本信息后保存到商品库

商品名称

例如：手冲咖啡豆 250g

售价

请输入售价

保存商品

表单状态

切换「表单状态」看一次保存请求的过程；也可以悬停、按住保存按钮，或用 Tab 聚焦字段和按钮，观察即时反馈。

空表单用字段名称和示例提示该填什么；保存操作仍可尝试，校验结果需要明确指出遗漏在哪里。

1
字段收集各自需要的信息
你做新增商品页面时，名称、价格和分类是不同字段，可以分别用输入框或选择器承载。把它们放进同一个表单，用户就知道这些信息会一起用于创建商品。
2
标签和提示帮人填对内容
只留一个空框，用户很难判断该填什么。给字段配上名称、必要的格式说明和错误提示，用户才容易检查自己的输入；报错时指向具体字段，也比只说“提交失败”有用。
3
提交把输入交给后续处理
用户点“保存商品”后，表单会收集当前输入并触发提交。页面可以先检查明显的问题，再把数据交给后端处理；后端是否保存成功，还需要用结果反馈告诉用户。

输入框只是接收单项内容的控件，表单则组织一组字段及其提交过程：一个表单里可以有输入框、选择器和复选框。字段是其中一项有明确含义的数据，比如“商品价格”；表单关心的是这些数据如何一起被填写、检查和提交。

你在做商品后台：运营要修改商品名称和价格，检查无误后一次保存。哪种设计最贴合这个任务？

请为商品后台做一个编辑表单，包含商品名称、价格和分类字段，给每项配清楚的标签。用户点击“保存修改”时，检查必填项和价格输入，指出具体错误；提交期间避免重复操作，并明确反馈保存成功或失败。