网页表单列表设计 第1篇
首先是这个文本框，文本框我们用到一个 input 标签，然后需要让这个它里面的 type 属性是 text，我们来看一下
是不是OK的，我们可以加点文字，可以让填写这个框的人知道，后面要填写啥
密码框，就是将上面的 input 框中的 type 属性修改成 password，我们再来看
这样我们输入的东西就看不到是啥了，都成黑点点了
复选框，就是有一堆的东西，然后你去选择几项，就和多选题类似，这里我们使用的是 input 标签 type 属性的 checkbox
可以看到啊，这个就可以多个勾选，到时候我们会说这个怎么去上传，如何区分
单选框和多选框类似，不过就能选择一个，这里使用的是 input 标签 type 属性是 radio
但是我们发现，这俩居然都被勾选上了，这里我要说一下，只有这个 属性是不够的，我们还需要一个 name 属性，让他们 name 属性相同
这样就只能勾选一个了。
下拉框就是有同样类型的一组选项，然后通过下拉框进行选择，选择其中的一个，这里我们是使用的是 select 标签，还有option
看，我们这样就能够选择学校了
这个和上面的内个文本框不一样啊，文本框和文本域相比，文本域写的东西会多一些，好比添加点简介啊啥的，我们都是使用的文本域
它是用 textarea ，我们来看一下
是吧，瞅着就不是一个等级的
网页表单列表设计 第2篇
创建表单，我们需要用到 FORM 标签，这个就是表单，我们打开 WebStorm 然后创建一个 case5 ，弄一个
然后我们创建一个表单
可以看到啊，很简单啊，就是写一个 form 标签就好了，重要的是我们 form 里面的一些内容，我们来看一下
网页表单列表设计 第3篇
我们都遇到过这样头痛的问题，当列表字段太多，一屏无法完全展示，这时应该怎么做？给表格设计一个左右滑动的滚动条？如果内容真的太多并且已经确定，这也未尝不是一种办法，但是，重新设计过表格的字段或许会更好，这个时候应该跟产品好好沟通了。有以下方法：
1、减少不必要的文字（如下图中表头的“全选”去掉）；
2、缩略内容或者用…省略后面内容，鼠标经过出现更多内容（如时间可以缩略后面的时分，鼠标经过出现具体时间）；
因为每个列表的宽度是可以拖动的，我们不能决定其固定的宽度，但每一行的高度可以设置一个值，建议所有元件的高度、宽度、间距的数值参数都设置为偶数。
那么问题来了，在响应式设计当中，可没有什么参数是固定的值，一般都是用百分比来设置。因为默认显示的数据条数在任何宽度的情况下仍然保持不变，因此当列表宽度缩小时，内容出现换行会增加高度而拉高整个列表的高度。值得注意的是，当其中一条数据的内容有出现换行而又有其他数据没有出现换行的时候，每一行的高度都应该按出现换行的且最高的高度保持一致，并且内容仍然保持垂直居中显示。另外，当前端做成这种响应式的列表时，一般不再让鼠标拖动列的宽度了。
同一组数据的不同宽度显示
当宽度拖到第三种情况，按钮也出现了换行，那每一行的高度都应该按照这个高度保持一致，即使有一些数据只有一个按钮/地址并没有出现换行，如图：
当然，如果你不想让内容出现换行，就可以用上面说的那三种方法来实现了。
不要再说为什么别人做的表格那么高大上，明明自己做的效果图还挺好看，为什么实现出来却那么丑，当你了解这里面的各种参数和逻辑，并且很好的跟前端沟通，参照以上规则，不管再复杂的列表都可以做的得心应手并且得以实现。
网页表单列表设计 第4篇
弹窗并不是后台的专利，它在移动端更高频率的出现，例如活动页面的弹窗，趣味性就显得更重要了。
总结：
这篇文章主要跟大家分享的是，当开始网页后台项目设计的时候，保持跟产品和前端的良好沟通。确定风格后开始设计，并分享了3个主要的点：
1、 制作灵活又简洁的表格
2、 设计整齐并带有交互功能的表单
3、 选择友好舒适的弹窗
后台还有其他元件设计，欢迎大家共同探讨。