如何制作一个web表单（web创建一个表单） - 杂七乱八

本篇文章给大家谈谈如何制作一个web表单，以及web创建一个表单对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、Web表单设计—点石成金的艺术（一）
2、怎样设计网页表单？
3、怎样设计以用户为中心的WEB表单？
4、如何制作可自动刷新的web报表

Web表单设计—点石成金的艺术（一）

最近在读《 Web表单设计—点石成金的艺术》一书，颇受启发。而且该书目前已经买不到了，好像二手书也买不到，特意找了pdf扫描版来读，读书过程中的一些感悟跟大家分享。

一、表单的设计

大多数人都不喜欢填写表单，这也就说明了应该关注优秀表单设计。

而很多的特定数据来源都提供了衡量表单设计影响的方式：

（1）可用性测试（观察人们与表单如何交互）

（2）实地测试（从人种学角度观察人们在家中或办公室中与表单互动的情况；）

（3）客户支持（了解客户填写表单时遇到的问题）

（4）网站追踪

（5）眼动跟踪（记录人们如何理解表单的表现形式）

（6） Web惯例（即查看该问题的通用解决模式，可理解为分析竞争对手的解决方案）

二、表单的组织

类似标签后面是否要防止冒号的问题，用户真的不关心。用户关心的是问题内容和所问的原因。

有些字段需要告诉用户填写的原因（为什么问这些问题，能为用户带来的好处），如果不能回答，就要考虑是否真的需要这个字段。

表单所提的问题即标签要尽量的简洁清晰。

如果简洁的标签容易引起用户的误会，应该尝试使用自然语言的方式。

表单较长或较复杂时应考虑对表单内容进行分组，有助于浏览和快速完成填写。

有些时候很多问题需要按顺序回答，否则回答就没有意义。这时候人们需要看到所有问题，一个较长的网页是好的解决方案。通常这些问题会和一个主题相关。

有些可选问题在表单填写完成后再问比较好，如“您如何知道我们”或者“您想进一步了解我们吗”。这样会比初始表单就提问能获得更多的答案。

可以通过Web惯例调查，比较相似网站的设计方案，引导发现网上已经形成的常见表单组织结构，但是也要结合自身情况不要只停留在简单复制竞争对手。

对表单进行分组时，每个内容组都从视觉上区别于表单的其余部分，但是对比太多也可能造成视觉污染，阻碍人们浏览表单。

信息设计专家爱德华,托佛特认为，信息由产生作用的差异构成，任何无助于布局的页面元素都会损坏布局。采用最好的必要视觉信息来区分内容组。

英文网站，标签首字母应当大写，使内容组更容易浏览。

最后，祝大家六一儿童节快乐！永葆童心~

如何制作一个web表单（web创建一个表单）,如何制作一个web表单,账号,信息,绿色,第1张

怎样设计网页表单？

一、表单概述表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。 1、表单的组成一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点： 1.1 表单标签＜form＞＜/form＞

怎样设计以用户为中心的WEB表单？

我们几乎每天都会接触形形色色的表单，登录账号、填写信息以获取服务、发布内容等。然而填写表单的过程往往不是特别愉悦的，我们需要消耗时间输入信息，点击提交，可能还需要等待审核；尤其是碰到较为复杂、流程长的表单，如果用户体验较差，很容易让人产生挫败感，在中途选择放弃。

那么，如何提高用户填写表单的效率，防止他们出错或中途流失，提升愉悦度及转化率呢？本文就web表单设计，总结了以下的一些方法：

有效的说服用户进行填写

首先，告知用户为什么要填写表单，他能获得什么，让用户看到把信息给你的好处。举个例子，GitHub在其注册表单的右侧清晰的告诉你注册使用它会得到的帮助：

除了告诉用户填完整个表单可以得到什么好处，你还可以更具体一点，告诉用户你让他填写某一项信息是出于怎样的考虑。

