HTML表单标签编写用户注册页面

小伙伴们不好意思，说好的问卷调查改为用户注册页面了。因为苏莱发现，问卷调查无法覆盖我们必须要掌握到位的所有知识点，相信你们不会怪苏莱的吧

恩，我们来看看，今天要写的用户注册页面是什么样子的吧~

现在虽然有点丑，但后面我们学了 CSS 样式之后，就可以将它装扮得很漂亮了。

其实制作原理很简单，掌握好HTML表单你就可以写出同样的效果啦~

那现在我们来看一下HTML 表单到底是什么吧？

表单是一个包含表单元素的区域，用于收集不同类型的用户输入信息，提交给后台服务器中对应的地址。表单使用表单标签 来设置，所有需要提交到服务器端的表单项必须使用 包起来。

了解完 HTML 表单的概念，我们来认识一些具体的表单标签吧~

标签

标签是表单的外壳，常用的两个属性：

1）action：表单提交的地址。制订了某个服务器脚本来处理被提交的表单，如果省略action属性，则action会被设置为当前页面。

2）method：规定了提交表单的http方法，默认GET，GET最适合少量数据且不需要保密的提交，使用GET时表单数据在页面地址栏中是可见的。设置为POST，安全性更佳，因为在页面地址栏中被提交的数据不可见。

标签

不会在页面展示任何效果，该标签的作用是为其他标签提供标注信息。

标签

标签用于搜集用户信息，根据不同的type属性值，输入字段拥有很多种形式，可以是文本字段、复选框、掩码后的文本控件、单选按钮等。

input 标签内的常见属性以下几种：

1）name 属性：

规定元素的名称；

2）type 属性：

规定要显示的 元素的类型；常见 type 属性值：

① 文本输入框：text" />

② 密码输入框：password"/>

③ 上传文件：file"/>

④ 单选按钮：radio" />

⑤ 多选按钮：checkbox" />

⑥ 邮箱：email" />

⑦ 日期：date" />

⑧ 提交按钮：reset" value="提交"/>

⑨ 重置按钮：submit" value="重置"/>

⑩ 普通按钮：button" value="普通按钮"/>

3）value属性：

规定 元素的初始值；

4）placeholder属性：

规定可描述输入 字段预期的简短的提示信息；

5）checked属性：

规定在页面加载时，应该被预先选定的元素（只针对type="radio"或type="checkbox"）；

6）accept属性：

规定通过文件上传来提交的文件类型（只针对type="file"）。

以上几个标签，在本例中使用效果如下所示，左侧为代码右侧为对应效果。

标签

定义一个多行的文本区域，可容纳无限数量的文本。可以通过 cols 属性和 rows 属性来规定 textarea 的尺寸大小，但当我们学到 CSS 后，建议使用 height 属性和 width 属性。小伙伴们，你可以通过下面这张图片加深对该标签的理解。

标签

标签

标签定义一个下拉选项列表。

标签定义下拉列表中的选项，需要与 标签一起使用，否则没有意义。小伙伴们，你可以通过下面这张图片加深对该标签的理解。

标签

定义一个按钮。与 标签 创建的按钮的不同之处在于，使用 标签创建的按钮，按钮内部可以放置内容，比如：文本或图片。小伙伴们，你可以通过下面这张图片加深对该标签的理解。

好啦

以上就是今天的全部内容啦~

大家快动手试试吧~

下期预告

解密国内大型网站导航栏制作原理

小伙伴们，

加小编微信，

来领取前端学习资料吧~