注册表单布局html代码-用户注册表单代码html 收藏 0

前端入门——html 表单

前面已经学习相关html大部分知识，基本上可以制作出简单的页面，但是这些页面都是静态的，一个网站如果要实现用户的互动交流，这时表单就起到关键的作用，表单的用途很多，它主要用来收集用户的相关信息，是网页具有交互的功能。例如，用户注册登录，留言等。

下面会详细介绍表单的使用方法，有以下内容：

• 表单标签form的使用
• 表单控件使用

使用<form></form>标签来创建一个表单，在其之间就是各种表单控件，如，输入框，文本框，单选按钮，多选按钮，提交按钮等。

语法代码如下：

1、action —— 处理程序

这里的 action 属性值表单提交的地址，就是表单收集好数据后要传递给远程服务的地址，其地址可以是绝对路径也可以是相对路径，或者其它形式，如发送电子邮件。

使用表单发送电子邮件：

提交到后台程序地址：

2、name —— 表单名称

表单名称，这一属性不是必需的，但是为了防止表单信息提交到后台处理程序时发生混乱，一般要设置一个名称，且在同一页面中最好是唯一的，不要和其它表单重复命名。

3、method —— 传送数据方法

method 属性用来定义处理程序使用那种方法来获取数据信息，常用的有 get 和 post （http 协议定义的方法）。

何时使用 GET？

GET 最适合少量数据或不是很重要数据的提交，浏览器会设定容量限制，默认如何没有设置method 属性，表单则会使用get 方法。

当您使用 GET 时，表单数据在页面地址栏中是可见的，会在表单提交的地址后面跟一个问号“?” ，问号后面是数据，以 名称1=值1&名称2=值2 形式发送到后台程序。

地址栏会看到如下：

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL

永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）

URL 的长度受到限制（2048 个字符）

对于用户希望将结果添加为书签的表单提交很有用

GET 适用于非安全数据，例如 Google 中的查询字符串

何时使用 POST？

使用post 表单数据和url（表单提交地址）是分开发送的，在页面地址栏中被提交的数据是不可见的，这样安全性更好，用户端会通知服务端获取数据，所以这种情况没有数据长度的限制，缺点是速度会慢些。

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）

POST 没有大小限制，可用于发送大量数据。

带有 POST 的表单提交后无法添加书签

4、enctype —— 编码方式

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

有以下几种值：

5、target —— 目标显示方式

target 属性规定在何处打开 action URL。表单的目标窗口通常用来显示表单返回的信息，例如是否成功提交了表单，是否出错等。

属性值有以下：

看到这里是不是想的了之前学习超链接时候，a标签也有同样的属性，这里差不多一个意思，只是用途不一样。

这里的窗口有可能是框架 frame 或 浮动窗口 iframe ，后面会讲到框架和浮动窗口，就是在一个页面中可以嵌套一个子窗口。

什么是表单控件，就是收集数据的各种形式控件，比如输入框，密码框，单选、多选按钮，下拉菜单，文本域，文件域，提交按钮等等。

如下代码：

效果如下：

这里显示了一个基本表单，包含了输入框，密码框，单选，下拉菜单，文本域等组件，下面会按其使用类型介绍表单控件。

所有表单控件都一个name属性和vaule属性，用于和其它控件区别，后台程序将会以此名称获取其表单控件对应的vaule值。

下篇会介绍各种表单控件的使用，感谢关注。

上篇：

下篇：

网页表单你设计对了吗？

数十万互联网从业者的共同关注！

微信公众号：百度多酷UED（ID : baidu_dkued）

欢迎投稿到早读课，投稿邮箱：mm@zaodula.com

当设计问题具体到网页表单设计上面，又有着怎样的原则呢？网页表单你设计对了吗？

先来看一个例子。下图是美国航空安全委员会网站的投诉页面，奇怪的是，我们只能找到“预览”和“清空表单”两个按钮。实际上“提交”按钮单独位于表单下方，但这明显不符合我们的常规逻辑，我们一般会习惯右下角是“提交”按钮。因此，用户在网页发布投诉时经常会不小心把内容清空掉，不管这一设计是不是故意为之，它的确减少了用户的投诉数量。

