1、HTML5+CSS3网页设计基础第9章 表单第1页第九章第九章 表单表单本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础第9章 表单第2页本章概述本章概述l表单是表单是HTML网页中的重要元素，是允许用户输网页中的重要元素，是允许用户输入信息的区域。用户输入信息后，将信息发送给入信息的区域。用户输入信息后，将信息发送给服务端程序处理，从而实现网上注册、登录、交服务端程序处理，从而实现网上注册、登录、交易等多种功能。本章将对表单控件和属性及其用易等多种功能。本章将对表单控件和属性及其用法进行详细讲解法进行详细讲解。HTML5+CSS3网页设计基础第9章 表单第3页本章的学习目标本
2、章的学习目标l了解表单功能，能够快速创建表单。了解表单功能，能够快速创建表单。l掌握表单相关元素，能够准确定义不同的表单控件。掌握表单相关元素，能够准确定义不同的表单控件。l掌握表单样式的控制，能够美化表单界面掌握表单样式的控制，能够美化表单界面。HTML5+CSS3网页设计基础第9章 表单第4页主要内容主要内容9.1 表单标签表单标签9.2 表单元素表单元素9.3 用用CSS控制表单样式控制表单样式9.4 实实训训9.5 本章小结本章小结 HTML5+CSS3网页设计基础第9章 表单第5页9.1 表单标签表单标签在在HTML中中标签用来定义表单，即创建一个表单。标签用来定义表单，即创建一个表
3、单。表单中可以包含多个表单元素，用来实现用户信息的收集和传表单中可以包含多个表单元素，用来实现用户信息的收集和传递。创建表单的基本语法格式如下。递。创建表单的基本语法格式如下。各种表单元素控件各种表单元素控件标签中常用属性的含义如下。标签中常用属性的含义如下。HTML5+CSS3网页设计基础第9章 表单第6页9.1 表单标签表单标签lname属性：给定表单名称，表单命名之后就可以用脚本语属性：给定表单名称，表单命名之后就可以用脚本语言言(如如 JavaScript或或 VBScript)对它进行控制。对它进行控制。laction属性：指定处理表单信息的服务器端应用程序。属性：指定处理表单信息的
4、服务器端应用程序。lmethod属性：指定表单数据的提交方式，属性：指定表单数据的提交方式，method的值可的值可以为以为get或或pos，默认值是，默认值是get。采用。采用get方法提交的数据将显示方法提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制。方式的保密性好，并且无数据量的限制。HTML5+CSS3网页设计基础第9章 表单第7页9.1 表单标签表单标签lautocomplete：指定表单是否有自动完成功能。取值为：指定表单是否有自动完成功能。取值为on时，表单有自动完成功
5、能，即将表单控件输入的内容记录下来，时，表单有自动完成功能，即将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表中，当再次输入时，会将输入的历史记录显示在一个下拉列表中，以实现自动完成输入。取值为以实现自动完成输入。取值为of时表单无自动完成功能。时表单无自动完成功能。l参考示例参考示例：9-1-1.htmlHTML5+CSS3网页设计基础第9章 表单第8页9.2 表单元素表单元素本节主要内容：本节主要内容：l案例分析案例分析linput元素及其属性元素及其属性l其他表单元素其他表单元素l案例制作案例制作HTML5+CSS3网页设计基础第9章 表单第9页9.2.1
6、 案例分析案例分析l【案例展示】【案例展示】用户注册页面设计。使用表单标签和表单元素用户注册页面设计。使用表单标签和表单元素设计用户注册页面设计用户注册页面。l【知识要点】【知识要点】表单、表单元素、表单元素常用属性的功能表单、表单元素、表单元素常用属性的功能。l【学习目标】【学习目标】掌握掌握掌握用表单和表单元素以及各种属性设计掌握用表单和表单元素以及各种属性设计表单的技术表单的技术。HTML5+CSS3网页设计基础第9章 表单9.2.2 input元素及其属性元素及其属性元素是表单中最常见的元素，它必须嵌套在表单元素是表单中最常见的元素，它必须嵌套在表单标签中使用，用于定义一个用户的输入项
7、。网页中常见的单标签中使用，用于定义一个用户的输入项。网页中常见的单行文本框、单选按钮、复选框等都是通过它定义的行文本框、单选按钮、复选框等都是通过它定义的元素的基本语法格式如下。元素的基本语法格式如下。ltype属性：指定属性：指定 input元素的输入类型。元素的输入类型。lname属性：属性的值是相应程序中的变量名。属性：属性的值是相应程序中的变量名。lvalue属性：属性的值是默认输入值。属性：属性的值是默认输入值。第10页HTML5+CSS3网页设计基础第9章 表单9.2.2 input元素及其属性元素及其属性l在在HTML5中，中，标签拥有多种输入类型及相关属性标签拥有多种输入类型
8、及相关属性，其常用属性如表，其常用属性如表9-1所示。所示。第11页表9-1 input元素的相关属性HTML5+CSS3网页设计基础第9章 表单9.2.2 input元素及其属性元素及其属性第12页表9-1 input元素的相关属性HTML5+CSS3网页设计基础第9章 表单9.2.2 input元素及其属性元素及其属性第13页表9-1 input元素的相关属性HTML5+CSS3网页设计基础第9章 表单9.2.2 input元素及其属性元素及其属性第14页表9-1 input元素的相关属性HTML5+CSS3网页设计基础第9章 表单9.2.3 其他表单元素其他表单元素除了除了input元素
9、外，元素外，HTML5表单元素还包括表单元素还包括textarea，et、datalist、keygen、output等，本节将对它们进行详细讲解。等，本节将对它们进行详细讲解。1.textarea元素元素Textare元素用于定义高度超过一行的多行文本域，多行文元素用于定义高度超过一行的多行文本域，多行文本域主要用于输入用户的意见、评论和一些反馈信息，用户可本域主要用于输入用户的意见、评论和一些反馈信息，用户可以在里面书写文字，字数没有限制。多行文本域的格式为：以在里面书写文字，字数没有限制。多行文本域的格式为：初始文本内容初始文本内容第15页HTML5+CSS3网页设计基础第9章 表单9.
10、2.3 其他表单元素其他表单元素2.select元素元素select元素用于创建单选或多选列表，当提交表单时，浏元素用于创建单选或多选列表，当提交表单时，浏览器会提交选定的项目。网页上经常看到的城市、出生年月等览器会提交选定的项目。网页上经常看到的城市、出生年月等下拉列表框就是用下拉列表框就是用select定义的。下拉列表框需要使用定义的。下拉列表框需要使用 select标签和标签和option标签定义，格式如下。标签定义，格式如下。显示显示文本文本1显示文本显示文本2第16页HTML5+CSS3网页设计基础第9章 表单9.2.3 其他表单元素其他表单元素3.datalist元素元素datal
11、ist是是HTML 5 中的新标签，用于定义中的新标签，用于定义input输入框的输入框的输入选项列表，实现自动匹配表单的可能的输入值，在输入选项列表，实现自动匹配表单的可能的输入值，在input输入框的值时可以从列表中选择，也可以自行输入，输入选项输入框的值时可以从列表中选择，也可以自行输入，输入选项列表用列表用datalist内的内的option元素创建。在使用元素创建。在使用时，时，为为id属性指定一个唯一的标识属性指定一个唯一的标识，然后在，然后在 input元素内指定元素内指定list属性的属性值为属性的属性值为标签中标签中id的属性值，绑定的属性值，绑定 datalist即可。即可
12、。第17页HTML5+CSS3网页设计基础第9章 表单9.2.4 案例制作案例制作l制作完成演示案例制作完成演示案例:用户注册用户注册。l参考代码参考代码 9-2.html第18页HTML5+CSS3网页设计基础第9章 表单第19页9.3 用用CSS控制表单样式控制表单样式l在设计表单时，为了页面美观，可以用在设计表单时，为了页面美观，可以用CSS样式样式对表单进行美化。对表单进行美化。l参考代码参考代码 9-3-1.htmlHTML5+CSS3网页设计基础第9章 表单9.4 实训实训l练习创建会员注册页面，用练习创建会员注册页面，用CSS控制注册控制注册表的样式表的样式。l参考代码参考代码
13、9-4.html第20页HTML5+CSS3网页设计基础第9章 表单第21页9.5 本章小结本章小结 l本章讲述了网页的表单元素及其属性、表单控件及其本章讲述了网页的表单元素及其属性、表单控件及其属性、属性、CSS样式对表单的美化等。重点讲解了表单控样式对表单的美化等。重点讲解了表单控件中的件中的input控件和它的常用属性控件和它的常用属性text、passwprd、radio、checkbox、number、Date pickers、submit、reset和和color等，还介绍了等，还介绍了textarea、select、datalist等表单元素，并结合实例介绍了等表单元素，并结合实例介绍了CSS对表单布局和样式修饰的方法对表单布局和样式修饰的方法。
