Web前端技术开发（HTML5+CSS3+JavaScript）课件 第四单元 表单的应用

Web前端开发技术第四单元表单的应用掌握表单的概念及标记掌握表单控件，如信息输入<input>等的使用掌握表单标记和控件标记的属性设置多表单的使用表单控件的使用4.1表单标记4.2表单控件4.3HTML5表单数据内容变化

表单标记14.1表单标记表单的概念：

表单是网页中提供的一种交互式操作手段，在网页中的使用十分广泛。无论是提交搜索信息，还是网上注册/登录等应用都需要使用表单。基本语法：4.1表单标记语法说明：action属性用于提交表单数据的目的地址。method属性设置表单数据发送方式，有两种发送方式分别为GET方式和POST方式，默认表单发送方式为GET方式。enctype属性设置提交数据的编码方式，可选属性值如下表：表单控件24.2.1添加表单文本框添加单行输入的文本框，将type属性取值为“text”。基本语法：语法说明：

type的属性值设置为“text”；name属性定义该控件的名称，类似于设置了变量名；value属性中的值为文本框中输入的值，可预先进行设置，也可不设置，类似设置变量值的概念。当表单提交之后发送数据时，会以“名称=值”这样的值对方式发送出去。4.2.2添加密码域基本说明：语法说明：type的属性值设置为“password”；其他属性与单行文本框一致，一般name属性都会进行设置，在此不再赘述。基本说明：语法说明：

type的属性值设置为“radio”；设置checked属性表示单选按钮设置为选中状态，不设置则表示非选中状态。其他属性与文本框一致，在此不再赘述。4.2.3添加单选按钮基本说明：语法说明：type的属性值设置为“checkbox”；设置checked属性表示单选按钮设置为选中状态，不设置则表示非选中状态。其他属性与文本框一致，在此不再赘述。4.2.4添加复选框基本说明：语法说明：

type的属性值设置为“button”；value属性设置按钮在网页上显示的文本，未设置时浏览器会设置默认值。标准按钮大多数与JavaScript的事件相结合来启动脚本。4.2.5添加标准按钮基本说明：语法说明：

type的属性值设置为“submit”；value属性用于设置按钮在网页上显示的文本，未设置时浏览器会设置默认值。它与标准按钮的区别是当点击提交按钮会自动提交表单，但标准按钮什么都不会发生。4.2.6添加提交按钮基本说明：语法说明：type的属性值设置为“reset”；其他属性设置可参照4.2.5节中标准按钮的说明。4.2.7添加重置按钮基本说明：语法说明：

type的属性值设置为“image”；src属性为必要属性，用于指定图片源的地址；alt属性它为图像输入规定替代文本，为用户由于某些原因无法查看图像时提供了备选的信息；width属性设置图片的宽度。height属性设置图片的高度；border属性设置图片的边框。4.2.8添加图片域

在表单中插入隐藏域，它不会显示在网页上，对用户来说是不可见的，它常会存储一个默认值，该值也可以由JavaScript进行修改。基本说明：语法说明：

type的属性值设置为“hidden”。4.2.9添加隐藏域

在网页上文件域用于浏览并上传本地文件。基本说明：语法说明：type的属性值设置为“file”；form标记中需要设置“enctype=multipart/form-data”，否则无法提交数据。4.2.10添加文件域基本说明：语法说明：

<select></select>插入下拉列表，<option></option>插入列表项。

其中，<select>标记中的multiple属性规定可同时选择多个选项；size属性规定下拉列表中可见选项的数目；name属性定义该控件的名称。<option>标记中的value属性定义与选项相关联的值。4.2.11添加下拉列表

在表单中插入文字域，可用于编辑多行文本，使用<textarea></textarea>文字域标记。基本说明：语法说明：rows属性设置文本区内的可见行数；cols属性设置文本区内的可见宽度；rows和cols属性来规定textarea的尺寸；wrap属性文本区的换行模式，属性值如下表。4.2.12文本域标记

<label>标记为input元素定义标注的标记，该标记不会向用户呈现任何特殊效果，不过，它为鼠标用户改进了可用性。表现为在label元素内点击文本，就会触发此控件。就是说，当用户选择该标记时，浏览器就会自动将焦点转到和标记相关的表单控件上。基本说明：语法说明：<label>标记为双标记。该标记的for属性可把label绑定到另外一个元素（把"for"属性的值设置为相关元素的id属性的值），<label>标记的for属性应当与相关元素的id属性相同。4.2.13标记标签

HTML5表单数据内容变化3

HTML5新增了一种数据提交格式enctype=“multipart/form-data”，允许form的内容将会以XML的形式提交。这意味着数据的提交从单纯的线性字符串走向结构性的对象数据。基本说明：

服务器将接收到类似JSON这样的XML格式的表单数据。客户端传来的数据要用到多媒体传输协议，所以表单提交方式必须是post方式。4.3.1HTML5数据提交格式

在之前讲到的表单控件必须要放在<form></form>这对标记中，但在HTML5的标准下对form标记有了新的规范和约束，使得表单可以定向索引，提交方式也更加灵活。基本说明：

以上代码片段可以看出HTML5标准下可以使控件游离在form标记外，有助于用户不拘泥于页面的结构，可以在页面任意位置将数据提交出去。具体实现是基于input元素中form属性与form标记的id属性相绑定。4.3.2HTML5数据提交范围

新增了表单数据类型。input标记中type属性新增的取值如下表所示

4.3.3HTML5表

单

数

据

类

型

和

控

件

标

记

增

加

HTML5在表单属性和验证其合法性方面进行了规范，大大地节省了浏览器端的代码量，提交了代码效率，提高了安全性。1.必填项属性required。2.占位属性placeholder，即还未输入内容的input中默认显示的占位字符。3.数字类型控件提供最大值max和最小值min的设置。4.正则表达式属性pattern，定义比较复杂的规则。5.自动完成属性autocompl