好的表单设计可以让用户更快更准确地完成一个表单。研究表明，当表单设计遵循基本的可用性原则时，用户准确填写所用的时间几乎比填写不遵循可用性原则表单所用的时间少一倍。

那怎样的表单才是好的设计呢？这可能会跟许多因素有关，比如表单长度，表单内容，以及要收集的数据等，实际设计中要根据具体情况来分析。但以下几条基本的可用性原则可以帮助你避免很多问题。

1.保持简短

这一原则对许多事物都适用。缩减不需要的内容需要一些时间，但这样可以减少用户的负担，加快用户的完成速度。要减少(a)可以由其他方式收集到的内容，(b)未来更容易收集到的内容，以及(c)直接省略一些内容。当你减少表单长度时，表单的转化率会增加，这有着很重要的商业意义。

2.标签和输入框相对应

标签应该靠近它对应的输入框，在移动端可能是在输入框的正上方，在PC端可能是和输入框并列一行。一定要避免那些容易引起歧义的间距，比如标签和两个输入框之间距离相同。如果是想要询问两个不同主题的内容，应该划分成两个分开的输入框。

3.输入框对齐

输入框位于多列会打破表格的垂直动量。要让所有的输入框对齐到同一列，而不是让用户来适应凌乱的布局。

4.按照逻辑排序

在表单标签顺序和选项顺便排列上应该按照逻辑顺序，比如“姓名，性别，手机号……”或者是“一日游，两日游，三日游……”。当然，这里也要考虑用户的使用频率，尽量把用户选择最多的选项放到前面。

上图是星巴克的一款手机APP，可以让用户自助点单。但是最下面一栏的Full Decaf选项被放到了最右侧，需要滑动才能看到。如果 Full Decaf是用户使用比较多的选项，它应该被放在最左边才对。

5.避免占位文本

设计师通常喜欢用占位文本因为这样可以有较好地视觉效果。但是占位文本通常会导致很多额外的问题，我们应该尽量避免。

6.输入形式和输入内容相匹配

如果只有两三个选项，就不要用下拉列表，直接用单选按钮比较合适。文本输入框的大小应该和所需要的文本输入长度相匹配。比如姓名一栏一般不会超过四个字，手机号码通常是11位等。

7.区分可选的和必填的内容

首先，根据第一条原则，我们要尽可能地减少可选项。如果有一些内容确实是必要的，但只适用于一部分用户，要给出说明，不要误导大部分用户。将表单中的可选项限制到一个或两个，并且明确标记出它们是可选填的。

8.说明输入或格式要求

如果某个输入需要特定的格式或内容，要给出确切说明。不用让用户去猜你的要求。如下图的网站在用户密码格式错误之后才给出准确要求，这显然违反了这一原则。正确的做法应该是在用户输入的时候就给出详细的格式要求。

9.避免重置和清除按钮

重置或清除所写内容经常会给用户带去不必要的麻烦。如果是在收集敏感信息，比如财政信息的表单中，我们应该为放弃填写并且希望删除个人信息的用户提供一个“取消”按钮。但是也要注意“取消”按钮应该比“提交”按钮在视觉上更不明显一点，以避免意外地点击。

10.提供可见的和具体的错误信息

我们应该通过多种方式来提示用户错误，不仅是颜色，还可以加粗字体，画出错误区域等，以此来保证用户没有忽略错误错误信息。在这件事上不能太含蓄。并且，用户之前的错误输入我们应该保留下来，这样可以方便用户的修改。

本文翻译并整理自Nielsen Norman Group，原作者KATHRYN WHITENTON。

版权声明：早读课文章均来自作者投稿或者授权文章，部分文章为转载均尽量注明作者和来源，文章版权归作者所有，若涉及版权问题，请添加momo微信：qqj5211314，感谢。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com