模块8 表格与表单

《HTML5+CSS3网页设计技术》授课教案授课教案学校******大学（学院）任课教师***授课题目模块八表格与表单授课时间长度8学时所用教材HTM5+CSS3网页设计技术，黄玉春主编；中国科学技术出版社教学目标｜知识目标｜（1）掌握表格的相关标签。（2）掌握制作单元格的跨行和跨列表格。（3）掌握表单的构成。（4）掌握表单控件标签。（5）掌握用CSS控制表格和表单的样式。｜能力目标｜（1）能够设计各种样式的表格。（2）能够用CSS设置表格和表单的样式。（3）能够设计实现各种功能的表单。｜素质目标｜（1）通过表格和表单的设计与制作，思考外观相同、代码不同的文本框的区别。培养在实际的网页开发中，多为用户体验考虑的意识。（2）培养网络安全防范意识，在设计表单收集用户信息时，注意设计更为合理的表单页面。教学重点（1）表格的相关标签及样式设置。（2）表单控件的标签及样式设置。教学难点表单控件的标签及样式设置。教学方法任务引入法、课堂讨论、理论讲解、实操训练教学用具多媒体教学设备、教材、课件、实训素材教学过程主要教学内容及步骤考勤教师使用App或者点名等方式进行签到；学生按照老师要求签到任务导入打开一个有表单或有表格的网页，查看表格或表单元素，引出本任务教学内容。教学内容任务一表格的使用在HTML网页中，表格主要用于显示数据，让数据显示的非常规整，有条理，可读性非常好。特别是后台展示数据时候，能够熟练运用表格就显得很重要。早期的网页布局也会用到表格，随着DIV+CSS布局技术的发展，表格将不再用来布局页面，而是用来展示数据。一、创建表格创建HTML5表格可以通过<table>、<tr>、<td>等标签来实现。其基本语法格式如下：<table><thead><tr><th>列标题1</th><th>列标题2</th><th>列标题3</th>…</tr></thead><tbody><tr><td>行1，列1</td><td>行1，列2</td><td>行1，列3</td>…</tr><tr><td>行2，列1</td><td>行2，列2</td><td>行2，列3</td>…</tr>…</tbody></table>在上面的语法包含的标签中，<table>元素表示整个表格，它包含两个主要部分：<thead>和<tbody>。（1）<thead>用于定义表格的标题部分。在<thead>中，使用<th>元素定义列的标题，以上实例中列标题分别为“列标题1”，“列标题2”和“列标题3”。（2）<tbody>用于定义表格的主体部分。在<tbody>中，使用<tr>元素定义行，并在每行中使用<td>元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。通过使用<th>元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。HTML表格还可以具有其他部分，如<tfoot>（表格页脚）和<caption>（表格标题），<tfoot>可用于在表格的底部定义摘要、统计信息等内容。<caption>可用于为整个表格定义标题。HTML表格还支持合并单元格和跨行/跨列的操作，以及其他样式和属性的应用，以满足各种需求。单元格内数据可以包含文本、图片、列表、段落、表单、水平线、表格等等。二、单元格跨行跨列表格要制作单元格跨行或跨列的表格，需要用到<td>标签的colspan属性（单元格可横跨的列数）和rowspan属性（单元格可横跨的行数）。三、表格列的分组表格还有一个常用标签<colgroup>，该标签用于定义表格列的分组。通过表格列的分组，可以为表格不同的列设置不同的样式。<colgroup>标签用于对表格中的列进行组合，以便对其进行格式化。通过使用<colgroup>标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。需要说明的是，<colgroup>标签只能在<table>元素之内，在<caption>元素之后，在任何一个<thead>、<tbody>、<tfoot>、<tr>元素之前使用。下面是其格式代码：<table><caption></caption><colgroup><col>…</colgroup><thead><tr><th>文字</th>…</tr></thead><tbody><tr><td>文字</td>…</tr>…</tbody></table>四、CSS控制表格样式使用表格自带的属性虽然可以控制表格的样式，但是由于表格自带的属性控制样式时有很多局限，同时也不符合结构与样式分离的网页设计思想，因此在实际网页设计中，推荐使用CSS控制表格的样式。【例8-5】用CSS控制表格的边框，外框粗实线，内框细实线。<style>table{border-collapse:collapse;/*边框合并*/width:100%;}.table-bordered{border:2pxdoublergb(36,116,185);}.table-borderedth,.table-borderedtd{border:1pxsolidrgb(36,116,185);padding:0.75rem;}</style>文件在浏览器中的预览效果如图8-5所示。图8-5CSS设置表格边框线本例中，通过将表格标签使用border-collapse设置为collapse，让边框合并减少上下左右的宽度。将表格的外框线宽度设置为2px，将th、td标签的边框线宽度设置为1px，并将的padding设置为0.75rem，从而让表格看起来更好看。任务二表单的使用HTML表单用于收集用户的输入信息。例如注册页面的账号密码输入、购物网站的订单页面等，都是以表单的形式来收集用户的信息，并将这些信息传递给后台服务器，实现网页与用户信息的交互。一、表单的构成在HTML中，一个完整的表单通常由表单元素（也称为表单控件）、提示信息和表单域3个部分构成。表单元素包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等；表单域相当于一个容器，用来容纳所有的表单元素和提示信息。表单的基本语法格式如下：<formname=""action="url"method="get/post">表单元素1;表单元素2;表单元素3;…</form><form>标签用于创建表单，name、action、method为表单属性。表单属性说明如下。（1）name属性：用于定义表单对象的名称。定义表单名称后，可方便程序引用表单中的对象。（2）action属性：该属性用于设置一个接收和处理表单提交数据的脚本程序。可以是一个CGI(CommonGatewayInterface，通用网关接口)，也可以是ASP程序、PHP程序或Java程序等。例如：<formaction="test.php">表示当提交表单时，表单数据会传递到名为test.php的页面去处理。（3）method属性：该属性用于设置表单提交数据的方法，其取值为post或get。默认值为get。二、表单控件表单的核心内容就是表单的控件，HTML提供了一系列的表单控件，用于定义不同的表单功能，如输入框、文本域、下拉列表、复选框、按钮等。本节将对这些表单控件进行详细的介绍。1．input控件<input>元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type属性定义了输入框的类型，id属性用于关联<label>元素，name属性用于标识表单字段。其基本语法格式如下：<inputtype="控件类型"name="*"id="*"><input>为单标签。type属性的常用取值有以下几种。（1）text：单行文本输入框（默认值）。（2）password：密码输入框。（3）email：定义用于e-mail地址的输入框。（4）number：定义用于输入数字输入框。用户可以通过该控件的min、max等属性设置可接受数字的范围限制，如下面的代码设置了数字（1到5之间）：<inputtype="number"name="quantity"min="1"max="5">（5）tel：定义用于输入电话号码输入框。（6）search：定义用于输入搜索字符串的文本输入框。（7）date：定义date控件（包括年、月、日，不包括时间）。（8）radio：单选按钮。生成单选按钮，用于单项选择，如选择性别、是否操作等。需要注意的是，一组单选按钮的名称必须相同，否则就无法实现多选一的目的。此外还可以应用checked属性，指定默认选中项。（9）checkbox：复选框。（10）submit：提交按钮。（11）reset：重置按钮。（12）button：普通按钮。例如，下面的代码定义可点击的按钮，在用户单击按钮时启动一段JavaScript：<inputtype="button"value="点我"onclick="msg()">（13）file：文件域。值得一提的是，在HTML5中，<input>控件还有required、placeholder、patten等常用属性。其中required属性为布尔值，如果使用该属性，则字段是必填（或必选）的。placeholder属性用于在输入框中显示一些提示信息，帮助用户填写正确的内容或提供输入示例。例如下面的代码设置了输入框为必填字段和在输入框中显示一些提示信息：<inputtype="text"name="user"placeholder="输入用户名"required>2．label控件<label>控件用于为表单元素添加标签。在实际应用中，<input>标签往往结合<label>标签使用，<label>元素用于为表单元素添加标签，提高可访问性。3．textarea控件通过<textarea>标签可以创建一个多行文本输入区域，其基本语法格式如下：<textareacols="列数"rows="行数">…</textarea>该语法代码中，textarea标签内的cols属性用来设置文本域的列数，rows属性用来设置文本域的行数。可以通过cols和rows属性来规定textarea的尺寸大小，不过更好的办法是使用CSS的height和width属性。4．select控件HTML中的<select>标签用来创建下拉列表。其语法格式如下：<select><option>选项1</option><option>选项2</option><option>选项3</option>…</select>5．datalist控件在HTML5中，<datalist>标签用于提供输入框的自动完成功能。它可以与input元素结合使用，通过输入框输入内容时，弹出一个下拉列表来显示可选的选项。例如，下面的代码通过<dataList>标签为输入框（<select>标签）生成一个下拉选项，如图8-9所示。<formaction=""><inputlist="dept"name="dept"placeholder="输入二级院系"><datalistid="dept"><optionvalue="信息工程学院"><optionvalue="机电工程学院"><optionvalue="马克思主义学院"><optionvalue="外语学院"><optionvalue="思政教学部"></datalist></form>图8-9datalist控件的使用注意，datalist控件的id属性值要与input控件的