有效的说服用户填写表单，还需要剔除负面干扰，获取他们的信任。大多数情况下，用户对于填写表单的最大顾虑是信息被网站收集之后的用途。用户不希望源源不断的收到垃圾推销邮件，更不希望自己的隐私信息被公之于众。此时，你可以通过引用一些具有影响力的权威人士的承诺，或者展示一些具有公共效应的证据，如媒体报道、用户案例等。

你还可以做的更贴心一些，告诉用户填写表单预计需要花费的时间。

合理组织信息

对于较为复杂、填写项多的表单，如果不对信息进行组织，很容易显得繁杂混乱，让用户在一开始就产生抵触的情绪，甚至选择放弃。合理有层次的组织信息，可以利用框线、空间间隔、颜色的不同，按照不同信息的类别、属性和相关性进行区块的划分，用步骤条指示当前的进程。

一般来说，通知为蓝色，警告为黄色，错误为红色，成功确认为绿色。

清晰的浏览线，合理的标签、提示文字及按钮的排布，避免不必要的信息重复出现，能够降低用户的视觉负担和物理负担。

恰当的隐藏信息能够使表单看起来更加清爽怡人，有些信息可以设置在需要进行相关操作时才出现。

区分一级动作和二级动作。用按钮定义一级动作，用链接定义二级动作，或者相对于二级动作按钮来说，赋予一级动作按钮更为明显的风格。

为用户节省时间

需要花大量时间填写的表单容易让人失去耐心，用户是懒惰而繁忙的，试着删去所有不必要的填写项，考虑除了让用户机械的通过键盘在表单上输入数据外，还有没有别的更优方式（如后续进行用研调查）收集所需信息。

验证码永远是表单上让用户头疼的填写项之一，他需要等待验证码的生成、确认验证码的内容、确保验证码输入正确，才能点击提交，而这整个过程对他来说并无实际价值，用户不会因为多填写一次验证码而得到额外的奖励。我们可以通过改变输入验证码的体验，使其变得更简单有趣，或者通过新的后台逻辑限制用户每日提交次数等行为来取缔验证码。

目前，很多国外的主流网站，如Facebook、Twitter、LinkedIn、Friendster等在填写注册表单时都不要求用户确认密码。WordPress甚至连都不需要用户填写，而是将密码直接发送至用户的邮箱。

除了上面这种简单粗暴的方式以外，首次输入密码时使用明文确认同样可以节省二次输入密码的时间，出于信息安全的考虑，需支持有需要的用户随时切换成暗文显示。以下是笔者收集的几种明文确认密码的方式，可供参考：

鼠标点击、拖拽操作相对于键盘输入来说是更加有效率的方式。通过添加选取器、快捷选项、智能联想、range滑块、number微调等方式让用户可以更快速的完成表单。

慎用下拉框。由于下拉框会对用户造成信息的隐藏，需要而外的操作才能显示，更适合用在选择日期、省份等可选范围较大的地方。对于数目有限且重要的选项来说，使用更明显的选择方式更合适。

放宽对用户输入的要求，包括格式、大小写等。让你的系统更灵活而非让用户为了你改变他们的输入习惯。

错误预防。进行有效的即时校验，让用户能及时修改、补充缺漏的信息；另外，我们还可以通过限制用户的行为（如在预定机票时返回时间无法选择出发时间之前的日期，出发城市不能跟到达城市一样等），或提供自动修正的方式来预防用户犯错。

通过提供更加积极的交互反馈、预置文字、自动获取信息、自动修改格式、补全小数点等方式，使你的表单变得更聪明。

如当用户输入信用卡号码时，能够自动判断用户使用的是哪种信用卡。

当用户输入手机号码时，能够判断出其归属地。此时如果用户输错号码，会更容易被发现。

当用户选择了所在地区后，自动填充邮政编码。

当用户输入银行账号时，自动空格间断。

当用户输入金额时，自动补充小数。