编辑导读：不管是APP照旧网页端，表单页都是常常用到的成果之一。网页端PM需要相识常见表单页的相关类型，作者按照多年的履历总结出了通用逻辑和文档类型，但愿对你有所开导。

表单页凡是由多种输入组件和提交按钮构成，输入组件凡是包括输入框、下拉列表框、单选框、复选框等等。接下来别离先容他们的逻辑类型和应用场景。

相关类型以Axure原型的 *** 整理到网址

一、输入组件类型

填写表单主要思量的是输入组件的类型，常见的有输入框(文本框)、选择框(下拉列表框)、单选框、复选框、日期选择器(文本框)、上传文件框。

1. 输入框

输入框的逻辑需要思量是否必填，输入范例，框内提示文字，框外提示文字，约束条件。

是否必填。假如必填则在前面加个赤色星号*，失去核心可能提交表单的时候检测到必填项没有填写则高亮对应组件边框为赤色。

输入范例。凡是为字符串、字母、数字、整数、邮箱、 *** 号码、网址等。他们对应Axure默认的文本框，需要用约束条件来举办限制。

输入单元。凡是利用提示文字暗示。可是假如是金额，等涉及到计较的单元，单元为元可能万元。此时不只仅是提示文字的浸染，还大概涉及到计较法则。

框内提示文字。用来描写输入什么可能提示信息可能留意事项，输入文字则自动消失。好比最多1000字，支持换行。

框外提示文字。一般位于输入框的后头可能下一行，浸染和框内提示文字临近。

约束条件。好比约束最多输入几多字，高出则无法输入到框中可能高亮提醒用户高出。好比最多输入几多金额，高出则赤色文字提示超出。好比约束输入整数，输入非整数则自动删除小数点后头的数字输入非数字则自动清空且赤色文字提示。

别的可以阅读作者写过的相关文章：善用Axure写PRD，APP文本框通用的输入法则 和  从3个角度讲授：PM该如何画出输入框？

2. 下拉列表框

下拉列表框的逻辑需要思量是否必选，字段值，默认值，框外提示文字。

是否必选。假如必选则在前面加个赤色星号*，失去核心可能提交表单的时候检测到必填项没有填写则高亮对应组件边框为赤色。

字段值。下拉列表框凡是包括N个值，留意大概包括提示文字“请选择”可能直接默认选择一个值。

默认值。假如有了默认值，相当于满意了必选的条件。

框外提示文字。一般位于下拉列表框的后头可能下一行。

3. 单选框

单选框的逻辑需要思量是否必选，字段值，默认值，框外提示文字。

详细类型同下拉列表框。

4. 复选框

复选框的逻辑需要思量是否必选，字段值，默认值，框外提示文字。

详细类型同下拉列表框。

5. 日期选择框

日期选择框的逻辑需要思量是否必选，字段值，默认值，框外提示文字。

是否必选。假如必选则在前面加个赤色星号*，失去核心可能提交表单的时候检测到必填项没有填写则高亮对应组件边框为赤色。

默认值。默认显示当天日期，点击日期选择框则会显示弹窗并可以选择其改日期。

框内提示文字。用来描写输入什么可能提示信息可能留意事项，输入文字则自动消失。好比最多1000字，支持换行。

框外提示文字。一般位于输入框的后头可能下一行，浸染和框内提示文字临近。

约束条件。凡是约束名目为yyyy-mm-dd，假如手动输入日期，非指命名目标内容则会自动清空。

留意：日期选择框组件，可以通过修改Axure默认元件库的文本框范例为日期实现，最终表此刻生成的Axure原型中。

6. 上传文件框

日期选择框的逻辑需要思量是否必选，字段值，默认值，框外提示文字。

是否必填。假如必选则在前面加个赤色星号*，失去核心可能提交表单的时候检测到必填项没有填写则高亮对应组件边框为赤色。

框外提示文字。一般位于下拉列表框的后头可能下一行。

约束条件。好比支持jpg/png名目，更大2MB。

二、提交组件类型

提交表单的时候主要思量提交按钮和打消按钮的相应逻辑和类型。