设计网页表单 第1篇
在实际的网页开发中通常采用post方式提交表单中的数据
radio：单选按钮
name：如果是一组，那么取相同的name
对于radio，value是必须的
checked:单选按钮默认选中的状态
checkbox：复选框
name：一组复选框有相同的name
value：值
checked：复选框默认选中状态
select：列表框
option：选项
value：表单提交的选项的值，如果不写默认提交option中的类容
selected：默认选中项
图片按钮
submit：提交按钮
reset：表单重置按钮
image：图片提交按钮
button：普通按钮，天生不具备任何功能，可通过js赋予功能
textarea：多行文本域
cols：显示的列数
rows：显示的行数
file:文件域
enctype=“multipart/form-data”：如果要上传文件必须加。它表示表单编码属性
type如果指定是email，会自动验证email地址格式是否正确
type指定是url，会自动验证url地址格式是否正确
number:表示是数字输入框
min：最小值
max：最大值
step：步进（每次加/减多少）
range：滑块
min：允许的最小值
max：允许的最大值
step：合法的数字间隔
search
表单在提交的时候需要提交，但是又不希望被用户看到，这样就需要用到隐藏域
type=hidden
readonly：只允许读，不允许修改
disabled:表示禁用
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
标签的for属性应该与表单控件的id属性值相同，以此来建立与表单控件之间的关联。如果元素直接包含了表单控件（如），则不需要使用for属性，因为关联是隐式的。
表单验证好处：
减轻服务器的压力
保证数据的可行性和安全性
用户输入内容必须符合正则表达式所指的规则，否则不能提交表单
设计网页表单 第2篇
表单中某项目里只有3-4个参数要选择，不要使用下拉框更有利于用户体验。不要要求用户重复填写Email地址。
关于陪学网（）：我们6年来专注于产品管理类课程的开发与制作，志在为产品经理、交互设计、平面设计、需求人员分享最新、最好的产品类课程。学员遍布国内外知名互联网产品团队：百度、新浪、腾讯、领英等
设计网页表单 第3篇
这必须是在数据允许的情况下。水平分隔线能显著减轻长表格在垂直方向的视觉重量，加快数值的对比效率。
但如果在表格中使用适合的对齐方式，竖直分隔线就是多余的。它们最大的贡献就是缩减元素之间的距离，明确了单元格范围。即使要用垂直分割线，也要淡，不能妨碍快速浏览。
不使用斑马线，使用不同底色区分指示不同类型的数据是有必要的，但是用来区分同一类数据，斑马线在很多时候又是没有必要的，因为水平分割线已经明显区隔了。
省去分隔线，对于较小的，动态性较小的表，可以省去所有分隔线，并获得醒目的外观。当然，这更多是数据量不大且易分辨的情况。
设计网页表单 第4篇
表头对数据性质的归类。表头按惯例要对数据的简况做出反映，如被调查者的性别、年龄、学历、收入、家庭成员组成、政治背景、经济状况等。
表头的字段名称应当符合人们的思维习惯，保证用户理解。如果有需要解释，则在字段名称旁边加说明小图标(小问号)。
表头在这里也能指列行标签，是对所属行或列数据的描述。除了容纳行/列标签之外，表头也可以进行排序、搜索、筛选等。
设计网页表单 第5篇
对于数据批量操作的场景，建议将操作放到表格上方，与复选框操作配合使用。
批处理操作模式允许用户对一行或多行对象执行操作，并在选中复选框后激活表上方操作按钮，如删除、批准、拒绝、复制之类的操作，这将节省用户时间，避免重复对多行进行相同操作。
表格上方的所有筛选或搜索按钮可能会因操作按钮出现过多而暂时隐藏，如果空间限制导致操作按钮排列不下，则使用“更多操作”按钮。
设计网页表单 第6篇
四、不同输入框应该如何设计
讲完表单基本结构设计，下面来针对输入框来讲讲他们如何设计。
表单域包含以下内容有：
中文文本框，需要注意的就是基本的结构，针对自己产品业务所需要的，对标签、输入限制、占位符……等等做合适的设计。需要特别注意的是，标签，输入限制，占位符，多行文字规则。
其次就是对字体对属性调整，比如字体大小、行高等。
数字输入框
设计网页表单 第7篇
↘上标题下提示内容的表单
优点：标题、提示内容可以很长，预览速度快，可以加功能按钮（如附件和照片添加）。
缺点：占据垂直空间较大。
多用于信息内容填写和维修工单信息填写，可以减少页面跳转。
设计网页表单 第8篇
一般表格具有的颜色尽可能少。
颜色和可读性是密切相关的，要合理的使用颜色，普通表尽量使用简单的背景色和点缀色。
背景色方面，除了行/列交替颜色(可以区隔内容，引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法，还可以对表头表尾进行视觉区分，但不能增加过多颜色以引起混乱。
分割线颜色尽量不要与背景色相差太大。当字体选择深灰色，背景为浅白色时，边框选择浅灰色，这样可以减少我们视觉疲劳，不会使表格看起来令人生畏。
表头的优化
表头标签应该简炼准确，以达到节省表头空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。当然对于产品而言，先能把事情说清楚，再考虑文字的简洁性。
当数据结构比较复杂的时候，使用多级表头来体现表头与数据的层次关系，如下图：
当数据有看不懂或生僻的信息时，用户期望有人告诉他为什么会这样，就需要在表头标签后加上小问号，鼠标悬停弹出说明文字的提示框。
不需要表头：如果表格数据可以自我解释，表头就可以不需要。电子邮件的表格是一个好例子，邮件主题，发送者，发送日期都区别度高不会混淆的。
当然有的情况表头是不能去掉的，例如有两个不明确的日期，这时候你就需要定义一个表头。
行的优化默认排序
所有行按逻辑排序，比如按风险由小到大，将最安全的操作放最前面；或按照信息时间排序，由新到旧，以创建时间进行排序，即最新创建的排在最前面。
设计网页表单 第9篇
电话输入框有三个结构：国家/地区、区号、手机号。
不同国家地区区号不一样，而国家区号存在的意义就是为了筛选不同的区号，因为不是所有用户都能记住自己当地的区号。
美团的设计中，就很好的诠释了这一点。
没有直接的国家地区选择，而是在区号下拉框当中，给了每个区号国家地区作为用户区分。
我们接着聊一聊电话号码的输入问题。
在移动端，手机充值输入框内，电话号码需要自动填充，避免用户二次操作，但常见的手机充值业务，基本上已经大厂占据，用户 常用的也就那么几个产品，而这些产品也获取到了用户极高的信任。
但即使是这样，他们依旧没有采用直接填充的方式，而是在你输入过后会有历史记录，用历史记录填充，当你清除历史记录后，再次进入，依旧需要手动输入。
在这个信息透明的互联网时代，用户对自己私人信息的很看重。一个产品需要输入电话号码，不能直接做自动填充，即使你已经抓取到了用户的信息，也不要告诉用户你有他的信息，这一点很重要，如果你直接使用自动填充手机号，用户会觉得隐私泄漏，用户对这个产品信任感本就不足，这种做法会让用户信任感再一次降低。
但让用户手动输入，安全感得到了满足，却会增加用户的操作负担。
设计网页表单 第10篇
一般指空数据或零数据的情况，空白单元格容易造成用户困惑甚至误解，用户会搞不清楚到底是没有数据，还是数值为零？
正确做法是，对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下数据格式保持一致；对于没有数据的单元格，通常是用“－”表示。
B端后台数据类型较多，最好能为空数据做出释义，可以在“列标签”或底栏给出解释文案。
数据过多单元格的宽度根据列中字符的长短自动变化宽度，超过该列宽可以省略显示，末尾以”…”显示，鼠标悬停时出现气泡显示完整内容。
设计网页表单 第11篇
由于数据报表，往往需要满足各种不同的角色在不同场景下的需求，因而在表格数据显示上。
一般采取宁多勿少的原则，即尽可能提供详细的数据，由此会数据指标过多，难以在表内完整展示，导致需要水平拉伸，降低了表格的可读性。
针对上面这个问题上，可将所有的指标名称罗列在表格上方，并提供多选操作，在默认情况下仅展示最常用、最重要的几个指标（如下图）。
这样能让用户在表格上方看到所有指标名称，避免了原来需要水平拖拽而导致指标浏览不全的情况。其次，用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。
B端后台通常会对应不同的角色及不同的需求，可让用户根据自己的需求来定义表格的展示列及列的顺序。同时系统应记住用户上一次自定义列的设置。
控制行
控制行高：较小的行高让用户无需滚动页面就能查看到更多的数据，但可扫描性的效果易导致视觉迷失，这就是为什么许多成功的数据表设计包含了控制行高(显示密度)的功能。
树形表行也可以结构化分为不同的类别，前面提到了层级表/树形表，可以嵌套子表格，展开和折叠。
可操作按钮一般位于各级行标题左侧，具有独特的视觉效果并具有扩展或折叠的功能。单击表中的类别标题会在类别的展开或折叠状态之间切换。展开与折叠也将极大的影响行内容显示。
分页
分页可以将表内容信息划分成独立的页面来显示。
设计网页表单 第12篇
拖放似乎很简单，就是抓住某个元素把它放到另一个地方而已。
可是事实上，拖放过程涉及到了大量细节，在拖放期间，需要处理许多特定的状态。用户在拖动模块时，页面整体布局基本保持不变。
因为移动的不是模块，而是插入条。插入条指明了放置模块时的目标位置。常用于数据量较小，有拖曳排序需求的场景。又可以运用在多个表一起的情况。
穿梭表格就是多表格拖拽的情况。比如左侧的表格内容可拖拽至右侧列表框，同时支持表内上下拖拽更换位置顺序，也可直接选中对象在两栏中按钮移动，完成拖拽行为。
那如何让用户知道可拖拽呢？增加意向符号；改变光标样式；增加被拖拽对象临时性底色，突出显示。
如何让用户知道怎么拖拽到哪里？被拖入区域应增加插入位置符号，可以明确指出放置模块的目标位置，减少用户困惑，也可以对放置操作发生后的页面外观提前给出预览。
同时设计时考虑上下左右两个方向的拖拽运动分别可以触发什么结果，超出表格范围拖拽对象消失。
被拖动对象应呈现为轻微透明的样式？应该显示为完全不透明？或者改为使用缩略图表示？我认为这三种方法都可以。
透明效果也会让更多表格内容对用户可见，有助于用户预览最终放置后的结果。从而方便用户查看页面，也会表明该模块处于一种特殊模式中。透明可以表明相应被拖拽对象尚未定位，或者说正处于过渡状态。
表头排序：排序又分为降序和升序，比如，事件相关的表格，默认时间降序排列；风险相关的表格，默认安全降序排序。
表头排序可以辅助用户快速挖掘出需要关注的信息，发现数据信息之间的关系，一般可按数字大小、文字拼音顺序、字母顺序等其它数据特征进行排序。
如果表格中不是所有数据都能排序时，则需要标识出可排序操作的列，一般采用三角箭头做为标识，实时反馈当前操作状态。
控制表内容控制列