【文档说明】Web前端开发案例教程第8章课件.pptx，共(35)页，14.310 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-3293.html

以下为本文档部分文字说明：

第8章表格与表单※掌握创建表格的HTML标记；※掌握表格的CSS样式控制；※掌握创建表单的HTML标记；※掌握表单的CSS样式控制。表格相关知识表格案例实现2德才兼备知行合一8.18.28.3表格案例：学生信息表第8章表格与表单表单相关知识表单案例实现8.48

.58.6表单案例：用户注册表单8.1表格案例：学生信息表3德才兼备知行合一8.2表格相关知识4德才兼备知行合一第8章表格与表单5德才兼备知行合一8.2.1表格标记例8-1在网页上创建如图所示的简单表格。

文件名为8-1.html，代码略。6德才兼备知行合一8.2.1表格标记（1）<table></table>：用于定义一个表格。（2）<tr></tr>：用于定义表格的一行，该标记必须包含在<table>

和</table>中，表格有几行，在<table>和</table>中就要有几对<tr></tr>标记。（3）<th></th>：用于定义表头的单元格，该标记必须包含在<tr>和</tr>中，表头行有几个单元格，在<tr>和</tr>中就要有几对<t

h></th>标记。该单元格中的文字自动设为粗体、在单元格中居中对齐显示。（4）<td></td>：用于定义表格的普通单元格，该标记必须包含在<tr>和</tr>中，一行有几个单元格，在<tr>和</tr>中就要有几对<td></td>标记。该单元格中的文字自动设为左对齐显

示。7德才兼备知行合一8.2.2合并单元格可以通过给单元格标记td或th添加colspan或rowspan属性合并单元格。colspan：列合并。就是让同一行上的不同列上的单元格合并为一个单元格，那么要找到被合并的几个单元格中处于最左侧的那个单元格，加上colspan属性，其他被

合并的单元格的标记要删除。Rowspan：行合并就是让同一列上的不同行上的单元格合并为一个单元格，那么要找到被合并的几个单元格中处于最上面的那个单元格，加上rowspan属性，其他被合并的单元格的标记要删除。8德才兼备知行合一

8.2.2合并单元格例8-2在网页上创建如图所示的表格。文件名为8-2.html，代码略。9德才兼备知行合一8.2.3使用CSS设置表格样式例8-3将例8-2创建的表格使用CSS属性设置表格的样式。效果如图所示。

文件名为8-3.html，代码略。注意：border-collapse属性可以使表格的边框合并。10德才兼备知行合一8.3表格案例实现制作学生信息表，浏览效果如图所示。11德才兼备知行合一8.3表格案例实现（1）创建一个6行7列的表格。（2）设置表格标题——学生信息表。（3）在表格

标记中添加相应文本内容，并用<th>标记为表格设置表头。（4）通过CSS控制表格的样式。（5）表格中的奇数行和偶数行分别显示不同的背景色。具体要求如下。8.4表单案例：用户注册表单12德才兼备知行合一8.5表单相关知识13德

才兼备知行合一第8章表格与表单14德才兼备知行合一8.5.1认识表单表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象。图8-8所示是用户登录信息表单。15德才兼备知行合一8.5.1认识表单表单是允许浏览者进行输

入的区域，可以使用表单从客户端收集信息。浏览者在表单中输入信息，然后将这些信息提交给网站服务器，服务器中的应用程序会对这些信息进行处理，并进行响应，这样就完成了浏览者和网站服务器之间的交互。HTML5新增了很多表单控件，完善了表单的功能，新特性提供了更好的用户体验和输入控制。16在网

页中，一个完整的表单通常由表单域、提示信息和表单控件三部分构成。表单域（<form>标记）：<form>标记是一个包含框，是包含表单控件的容器。提示信息：表单控件周围用于提示输入内容的文字。表单控件（<input

>标记等）：用于输入用户信息的控件，如文本框、密码框、单选按钮、复选框和按钮等。8.5.1认识表单17德才兼备知行合一8.5.2表单标记<formname="表单名称"action="URL地址"me

thod="提交方式"autocomplete=”on|off”novalidate>……</form>18德才兼备知行合一8.5.2表单标记（1）name属性：给定表单名称，以区分同一个页面中的多个表单。（

2）action属性：指定处理表单信息的服务器端应用程序。（3）method属性：用于设置表单数据的提交方式，其取值为get或post。其中，get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好

，并且无数据量的限制，使用method="post"可以大量地提交数据。（4）autocomplete属性：用于指定表单是否有自动完成功能。所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入

的历史记录显示在一个下拉列表里，以实现自动完成输入。该属性的取值有on和off，当为on时表示有自动完成功能，否则没有。该属性是HTML5新增属性。（5）novalidate属性：指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时，可以关闭整个表单的验证。该属性的取值有tru

