1、HTML5+CSS3+JavaScript网页设计与制作项目教程项目5 布局交互功能表单的应用目录E N T E R P R I S E O P E R A T I O N R E P O R T04.总结提升03.知识链接02.学习目标01.项目导入PART 01项目导入使用表单制作使用表单制作“旅行家旅行家登录注册登录注册”页面页面 在网页中，我们经常看到各种注册登录页面，其中用户名、密码等输入内容被称为表单。HTML5中提供了表单标签，来完成页面信息输入的功能，实现网页与用户数据的交互。本章我们将使用这些元素制作“旅行家登录”页面PART 02知 识 目 标能 力 目 标1、掌握利用表单
2、标签在页面创建表单的方法2、掌握各种表单控件的定义与应用3、掌握表单标签的属性1、能够根据需要创建表单控件2、能够自由组合表单中的各个元素PART 03一、表单标签 表单是网页上的特定区域，是表单控件的集合，主要负责从客户端收集用户的输入信息，然后将信息发送给服务器，由处理程序对数据进行分析，并给出反馈，完成服务器与用户之间的互动，其工作机制如图 一、表单标签 表单所在的区域由文本框、单选框、多选框、下拉选择框、提交按钮、重置按钮等表单元素构成，需要用一对表单标签定义。其基本语法格式为：表单元素一、表单标签 1、表单属性根据实际应用不同，表单的组成元素多种多样，其中action、method、
3、name是标签的常用属性。（1）表单名称属性namename属性给表单命名，来区分一个页面中的多个表单，避免表单信息提交给后台时出现混乱。其命名规则为：name的属性值为表单名称，不能包含特殊符号和空格。（2）传送方法属性methodmethod属性用来定义表单数据的提交方式，可取值为get或post，决定了处理程序用什么方式从表单中获取信息。一、表单标签 （3）处理程序属性actionaction属性定义处理表单的脚本或程序，其属性值可以是脚本或程序的完整url，即表单要提交的地址。这个地址可以是绝对地址，也可以是相对地址。一、表单标签 2、表单元素表单中通常包含一个或多个表单元素，除inp
4、ut标签外，HTML还有其他常用表单标签，如textarea、lable等。常用的表单元素如表表单元素功能input该标签根据type属性值的不同有多种形式，可定义文本框、密 码框、复选框、按钮等textarea该标签定义一个多行文本输入区域label该标签为其他表单元素定义说明文字select该标签用来定义下拉菜单datalist该标签用来定义下拉选项列表 表单中最为核心的是标签，使用标签可以定义用户的输入项，如文本输入框、单选按钮、复选框、提交按钮等，用于文本、数字、密码等数据信息的输入。标签是一个单标签，必须嵌套在表单标签中使用，其基本语法格式为：二、输入标签 1、type属性 在inp
5、ut标签的基本语法中，type属性是其最基本的属性，根据其不同的取值，指定不同的控件类型。（1）单行文本框text与密码框password 单行文本框可以用来输入字符串；密码框可以用来输入密码，为了保护密码安全，密码框中输入字符会显示为“*”。语法格式如下：常用的属性如下：name属性：定义文本框的名称。size属性：定义文本框的长度，以字符为单位。maxlength属性：定义文本框中最多可以输入的字符数。value属性：定义文本框显示的默认值。placeholder属性：定义文本框提示语句二、输入标签【例5-1】创建文本密码输入框。输入文本及密码 用户名：密码：二、输入标签【例5-1】创建文
6、本密码输入框。案例效果如图二、输入标签（2）数字number、电话tel及邮箱email控件 除了文本和密码控件，我们还可以使用数字number、电话tel及邮箱等类型的控件，在使用这些控件时，可以自动验证输入的文本类型，如果输入数据不符合控件类型，将无法提交数据，并显示错误提示语句，如图5.5所示。其语法格式与常用属性和文本控件相似。二、输入标签（3）单选按钮radio与复选框checkbox 在网页表单中，经常会出现单选或复选，这些可由input控件中单选按钮radio或复选框checkbox类型实现。单选按钮（radio）：允许用户在多个选项中选择其中一个。例如性别。复选框（checkb
7、ox）：允许用户在多个选项中选择多个。例如兴趣爱好。使用单选按钮及复选框的语法格式如下：name属性：定义名称，一组单选按钮或复选框的名称应当相同。value属性：定义选项的值，用户选中后该值将传送到处理程序中。checked属性：表示该选项为默认选项。二、输入标签【例5-2】单选按钮与复选框的使用 单选按钮与复选框 性 别：男 女 二、输入标签【例5-2】单选按钮与复选框的使用 爱 好：音乐 电影 旅行 摄影 运动 二、输入标签（4）日期与时间相关控件 在表单中，我们还经常需要提交日期与实践相关数据，在input控件中，可以使用datetime类型控件，输入日期时间；可以使用date、dat
8、etime-local、month、time、week等类型的控件，实现日期或时间的选择。二、输入标签【例5-3】日期和时间相关控件 日期时间相关控件 datetime控件 date控件 二、输入标签 datetime-local控件 month控件 time控件 week控件 二、输入标签（5）file控件与image控件 在网页表单中，当需要上传文件或图片文件，可以使用file和image类型的input控件。二、输入标签【例5-4】使用file控件上传文件 文件上传 上传文件：二、输入标签（6）按钮控件网页中需要使用按钮对已经填写的数据进行处理，执行提交、取消、重置、退出等操作。在HTM
9、L5中表单按钮控件主要有：button：普通按钮。普通按钮使用时，需要设置触发事件完成相关操作。submit：提交按钮，点击执行提交操作reset：重置按钮，点击执行重置操作，清除表单中输入的内容。按钮类型控件的主要参数如下：name：设置按钮名称value：设置按钮上的显示文字。二、输入标签【例5-5】使用按钮控件 使用按钮控件 手机号：二、输入标签 验证码：密 码：案例完成效果如图。二、输入标签 标签用于定义多行文本输入框，其基本语法格式如下：文本 textarea标签通过rows、cols属性规定文本输入框内可见的行数及列数，输入框的具体尺寸可以通过wi
10、dth和height属性设置，标签之间的文字代表文本域内显示的默认文字。三、文本域标签 标签的常用属性：三、文本域标签属性名属性说明属性值name文本域名称用户自定义readonly文本域内容为只读类型readonlydisabled第一次加载页面时禁用该控件（显示为灰色）disabledmaxlength文本域允许输入的最多字符数正整数autofocus定义页面加载后控件是否自动获取焦点autofocusplaceholder在输入框内显示提示信息字符串required设定输入框内容不能为空requiredcols定义文本域内可见列数numberrows定义文本域内可见行数numberhei
11、ght定义文本域的高度numberwidth定义文本域的宽度number属性名属性说明属性值name文本域名称用户自定义【例5-6】创建读者留言板块。文本域 读者留言：请在此处留言 三、文本域标签【例5-6】创建读者留言板块。案例完成效果如图：三、文本域标签 标签用于定义标注文字，当用户选择该标签文字时，浏览器会自动将页面焦点转到与标签相关的表单控件上。标签的基本语法格式如下：文本 标签属性for的属性值与相关控件的id属性值相同，相同的属性值将label标签与其他控件“绑定”在一起。四、标注（标记）标签 【例5-11】为性别单选按钮添加标签。标注标签 性 别：男 女 四、标注（标记）标签 在
12、表单的应用中经常遇到利用下拉菜单提供多个选项供用户选择的情况，此时可以用标签创建单选或多选的下拉菜单，其语法格式具体如下：选项1选项2选项3五、下拉菜单标签 标签的常用属性：五、下拉菜单标签属性名属性说明属性值size定义下拉菜单的可见选项数正整数multiple定义下拉菜单是否有多选功能multipleselected定义选项是否为默认选中状态selected 【例5-8】创建“职业”单选下拉菜单及“特长”多选下拉菜单。下拉菜单 职业（单选）：请选择 学生 教师 公务员 职员 自由工作者 五、下拉菜单标签 特长（多选）:请选择 运动 写作 外语 绘画 音乐 【例5-8】创建“职业”单选下拉菜
13、单及“特长”多选下拉菜单。案例完成效果如图 五、下拉菜单标签 输入域的选项列表是由标签定义的，通过标签的id属性和标签中list属性的统一，将选项列表和标签绑定，提供输入域的可能值。选项列表通过标签嵌套标签实现，其基本语法格式如下：选项1选项2选项3六、选项列表标签 【例5-9】创建“课程”选项列表。选项列表 请选择课程：必修 选修 必修 六、选项列表标签PART 041、表格结构及基本语法、表格结构及基本语法 在网页中，我们可以插入表格，在HTML中使用table标签即可在页面中插入表格。HTML5表格table标签下有四个子标签：caption、thead、tbody、tfoot。表格由一
14、行一行元素组成的，表格行tr有子元素 th 和 td，表格被行、列划分为多个单元单元格。其中th表示表头单元格，td表示一般单元格。HTML5表格基本样式结构如图。一、表格及其基本语法HTML5表格的基本语法格式：表格的基本语法格式：一、表格及其基本语法 表格标题 列名 单元格 表尾 1、表格、表格CSS属性属性在HTML5中，表格的样式可以通过CSS样式来设置，常用的表格CSS属性如表一、表格及其基本语法属性属性描述描述border-collapseborder-collapse设置是否把表格边框合并为单一的边框。border-spacingborder-spacing设置分隔单元格边框的距
15、离。caption-sidecaption-side设置表格标题的位置。empty-cellsempty-cells设置是否显示表格中的空单元格。table-layouttable-layout设置显示单元、行和列的算法。一、表格及其基本语法（1）折叠表格边框：border-collapse 属性border-collapse属性主要用于折叠表格边框，其属性值如下：separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse：边框合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。i
16、nherit：规定应该从父元素继承 border-collapse 属性的值。（2）表格内边距：padding属性表格内边距属性padding用来控制表格中内容与边框的距离。一、表格及其基本语法（3）边框分离：border-spacing 属性border-spacing 属性可以设置分隔边框模型中单元格边界之间的距离。其属性值如下：length：规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个length参数，那么定义的是水平和垂直间距。如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距。inherit：继承父元素border-sp
17、acing 属性的值。一、表格及其基本语法（4）表格标题：caption-side属性caption-side属性用来设置表格标题的位置。其属性值如下：top：将标题放在表格主体上方。bottom：将标题放在表格主体下方。inherit：继承父对象的属性值。一、表格及其基本语法5）空单元格的处理：empty-cells 属性empty-cells 属性定义了不包含任何内容的表单元格如何表示。其属性值如下：show：显示空单元格。hide：隐藏空单元格（6）表格布局算法：table-layout属性table-layout属性用来指定表布局算法。表布局算法主要有以下两种：fixed：根据表格宽度布局表格 automatic：根据内容布局表格 在表格中可以使用colspan和rowspan属性对表格进行合并单元格的操作，其中colspan用来进行水平方向的单元格合并，rowspan用来进行垂直方向的单元格合并。二、合并单元格 【例5-10】使用表格制作课程表关键代码：上午 网络基础 Python 网页设计 大学英语 数据库基础 网络基础 Python 网页设计 高等数学 数据库基础 二、合并单元格 下午 计算应用基础 大学英语 体育 【例5-10】使用表格制作课程表 案例完成效果如图：二、合并单元格
