项目展示
个人页面留言板如图19.1所示，英语协会注册页面如图19.2所示。
图19.1 个人页面留言板制作
图19.2 英语协会注册页面
教学内容
1. 认识表单
生活中的表单，如高考报名需要填写报名信息表，如图19.3所示。表单的作用是为了收集用户信息。在网页中，也需要跟用户进行交互，以收集用户资料，此时也需要表单。
图19.3 高考报名填写表单
2. 表单的组成
在HTML中，一个完整的表单通常由：表单控件（也称为表单元素）、提示信息、表单域3部分构成，如图19.4所示。
图19.4 表单组成部分
（1）表单域。一个包含表单元素的区域，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
（2）表单控件。包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
（3）提示信息。一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
3. 表单域
表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：〈form action="url地址" method="提交方式" name="表单名称"〉
各种表单控件
〈/form〉
如：〈form action="demo.php" method="POST" name="login"〉
〈/form〉
常用属性：
action：在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method：用于设置表单数据的提交方式，其取值为get（保密性差，有数据量限制）或post（匿名提交，不限数据量）。
name：用于指定表单的名称，以区分同一个页面中的多个表单。
注意：每个表单都应该有自己表单域。
4. 表单控件
文本框和密码框
单复选框
表单按钮
（1）input 控件（重点）。
〈input /〉标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除type属性外，〈input /〉标签还能定义很多其他的属性，属性如表19.1所示。
表19.1 input控件
radio单选框，如果是同一组，必须给它们命名相同的名字name，如：(www.xing528.com)
男 〈img src="imgs/nan.png" height="20" alt=""〉
〈input type="radio" name="sex" id="" checked="checked"〉
女 〈img src="imgs/nv.png" height="20" alt=""〉
〈input type="radio" name="sex" id=""〉
注意：
name和value是每个表单元素都具有的属性值，主要给后台人员使用。要求单选按钮和复选框同一组的name值必须相同
（2）表单控件。
① submit提交按钮，可以把表单域form里面的表单元素值提交给后台服务区，submit默认内容是提交，可以通过value值修改按钮文字。
如：〈input type=“submit”value=“登录”〉
② reset重置按钮，可以还原表单元素的初始默认状态，默认文字为重置，可以通过value值修改按钮文字。
③ button普通按钮，搭配JS使用，不会提交数据，比如：
④ file点击可以选择文件，上传文件。
如：〈input type = "file"〉
⑤ label 标签为 input元素定义标注（标签）。
作用：用于绑定一个表单元素， 当点击label标签的时候， 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢？
for 属性规定 label 与相关表单元素id属性绑定。〈label for="male"〉Male〈/label〉
〈input type="radio" name="sex" id="male" value="male"〉
⑥ 下拉菜单。使用select控件定义下拉菜单的基本语法格式如下：
下拉列表和表单域
注意：
·〈select〉〈/select〉中，至少应包含一对〈option〉〈/option〉。
·在option 中定义selected =" selected "时，当前项即为默认选中项。
⑦ textarea控件（文本域）。如果需要输入大量的信息，就需要用到〈textarea〉〈/textarea〉标签。通过textarea控件可以轻松地创建多行文本输入框（图19.5），其基本语法格式如下：
〈textarea cols="每行中的字符数" rows="显示的行数"〉
文本内容
〈/textarea〉
图19.5 表单多行文本框
（3）新增input type属性值，如表19.2所示。
H5新增属性
表19.2 input新增属性
可参考：https://www.h5anli.com/articles/201605/newinput.html
（4）表单新增属性值如表19.3所示。
表19.3 表单新增属性
项目训练
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