e和false，当为true时表示取消表单验证。该属性是HTML5新增属性，属性的含义：19德才兼备知行合一8.5.3表单控件表单中通常包含一个或多个表单控件，如图8-9所示。20德才兼备知行合一8.5.3表单控件1．input控件input控件用于定义文本框、单选按钮、复

选框、提交按钮、重置按钮等。其基本语法格式如下。<inputtype="控件类型"/><input/>标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input>标记还可以定义很多其他的属性，其常用属性如表8-1和8-2所示。218

.5.3表单控件属性属性值作用typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域emailEmail地址的

输入域urlURL地址的输入域number数值的输入域range一定范围内数值的输入域date、time等日期和时间的输入search搜索域color选择颜色tel电话号码的输入表8-1input控件的type属性228.5.3表单控件表8-2input控件的其它属性属性属性值作用name由用

户自定义控件的名称value由用户自定义input控件中的默认文本值size正整数input控件在页面中的显示宽度readonlyreadonly该控件内容为只读（不能编辑修改）disableddisab

led第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选中的项maxlength正整数控件允许输入的最多字符数autocompleteon/off设置是否自动完成表单字段的内容

autofocusautofocus设置页面加载后是否自动获取焦点formform元素的id设置字段隶属于哪个表单listdatalist元素的id设置字段的数据值列表multiplemultiple设置输入框是否可以选多个值

min、max、step数值设置最小值、最大值及步进值pattern字符串设置正则表达式，验证数据合法性placeholder字符串提供提示requiredrequired输入框中不能为空23德才兼备知行合一8.5

.3表单控件2．textarea控件当定义input控件的type属性值为text时，可以创建一个单行文本输入框。如果需要输入大量信息，且字数没有限制时，就需要使用<textarea>和</textarea>标记。例如，输入个人简历时的控件就是textarea控件。其基本语法格式如下。<te

xtareacols="每行中的字符数"rows="显示的行数"></textarea>24德才兼备知行合一8.5.3表单控件2．textarea控件在上面的语法格式中，cols和rows为<textarea>标记的必需属性，其中cols用来定义多行文本输入框每行中的字符数

，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数25德才兼备知行合一8.5.3表单控件3．select控件select控件提供下拉列表选项，供用户进行选择。下拉框通过select标记和option标记来定义。例如，在用户注册表单中，职业的选择项就使用下拉列表实现。其基本

语法格式如下。<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>26德才兼备知行合一8.5.3表单控件3．select控件在上面的语法中，

<select>和</select>标记用于在表单中添加一个下拉菜单，<option>和</option>用于定义下拉菜单中的具体选项，每对<select>和</select>中至少应包含一对<option>和</option>。278.5.3表单控件表8-3<select>和<

option>标记的常用属性标记名常用属性作用<select>size指定下拉菜单的可见选项数（取值为正整数）multiple定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住Ctrl键的同时选择多项<optio

n>selected定义selected="selected"时，当前项即为默认选中项288.5.4使用CSS设置表单样式例8-4创建用户登录表单，并使用CSS对表单样式进行设置，其效果如图8-10所示。文件名为8-4.html。图8-10所示的表单界面由三行构成，每行可以使用

一对<p>标记来构建。左边的提示信息放入<span>标记中，便于设置文字的右对齐。代码略。图8-10使用CSS属性设置表单样式298.5.4使用CSS设置表单样式在使用CSS控制表单样式时，初学者需要注意以下几个问题。（1）由于form是块元素，重置浏览器的默

认样式时，需要清除其内边距padding和外边距margin。（2）input控件默认有边框效果，当使用<input>标记定义各种按钮时，通常需要清除其边框。（3）通常情况下需要对文本框和密码框设置2～3像素的内边距，以使用户输入的内容不会紧

贴输入框。8.6表单案例实现：用户注册表单30德才兼备知行合一制作用户注册表单，浏览效果如图所示。8.6表单案例实现：用户注册表单31德才兼备知行合一具体要求如下。（1）定义表单域。（2）使用表单控件定义各输入控件。（3）使用<input>标记的按钮属性定义提交和

重置按钮。（4）通过CSS整体控制表单样式。8.6表单案例实现：用户注册表单32德才兼备知行合一分析：用户注册表单浏览效果图，该页面所有内容通过最外层的大盒子来包含，大盒子添加背景图像。标题使用<h2>标记，表单每行的内容

放入<p>标记中。最后使用CSS属性对所有元素设置样式。代码略。33德才兼备知行合一本章小结33德才兼备知行合一本章介绍了HTML中两个重要的元素：表格与表单，主要包括表格相关标记、表单相关标记以及如何

使用CSS控制表格与表单的样式。本章通过两个典型案例，分别使用表格和表单标记制作了学生信息表和用户注册表单，并使用CSS对表格和表单进行了修饰。通过本章的学习，读者应该能够掌握创建表格与表单的基本语法，学会表格标记的使用，并熟悉常用的表单控件，熟练地运用表格

与表单组织页面元素。34实训8感谢您的观看！