第3章 表单 在网页中，表单的作用非常重要，主要负责采集浏览者的输入信息，例如常见的注册表、登录表、调查表和留言表等。表单是网页交互的基本工具，在网页的制作过程中，常常需要使用表单实现用户与服务器之间的信息交互。 本章学习重点：  了解表单的组成  掌握表单中常用的控件  熟练使用表单元素布局表单 10min 3.1表单的基本结构 HTML表单的主要作用是接收用户的输入，从而能采集客户端信息，使网页具有交互功能。当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互，如图31所示。 图31网页的交互性 在HTML中，一个完整的表单通常由表单标签(
)、表单域和表单按钮3部分构成，如图32所示。 图32表单的组成部分 (1) 表单标签()： 标签用来创建表单，包含所有表单对象。标签包含处理表单数据的各种属性，如表单的提交路径、提交方式等。 (2) 表单域(、

密码:

图33用户登录表单 在浏览器中的显示效果如图33所示。 在上述代码中，由 form 元素创建了一个表单，表单中包括用户名、密码输入型控件和登录按钮。 9min 3.2表单标签
在HTML中，标签被用于定义表单，相当于一个容器，表示其他的表单标签需要在其范围内才有效，即在
之间的一切都属于表单的内容。 创建表单的基本语法格式如下：
//各种表单域
标签包含很多属性，这里重点介绍3个常用基本属性： action、method和enctype。 (1) action： 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的URL网址。当设置action="#"时，表示提交给当前页面。 (2) method： 用于设置表单数据的提交方式，常用的两种方式为get和post。  get方式传输的数据量少，执行效率高。当提交数据时，在浏览器网址栏中可以看到提交的数据，安全性不好。  post方式传输的数据量大，在浏览器网址栏中看不到提交的数据，适合传输重要信息，安全级别相对较高。在进行数据添加、删除等操作时可以设置为post方式。 (3) enctype： 用于规定表单数据发送时的编码方式，有以下3种属性值。  text/plain： 主要用于向服务器传递大量文本数据，比较适用于电子邮件的应用。  multipart/formdata： 上传二进制数据，只有使用了multipart/formdata才能完整地对文件数据进行上传操作。  application/xwwwformurlencoded： 是其默认值。该属性主要用于处理少量文本数据的传递。在向服务器发送大量的文件包含非ASCII字符的文本或二进制数据时效率很低。 提示： 在实际网页开发中通常采用post方式提交表单数据。 3.3表单控件 表单域和表单按钮都属于表单控件。 16min 3.3.1输入标签 标签为单标签，type属性为最基本的属性，根据其属性值的不同可以显示多种表单元素样式，如单行文本框、密码框、单选和复选框等。除了type属性之外，标签还有一系列属性用于表单输入控件的设置，如表31所示。 表31标签的常用属性 属性属性值描述 type text单行文本输入框 password密码输入框 radio单选按钮 checkbox复选按钮 submit提交按钮 reset重置按钮 button普通按钮 image图像形式的提交按钮 file文件上传控件 hidden隐藏域 name自定义名称指定表单元素的名称。如果没有写name属性值，则表单组件的数据不能被正确提交 value文本值元素的初始值 size数值指定表单元素的初始宽度 maxlength数值指定输入框中输入的最大字符数 checkedchecked当type为radio或checkbox时，指定按钮是否被选中 disableddisabled指定加载时禁用此元素 readonlyreadonly将文本框内容指定为只读 标签的常见语法格式如下： 1. 单行文本框 在标签中，当type的属性值为text时表示单行文本框，这也是type属性的默认值。单行文本框也是使用最多的，例如登录时输入用户名、注册时输入电话号码、输入电子邮件、输入家庭住址等。 语法格式如下： 单行文本的name属性值必须是唯一的，可以使用size属性将文本框可见字符的宽度为设置20，使用maxlength属性设置最多允许输入10个字符。在默认情况下，单行文本框首次加载时内容为空，可以为其value属性预设初始文本，示例代码如下： 2. 密码框 在标签中，当type的属性值为password时表示密码输入框，此时输入的字符会被密码专用符号所遮挡，以保证文本的安全性。 语法格式如下： 使用标签中的text和password类型生成简易表单页面，如例32所示。 【例32】简易表单页面 简易表单页面 姓名：
身份：
密码：
图34简易表单页面 在浏览器中的显示效果如图34所示。 3. 单选框 在标签中，当type的属性值为radio时表示单选框，其样式为空心圆圈。 语法格式如下： (1) name： 单选框的名称，需要注意的是一组单选按钮组中，name值必须相同，即单选按钮组同一时刻只能选择一个。 (2) value： 表单元素在提交数据时传递的数据值。value必须指定一个值，因为单选框是通过用户选择的，而不是需要用户手动输入的值。 多个单选按钮可以组合在一起使用，为它们添加相同的 name 属性值即可表示这些单选按钮属于同一个组，示例代码如下： 女 男 单选按钮可以使用checked属性设置默认选项。checked属性的完整写法为checked="checked"，可简写为checked。如果没有使用checked属性，则在首次加载时所有选项均处于未被选中状态。 女 男 注意： 只能为单选按钮组中的一个选项使用 checked 属性。 4. 复选框 在标签中，当type的属性值为checkbox时表示复选框，复选框也叫多选框。 语法格式如下： 多个checkbox类型的按钮可以组合在一起使用，添加相同的name属性值，表示这些复选框属于同一个组，即使在同一个组内复选框也允许多选。value属性值作为提交表单时传递的数据值，示例代码如下： 足球 羽毛球 篮球 乒乓球 复选框也可以使用checked属性设置默认被选中的选项，与单选框不同的是，它运行多个选项同时使用该属性，示例代码如下： 紧凑型 中型车 SUV 主打车 使用单选框和复选框构建汽车之家注册页面，如例33所示。 【例33】汽车之家注册页面 汽车之家注册页面

注册后，可以使用汽车之家和二手车之家的相关服务

手机：

密码：

性别:男 女
请输入你喜欢的车型:紧凑型 中型车 SUV 主打车


在浏览器中的显示效果如图35所示。 图35汽车之家注册页面 5. 提交按钮 在标签中，当type的属性值为submit时表示提交按钮。用户在单击按钮时，会将当前表单中所有的数据整理成名称(name)和值(value)的形式进行参数传递，提交给服务器处理。 语法格式如下： 6. 重置按钮 在标签中，当type的属性值为reset时表示重置按钮，用户单击后可以清除表单的内容。 语法格式如下： 注意： 当按钮没有设置取值时，该按钮上默认显示的文字为“重置”。 7. 普通按钮 在标签中，当type的属性值为button时表示普通按钮，value值为按钮上显示的文本。 语法格式如下： 普通按钮一般情况下要和JavaScript配合使用。例如，为按钮添加单击事件，当用户单击时跳转到百度页面，示例代码如下： 8. 图片提交按钮 在标签中，当type的属性值为image时表示图片按钮，其样式来源于自定义图片，使网页色彩更加丰富，如果使用默认的按钮形式，则往往会觉得单调。 语法格式如下： 表单按钮应用，如例34所示。 【例34】表单按钮应用 表单按钮应用
姓名：
密码：
在浏览器中的显示效果如图36所示。 图36表单按钮应用效果 当单击提交或图片按钮时会跳转到百度页面。输入的信息数据以“name 值=value值”(键值对)形式提交于服务器中，如username=admin。 注意： 表单控件要想正确提交，必须设置 name 属性。用户在控件中输入的数据默认会赋值给value属性。 9. 文件上传 在标签中，当type的属性值为file时表示文件上传，使用户可以选择一个或多个元素以提交表单的方式上传到服务器上。 语法格式下： 除了 标签共享的公共属性，file 类型的 标签还支持下列属性，如表32所示。 表32file类型的标签支持的特有属性 属性描述 accept一个或多个期望的文件类型 capture捕获图像或视频数据的源 filesFileList 列出了已选择的文件 multiple布尔值，如果出现，则表示用户可以选择多个文件 file类型的 标签特有属性详解。 (1) accept： accept 属性是一个字符串，它定义了文件 input 应该接受的文件类型。示例代码如下： (2) capture： capture属性指出了文件input是图片还是视频/声频类型，如果存在，则请求使用设备的媒体捕获设备(如摄像机)，而不是请求一个文件输入。 (3) files： FileList对象列出每个已选择的文件。如果 multiple 属性没有指定，则这个列表只有一个成员。 (4) multiple： 当将布尔类型属性指定为multiple时，文件 input 允许用户选择多个文件。用户可以用他们选择的平台允许的任何方式从文件选择器中选择多个文件。如果只想让用户为每个 选择一个文件，则可省略 multiple 属性。 注意： 当表单中包含文件域时，form元素的method属性必须设置为post，enctype属性必须设置为multipart/formdata。 接下来看一个完整文件上传的示例，如例35所示。 【例35】多格式文件上传应用 多格式文件上传应用
图片格式文件：
Word格式文件：
所有格式文件：

在浏览器中的显示效果如图37所示。 图37多格式文件上传应用效果 10. 隐藏域 在标签中，当type的属性值为hidden时表示隐藏域。在页面中对用户不可见，它包含的信息也被提供给服务器。 语法格式如下： 在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。用户单击“发送”按钮发送表单时，隐藏域的信息也被一起发送到服务器。有时我们要给用户一些信息，让他在提交表单时确定用户的身份，如例36所示。 【例36】隐藏域的应用 隐藏域的应用
用户名：
密 码:
在浏览器中的显示效果如图38所示。 图38隐藏域的应用效果 14min 3.3.2标记标签 标记标签