html5表单怎么创建（HTML5表单和表单控件的使用）

html5表单怎么创建（HTML5表单和表单控件的使用）表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。2 文本和密码框表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

第一阶段 HTML508 表单和表单控件

1 表单的作用

表单标签input（掌握）

表单目的是为了收集用户信息。

在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

2 文本和密码框

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input（表单控件）

input/标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，input/标签还可以定义很多其他的属性，其常用属性如下表所示：

3 单选按钮和复选按钮

上图中 性别为单选按钮radio，爱好为复选按钮checkbok。

空格注意全角和半角。

4 默认选中表单属性

checked="checked"

默认已选的。

5 input按钮组

6 最多字符和文本值

maxlength=“6”正整数控件 允许输入的最多字符数。

value=”请输入您的姓名” value可以作为文本值。

7 label标签

for可以使光标放置在指定的框，for=”2”就是默认光标在第二个框。

8 文本域

textarea控件（文本域控件）

如果需要输入大量的信息，就需要用到textarea标签，框内文字可以换行。

9 下拉菜单

使用 select控件定义下拉菜单的基本语法格式如下:

注意：

1 select和/select中至少应包含一对 option和/ option。

2 在 option中定义 selected=" selected"时 当前项即为默认选中项。

10 表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

常用属性：

1 Action在表单收集到信息后，需要将信息传递给服务器进行处理， action属性用于指定接收并处理表单数据的服务器程序的url地址。

2 method用于设置表单数据的提交方式，其取值为get或post。

3 name用于指定表单的名称，以区分同一个页面中的多个表单。

注意：每个表单都应该有自己表单域。

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《09HTML5 新增标签和属性》小伙伴们不要错过哟！