HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第6-10章为网页添加表格和表单-实战开发好趣艺术设计部落首页

上传人：h*** IP属地：山东上传时间：2026-07-28 格式：PPTX 页数：769 大小：13.04MB 积分：45 举报 版权申诉

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第6-10章为网页添加表格和表单-实战开发好趣艺术设计部落首页_第2页

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第6-10章为网页添加表格和表单-实战开发好趣艺术设计部落首页_第3页

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第6-10章为网页添加表格和表单-实战开发好趣艺术设计部落首页_第4页

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第6-10章为网页添加表格和表单-实战开发好趣艺术设计部落首页_第5页

已阅读5页，还剩764页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第6章为网页添加表格和表单《HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）》学习目标/Target了解表单的构成，能够说出表单的构成部分。知识目标技能目标掌握表格标签的应用，能够在网页中创建表格。熟悉表格标签的属性，能够运用这些属性创建不同形态的表格。熟悉表格的结构，能够划分表格的结构。掌握使用CSS控制表格样式的方法，能够使用CSS设置表格的样式。学习目标/Target掌握创建表单的方法，能够在网页中创建表单。掌握表单控件的使用方法，能够创建具有不同功能的表单控件。掌握使用CSS控制表单样式的方法，能够使用CSS美化表单。技能目标素养目标通过制作在线简历表，提升自我认知能力。通过制作课题问卷调研表，培养问题分析和解决能力。章节概述/Summary表格和表单是HTML网页的重要组成部分，利用表格可以对网页进行排版，使网页信息有条理地显示出来；而使用表单可方便用户与网页之间的交互，可实现网上注册、网上登录、网上交易等多种场景。本章将对表格和表单的相关知识进行详细讲解。目录/Contents010203案例6-1在线简历表案例6-2课题问卷调研表案例6-3员工信息登记表在线简历表案例6-1案例描述在日常工作中，为了有条理地显示数据或信息，常常使用表格对数据或信息进行统计。类似地，在制作网页时，为了使网页中的元素有条理地显示，也可以使用表格对网页内容进行规划。为此，HTML提供了一系列的表格标签和属性。本案例将使用表格标签和属性制作一个简单的在线简历表，效果如图。知识引入熟悉表格的结构，能够划分表格的结构。学习目标1.创建表格知识引入在Word文档中，如果要创建表格，只需设定相应的行数和列数，然后插入表格即可。然而在HTML网页中，元素是通过标签定义的，要想创建表格，就需要使用表格标签。创建表格的基本语法格式如下。<table><tr><td>单元格内的文字</td>...</tr>...</table>1.创建表格知识引入在Word文档中，如果要创建表格，只需设定相应的行数和列数，然后插入表格即可。然而在HTML网页中，元素是通过标签定义的，要想创建表格，就需要使用表格标签。创建表格的基本语法格式如下。<table><tr><td>单元格内的文字</td>...</tr>...</table>1.创建表格作为表格的容器，标志着表格的开始和结束知识引入在Word文档中，如果要创建表格，只需设定相应的行数和列数，然后插入表格即可。然而在HTML网页中，元素是通过标签定义的，要想创建表格，就需要使用表格标签。创建表格的基本语法格式如下。<table><tr><td>单元格内的文字</td>...</tr>...</table>1.创建表格用于定义表格中的一行，它必须嵌套在<table>标签中，<table>标签包含的<tr>标签的数量直接决定了表格的行数知识引入在Word文档中，如果要创建表格，只需设定相应的行数和列数，然后插入表格即可。然而在HTML网页中，元素是通过标签定义的，要想创建表格，就需要使用表格标签。创建表格的基本语法格式如下。<table><tr><td>单元格内的文字</td>...</tr>...</table>1.创建表格用于定义表格中的单元格，它必须嵌套在<tr>标签中，<tr>标签包含的<td>标签的数量决定了该行将包含多少个单元格，即表格的列数知识引入下面通过代码创建一个学生成绩展示表格，如例。1.创建表格<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

知识引入运行示例代码，效果如图。1.创建表格知识引入如果删除如下代码中border属性的相关代码，保存文件并刷新页面，效果如图。1.创建表格<tableborder="1">知识引入注意<tr>标签中只能嵌套<td>标签，不可以直接在<tr>标签中输入文字。1.创建表格知识引入熟悉表格标签的属性，能够运用这些属性创建不同形态的表格。学习目标2.表格标签的属性知识引入表格标签包含一系列的属性，用于控制表格的显示样式，常用的表格标签有<table>标签、<tr>标签、<td>标签和<th>标签。2.表格标签的属性<table>标签的属性<tr>标签的属性<td>标签的属性<th>标签的属性知识引入<table>标签的属性主要用来整体控制表格的样式和布局，<table>标签的属性及描述如表。01<table>标签的属性2.表格标签的属性属性描述border用于设置表格的边框（默认值为0，表示无边框），取值为像素值cellspacing用于设置单元格与单元格之间的距离，取值为像素值，默认值为2pxcellpadding用于设置单元格内容与单元格边框之间的距离，取值为像素值，默认值为1pxwidth用于设置表格的宽度，取值为像素值知识引入01<table>标签的属性2.表格标签的属性属性描述height用于设置表格的高度，取值为像素值align用于设置表格在网页中的水平对齐方式，取值为left、center、rightbgcolor用于设置表格的背景颜色，取值为颜色名称、十六进制颜色值、RGB颜色值background用于设置表格的背景图像，取值为背景图像的URL知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。border属性在<table>标签中，border属性用于设置表格的边框，默认值为0。为了使读者更好地理解border属性，将例example01.html中<table>标签的border属性值改为20，即将第8行代码更改为如下代码。<tableborder="20">知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。border属性保存并运行代码，效果如图。知识引入注意当使用<table>标签的属性时，若属性值为像素值，可以省略属性值的单位“px”。01<table>标签的属性下面将以上属性进行详细讲解。border属性2.表格标签的属性知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。cellspacing属性cellspacing属性用于设置单元格与单元格之间的距离，默认值为2px。例如将例example01.html中的第8行代码改为如下代码。<tableborder="20"cellspacing="20">知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。cellspacing属性保存并运行代码，效果如图。知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。cellpadding属性cellpadding属性用于设置单元格内容与单元格边框之间的距离，默认值为1px。例如将例example01.html中的第8行代码改为如下代码。<tableborder="20"cellspacing="20"cellpadding="20">知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。cellpadding属性保存并运行代码，效果如图。知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。width属性和height属性默认情况下，表格的宽度和高度是自适应的，由表格内的内容来决定。要想更改表格的大小，就需要应用宽度属性width和高度属性height。例如将例example01.html中的第8行代码改为如下代码。<tableborder="20"cellspacing="20"cellpadding="20"width="600"height="600">知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。width属性和height属性保存并运行代码，效果如图。知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。align属性align属性可用于定义表格的水平对齐方式，其取值为left、center、right。需要注意的是，当对<table>标签应用align属性时，控制的是表格在页面中的水平对齐方式，单元格中的内容不受影响。例如将例example01.html中的第8行代码改为如下代码<tableborder="20"cellspacing="20"cellpadding="20"width="600"height="600"align="center">知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。align属性保存并运行代码，效果如图。知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。bgcolor属性在<table>标签中，bgcolor属性用于设置表格的背景颜色。例如将例example01.html中的第8行代码改为如下代码。<tableborder="20"cellspacing="20"cellpadding="20"width="600"height="600"align="center"bgcolor="#ccc">知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。bgcolor属性保存并运行代码，效果如图。知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。background属性在<table>标签中，background属性用于设置表格的背景图像。例如将例example01.html中的第8行代码改为如下代码。<tableborder="20"cellspacing="20"cellpadding="20"width="600"height="600"align="center"bgcolor="#ccc"background="images/bg.png">知识引入01<table>标签的属性2.表格标签的属性下面将以上属性进行详细讲解。background属性保存并运行代码，效果如图。知识引入02<tr>标签的属性2.表格标签的属性通过对<table>标签应用属性，可以控制表格的整体显示样式。在制作网页时，若需要使表格中的某一行特殊显示，就可以使用<tr>标签的属性。<tr>标签的属性及描述如表。属性描述height用于设置行的高度，取值为像素值align用于设置同一行中内容的水平对齐方式，取值为left、center、rightvalign用于设置同一行中内容的垂直对齐方式，取值为top、middle、bottombgcolor用于设置行的背景颜色，取值为预定义的颜色值、十六进制颜色值、RGB颜色值background用于设置行的背景图像，取值为背景图像的URL知识引入02<tr>标签的属性2.表格标签的属性下面通过代码演示<tr>标签常用属性的用法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>tr标签的属性</title></head>知识引入02<tr>标签的属性2.表格标签的属性下面通过代码演示<tr>标签常用属性的用法，如例。<body><tableborder="1"width="400"height="240"align="center"><trheight="80"align="center"valign="top"background="images/bg.png"><td>姓名</td><td>性别</td><td>电话</td><td>住址</td></tr>知识引入02<tr>标签的属性2.表格标签的属性<tr><td>小郑</td><td>女</td><td>11122233</td><td>海淀区</td></tr>知识引入02<tr>标签的属性2.表格标签的属性<tr><td>小李</td><td>男</td><td>55566677</td><td>朝阳区</td></tr>知识引入02<tr>标签的属性2.表格标签的属性<tr><td>小刘</td><td>男</td><td>88899900</td><td>西城区</td></tr></table></body></html>知识引入02<tr>标签的属性2.表格标签的属性运行示例代码，效果如图。知识引入03<td>标签的属性2.表格标签的属性通过对<tr>标签应用属性，可以控制表格中某一行内容的显示样式。但是，在网页制作过程中，要想对某一个单元格进行控制，就需要为<td>标签设置属性。<td>标签的属性及描述如表。属性描述width用于设置单元格的宽度，取值为像素值height用于设置单元格的高度，取值为像素值align用于设置单元格内容的水平对齐方式，取值为left、center、rightvalign用于设置单元格内容的垂直对齐方式，取值为top、middle、bottom知识引入03<td>标签的属性2.表格标签的属性属性描述bgcolor用于设置单元格的背景颜色，取值为预定义的颜色值、十六进制颜色值、RGB颜色值background用于设置单元格的背景图像，取值为背景图像的URLcolspan用于设置单元格跨越的列数（即合并水平方向的单元格），取值为正整数rowspan用于设置单元格跨越的行数（即合并垂直方向的单元格），取值为正整数知识引入03<td>标签的属性2.表格标签的属性下面通过代码演示如何使用rowspan属性合并垂直方向的单元格，将表格中住址下方的3个单元格合并为1个单元格，如例。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>td标签的属性</title></head>知识引入03<td>标签的属性2.表格标签的属性<body><tableborder="1"width="400"height="240"align="center"><trheight="80"align="center"valign="top"bgcolor="#00CCFF"><td>姓名</td><td>性别</td><td>电话</td><td>住址</td></tr>知识引入03<td>标签的属性2.表格标签的属性<tr><td>小郑</td><td>女</td><td>11122233</td><tdrowspan="3">北京</td>

</tr>rowspan设置单元格跨越的行数知识引入03<td>标签的属性2.表格标签的属性<tr><td>小李</td><td>男</td><td>55566677</td>

</tr>知识引入03<td>标签的属性2.表格标签的属性<tr><td>小刘</td><td>男</td><td>88899900</td>

</tr></table></body></html>知识引入03<td>标签的属性2.表格标签的属性运行实例代码，效果如图。知识引入03<td>标签的属性2.表格标签的属性除了垂直方向的单元格可以合并外，水平方向的单元格也可以合并，例如要将example03.html中的“性别”和“电话”两个单元格合并，在例example03.html中第11行的<td>标签中添加“colspan="2"”，删掉第12行代码。保存文件并刷新页面，效果如图。合并单元格的规则如下注释或删除需要合并的单元格对应的代码。为预留的单元格设置colspan或rowspan属性，属性值为水平方向合并的列数或垂直方向合并的行数。知识引入注意在<td>标签的属性中，重点掌握colspan和rowspan属性。其他的属性了解即可，不建议使用，因为这些属性均可用CSS样式属性替代。②当对某一个<td>标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。③当对某一个<td>标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。2.表格标签的属性03<td>标签的属性知识引入04<th>标签的属性2.表格标签的属性为表格设置表头可以使表格的结构更加清晰，方便查阅。表头一般位于表格的第1行或第1列，设置了表头的表格如图。知识引入熟悉表格标签的属性，能够运用这些属性创建不同形态的表格。学习目标3.表格的结构知识引入为了使搜索引擎更好地理解网页内容，会将表格划分为头部、主体和底部，以定义网页中的不同内容。用于划分表格结构的标签如下。3.表格的结构用于定义表格的主体，位于<table>标签中、<tfoot>标签之后，一般包含网页中除头部和底部之外的其他内容。<thead><tbody><tfoot>用于定义表格的底部，位于<table>标签中、<thead>标签之后，一般包含企业信息、版权信息等底部信息。用于定义表格的头部，必须位于<table>标签中，一般包含网页的Logo和导航等头部信息。知识引入下面使用上述标签来布局一个简单的网页，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>表格的结构</title></head>3.表格的结构知识引入<body><tablewidth="600"border="1"cellspacing="0"align="center"><thead>

<tr><tdcolspan="3">网站的Logo</td></tr><tr><th><ahref="#">首页</a></th><th><ahref="#">关于我们</a></th><th><ahref="#">联系我们</a></th></tr></thead>3.表格的结构<thead>用于定义表格的头部知识引入<tbody>

<trheight="150"><td>主体的左侧</td><td>主体的中间</td><td>主体的右侧</td></tr><trheight="150"><td>主体的左侧</td><td>主体的中间</td><td>主体的右侧</td></tr></tbody>3.表格的结构用于定义表格的主体知识引入<tfoot>

<tr><tdcolspan="3"align="center">企业信息©【版权信息】</td></tr></tfoot></table></body></html>3.表格的结构用于定义表格的底部知识引入运行示例代码，效果如图。3.表格的结构知识引入掌握使用CSS控制表格样式的方法，能够使用CSS设置表格的样式。学习目标4.

CSS控制表格样式知识引入除了表格标签自带的属性，还可用CSS样式属性来控制表格样式。此外，CSS还提供了表格专用属性，以便开发者控制表格样式。接下来，将针对CSS控制表格边框、CSS控制单元格边距和CSS控制单元格宽度和高度进行详细讲解。4.

CSS控制表格样式CSS控制表格边框CSS控制单元格边距CSS控制单元格宽度和高度知识引入01CSS控制表格边框使用<table>标签的border属性可以为表格设置边框，但是通过这种方式设置的边框效果并不理想，想要更改边框的颜色或改变单元格的边框大小会很困难。使用CSS边框样式属性border则可以轻松地控制表格边框的宽度和颜色。4.

CSS控制表格样式知识引入下面通过代码演示使用CSS设置表格边框样式的具体方法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>CSS控制表格边框</title>01CSS控制表格边框4.

CSS控制表格样式知识引入<style>table{

width:800px;

height:300px;

border:1pxsolid#30F;}

th,td{border:1pxsolid#30F;}

</style></head>01CSS控制表格边框4.

CSS控制表格样式设置表格的边框样式为单元格单独设置边框样式知识引入<body><table><tr><th>序号</th><th>古诗名称</th><th>作者</th><th>古诗内容</th></tr>01CSS控制表格边框4.

CSS控制表格样式知识引入<tr><th>1</th><td>《望庐山瀑布》</td><td>李白</td><td>日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。</td></tr>01CSS控制表格边框4.

CSS控制表格样式知识引入<tr><th>2</th><td>《清明》</td><td>杜牧</td><td>清明时节雨纷纷，路上行人欲断魂。借问酒家何处有？牧童遥指杏花村。</td></tr>01CSS控制表格边框4.

CSS控制表格样式知识引入<tr><th>3</th><td>《九月九日忆山东兄弟》</td><td>王维</td><td>独在异乡为异客，每逢佳节倍思亲。遥知兄弟登高处，遍插茱萸少一人。</td></tr>01CSS控制表格边框4.

CSS控制表格样式知识引入<tr><th>4</th><td>《采莲曲》</td><td>王昌龄</td><td>荷叶罗裙一色裁，芙蓉向脸两边开。乱入池中看不见，闻歌始觉有人来。</td></tr>01CSS控制表格边框4.

CSS控制表格样式知识引入<tr><th>5</th><td>《忆江南》</td><td>白居易</td><td>江南好，风景旧曾谙。日出江花红胜火，春来江水绿如蓝。能不忆江南？</td></tr></table></body></html>01CSS控制表格边框4.

CSS控制表格样式知识引入运行示例代码，效果如图。4.

CSS控制表格样式01CSS控制表格边框知识引入在例example05.html中设置<table>标签样式的CSS代码中添加如下代码。01CSS控制表格边框4.

CSS控制表格样式 border-collapse:collapse;合并边框知识引入保存文件并刷新页面，效果如图。01CSS控制表格边框4.

CSS控制表格样式知识引入注意当border-collapse属性值设置为collapse时，在HTML代码中设置的cellspacing属性值无效。<tr>标签无border属性。01CSS控制表格边框4.

CSS控制表格样式知识引入使用<table>标签的属性美化表格时，可以通过cellpadding和cellspacing分别控制单元格内容与单元格边框之间的距离以及单元格与单元格之间的距离。这种方式与在盒子模型中设置内外边距非常类似，那么能不能使用padding属性和margin属性为单元格设置内外边距呢？02CSS控制单元格边距4.

CSS控制表格样式知识引入下面新建一个3行3列的表格，使用CSS设置其样式，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>CSS控制单元格边距</title>4.

CSS控制表格样式02CSS控制单元格边距知识引入<style>table{border:1pxsolid#30F;

}th,td{border:1pxsolid#30F;

padding:50px;

margin:50px;

}</style></head>4.

CSS控制表格样式02CSS控制单元格边距为单元格单独设置边框样式为单元格内容与单元格边框之间设置50px的内边距

设置表格的边框样式为单元格与单元格之间设置50px的外边距知识引入<body><table><tr><th>成长领域</th><th>核心要点</th><th>相关说明</th></tr>4.

CSS控制表格样式02CSS控制单元格边距知识引入<tr><th>社交技能</th><td>真诚待人，善于沟通</td><td>通过真诚对待他人，建立良好的人际关系并学会有效沟通，增强合作能力，为个人在社会中的发展创造更多机会。</td></tr>4.

CSS控制表格样式02CSS控制单元格边距知识引入<tr><th>心理健康</th><td>积极乐观，坚韧不拔</td><td>保持积极乐观的心态，勇于面对挫折和失败，并具备坚韧不拔的毅力，可以帮助个人在逆境中崛起，实现自我超越。</td></tr></table></body></html>

CSS控制表格样式02CSS控制单元格边距知识引入运行示例代码，效果如图。4.

CSS控制表格样式02CSS控制单元格边距知识引入注意<tr>标签无内边距属性padding和外边距属性margin。4.

CSS控制表格样式02CSS控制单元格边距知识引入使用CSS中的width属性和height属性可以控制单元格的宽度和高度，下面通过代码演示，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>CSS控制单元格宽度和高度</title>4.

CSS控制表格样式03CSS控制单元格宽度和高度知识引入<style>table{border:1pxsolid#30F;

border-collapse:collapse;}th,td{border:1pxsolid#30F;}.one{width:100px;height:80px;}.two{height:40px;}.three{width:200px;}</style></head>4.

CSS控制表格样式03CSS控制单元格宽度和高度知识引入<body><table><tr><tdclass="one">A区域</td><tdclass="two">B区域</td></tr><tr><tdclass="three">C区域</td><tdclass="four">D区域</td></tr></table></body></html>4.

CSS控制表格样式03CSS控制单元格宽度和高度知识引入运行示例代码，效果如图。4.

CSS控制表格样式03CSS控制单元格宽度和高度项目实现掌握表格标签和属性，能够使用表格标签和属性制作一个简单的在线简历表。学习目标项目实现课题问卷调研表案例6-2案例描述一些网站为了进行调研和收集相关信息，常常采用问卷调研表这一有效工具。网站中的问卷调研表其本质是各种表单控件组成的一个表单，例如单行文本输入框、下拉列表、复选框等。本案例将通过表单相关标签和属性制作一个简单的课题问卷调研表，效果如图。知识引入了解表单的构成，能够说出表单的构成部分。学习目标1.认识表单知识引入在HTML中，一个完整的表单通常由表单控件、提示信息和表单域3个部分构成，如图。1.认识表单表单域是一个类似于容器的存在，它的主要功能是用来采集用户输入或选择的数据，为用户提供一个相对独立的空间，将用户输入或选择的数据进行收集和整理通常包含单行文本输入框、密码输入框、复选框、提交按钮等提示信息通常包含一些具有说明性的文字知识引入掌握创建表单的方法，能够在网页中创建表单。学习目标2.创建表单知识引入在HTML中，<form>标签用于创建表单，即定义表单域，以实现用户信息的收集和传递，其中的所有内容都会提交给服务器。创建表单的基本语法格式如下。2.创建表单<formaction="URL"method="提交方式"name="表单名称">

各种表单控件</form>知识引入action、method和name为<form>标签的常用属性，分别用于定义URL、表单数据的提交方式和表单名称。2.创建表单actionmethodname知识引入2.创建表单01action属性表单在收集到信息后，需要将信息传递给服务器进行处理。action的属性值可以是相对路径或绝对路径，用于指定接收并处理表单数据的服务器的URL。这个URL实际上是服务器的一个重要入口，它通常指向一个脚本文件或者专门的表单数据处理程序，从而对从表单中获取的数据进行一系列的操作。知识引入2.创建表单例如，将数据传送到名为“form_action.asp”的页面处理，示例代码如下。<formaction="form_action.asp">例如，将数据传送到指定电子邮箱，示例代码如下。<formaction="mailto:example@">01action属性知识引入2.创建表单method属性用于设置表单数据的提交方式，常见的取值为get或post，其中get为method属性的默认值，示例代码如下。<formaction="form_action.asp"method="get">02action属性如果采用get方式，浏览器会与表单处理服务器建立连接，然后直接一次性发送所有的表单数据。如果采用post方式，浏览器会按照下面两个步骤来发送数据。浏览器与action属性中指定的表单处理服务器建立连接。浏览器将数据分段传输给服务器。知识引入2.创建表单表单中的name属性用于指定表单名称，而具有name属性的表单控件会将用户填写或选择的内容提交给服务器。03name属性知识引入2.创建表单接下来，创建一个表单，如例。03name属性<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>创建表单</title></head>知识引入2.创建表单03name属性<body><formaction="/index.asp"method="post"name="biao">

账号：<inputtype="text"name="zhanghao">密码：<inputtype="password"name="mima"><inputtype="submit"value="提交"></form></body></html>知识引入2.创建表单运行示例代码，效果如图。03name属性知识引入掌握<input>标签，能够熟练使用<input>标签的常用属性。学习目标3.<input>标签知识引入在浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等表单控件，要想定义这些控件就需要使用<input>标签。使用<input>标签定义的表单控件称为input控件。3.<input>标签知识引入创建input控件的基本语法格式如下。<inputtype="控件类型">3.<input>标签为单标签指定不同的控件类型知识引入3.<input>标签属性属性值描述type

text单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮除了type属性，<input>标签还有很多其他的属性，常用属性及描述如表。知识引入3.<input>标签属性属性值描述

type

submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域知识引入3.<input>标签属性属性值描述name用户自定义input控件名称value用户自定义input控件中的默认文本size正整数input控件的宽度readonlyreadonlyinput控件的内容为只读（不能编辑）的知识引入3.<input>标签属性属性值描述disableddisabled第1次加载页面时禁用input控件（显示为灰色）checkedchecked定义默认选中的单选按钮或复选框maxlength正整数input控件中允许输入的最多字符数知识引入创建input控件的基本语法格式如下。<inputtype="控件类型">3.<input>标签为单标签指定不同的控件类型知识引入下面通过代码演示表<input>标签的常用属性及描述中部分属性的用法。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>input控件</title></head>3.<input>标签知识引入<body><formaction="#"method="post">用户名：

<inputtype="text"value="张三"maxlength="6"><br><br>密码：

<inputtype="password"size="40"><br><br>性别：

<inputtype="radio"name="gender"checked="checked">男<inputtype="radio"name="gender">女<br><br>3.<input>标签知识引入兴趣：

<inputtype="checkbox">唱歌<inputtype="checkbox">跳舞<inputtype="checkbox">游泳<br><br>3.<input>标签知识引入上传头像：<inputtype="file"><br><br>

<inputtype="submit">

<inputtype="reset">

<inputtype="button"value="普通按钮">

<inputtype="image"src="images/login.png"><inputtype="hidden">

</form></body></html>

3.<input>标签知识引入运行示例代码，效果如图。3.<input>标签知识引入接下来针对input控件进行简单介绍。3.<input>标签单行文本输入框<inputtype="text">单行文本输入框用于输入简短的信息，这些信息可以涵盖多种类型，例如用户名、账号、证件号码等。01密码输入框<inputtype="password">密码输入框用于输入密码信息，在其中输入的内容会以圆点（或星号等，具体显示形式可能因浏览器或设备而异）的形式显示，这一设计旨在保护用户的隐私和信息安全，确保用户输入的敏感信息不会轻易泄露。02知识引入3.<input>标签单选按钮<inputtype="radio">单选按钮用于单项选择，例如选择性别等。需要注意的是，在定义单选按钮时，必须为同一组单选按钮指定相同的name值，这样才能实现单选效果。此外，可以对单选按钮应用checked属性，以指定默认选中的单选按钮。03密码输入框<inputtype="password">复选框用于多项选择，例如选择兴趣等，可对其应用checked属性，以指定默认选中的复选框。04知识引入3.<input>标签普通按钮<inputtype="button">普通按钮常常配合JavaScript使用，此处了解即可。05提交按钮<inputtype="submit">提交按钮是表单中的核心控件，用户在完成信息的输入后，一般都需要单击提交按钮完成表单数据的提交。应用value属性，可以改变提交按钮上的默认文本。06知识引入3.<input>标签重置按钮<inputtype="reset">当用户输入的信息有误时，单击重置按钮可以清除已输入的所有信息。应用value属性，可以改变重置按钮上的默认文本。07图像形式的提交按钮<inputtype="image">图像形式的提交按钮与普通的提交按钮在功能上基本相同，但在外观上前者更加美观。需要注意的是，必须为图像形式的提交按钮定义src属性以指定图像的URL。08知识引入3.<input>标签隐藏域<inputtype="hidden">隐藏域对用户来说是不可见的，通常用于后台的程序，此处了解即可。09文件域<inputtype="file">当定义文件域后，页面中会出现“选择文件”按钮，可以通过选择文件的方式，将文件提交给后台服务器。10知识引入下面通过代码演示<label>标签与input控件的联合使用，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>label标签与input控件的联合使用</title></head>3.<input>标签知识引入<body><formaction="#"method="post"><labelfor="name">姓名：</label><inputtype="text"maxlength="6"id="name"><br><br>性别：<inputtype="radio"name="gender"checked="checked"id="man"><labelfor="man">男</label><inputtype="radio"name="gender"id="woman"><labelfor="woman">女</label></form></body></html>3.<input>标签知识引入运行示例代码，效果如图。3.<input>标签知识引入掌握<textarea>标签，能够熟练使用<textarea>标签的常用属性。学习目标4.<textarea>标签知识引入当定义input控件的type属性值为text时，可以创建一个单行文本输入框。但是，如果需要输入大量的信息，单行文本输入框就不再适用，为此HTML提供了<textarea>标签。通过<textarea>标签可以轻松创建多行文本输入框。<textarea>标签的基本语法格式如下。<textareacols="每行的字符数"rows="显示的行数">

文本</textarea>4.<textarea>标签知识引入除了cols属性和rows属性，<textarea>标签还有几个可选属性，分别为name属性、readonly属性和disabled属性，具体如表。4.<textarea>标签属性属性值描述name用户自定义控件名称readonlyreadonly控件的内容为只读（不能编辑）的disableddisabled第1次加载页面时禁用控件（显示为灰色）知识引入下面通过代码演示<textarea>标签的使用方法，如例。4.<textarea>标签<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>textarea标签的使用</title></head>知识引入4.<textarea>标签<body><formaction="#"method="post"><textareacols="60"rows="12">

君不见黄河之水天上来，奔流到海不复回。

君不见高堂明镜悲白发，朝如青丝暮成雪。

人生得意须尽欢，莫使金樽空对月。

天生我材必有用，千金散尽还复来。

烹羊宰牛且为乐，会须一饮三百杯。

岑夫子，丹丘生，将进酒，杯莫停。

知识引入4.<textarea>标签

与君歌一曲，请君为我倾耳听。

钟鼓馔玉不足贵，但愿长醉不复醒。

古来圣贤皆寂寞，惟有饮者留其名。

陈王昔时宴平乐，斗酒十千恣欢谑。

主人何为言少钱，径须沽取对君酌。

五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</textarea><br><inputtype="submit"value="提交"></form></body></html>知识引入运行示例代码，效果如图。4.<textarea>标签知识引入掌握<select>标签，能够熟练使用<select>标签的常用属性。学习目标4.<select>标签知识引入浏览网页时经常会看到包含多个选项的下拉列表，它们一般用于选择所在的城市、出生年月、兴趣爱好等。图下拉列表所示为一个下拉列表，当单击按钮时，会出现一个选项列表，如图选项列表所示。在HTML中，要制作这种下拉列表需要使用<select>标签。4.<select>标签知识引入使用<select>标签创建下拉列表的基本语法格式如下。4.<select>标签<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>

用于在表单中添加一个下拉列表<option>标签嵌套在<select>标签中，用于定义下拉列表中的具体选项，每个<select>标签中至少应包含一个<option>标签知识引入在HTML5中，可以为<select>标签和<option>标签定义属性，以改变下拉列表的外观，它们的常用属性及描述如表。4.<select>标签标签常用属性描述<select>size用于指定下拉列表的可见选项数，取值为正整数multiple当定义multiple="multiple"时，下拉列表将具有多项选择功能，方法为在按住“Ctrl”键的同时选择选项<option>selected当定义selected="selected"时，当前选项即默认选中项知识引入下面通过代码演示下拉列表的使用方法，如例。4.<select>标签<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>下拉列表</title></head>知识引入4.<select>标签<body><formaction="#"method="post">所在校区：<br><select><option>-请选择-</option><option>北京</option><option>上海</option><option>广州</option><option>武汉</option><option>成都</option></select><br><br>知识引入4.<select>标签特长（单选）：<br><select><option>唱歌</option><optionselected="selected">画画</option><option>跳舞</option></select><br><br>知识引入4.<select>标签爱好（多选）：<br><selectmultiple="multiple"size="4"><option>读书</option><optionselected="selected">编程</option><option>旅行</option><optionselected="selected">听音乐</option><option>踢球</option></select><br><br><inputtype="submit"value="提交"></form></body></html>知识引入运行示例代码，效果如图。4.<select>标签知识引入通过代码演示使用<optgroup>标签对下拉列表中的选项进行分组的方法，如例。4.<select>标签<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>使用optgroup标签对下拉列表中的选项进行分组</title></head>知识引入4.<select>标签<body><formaction="#"method="post">城区：<br><select><optgrouplabel="北京"><option>东城区</option><option>西城区</option><option>朝阳区</option><option>海淀区</option></optgroup>知识引入4.<select>标签<optgrouplabel="上海"><option>浦东新区</option> <option>徐汇区</option> <option>虹口区</option></optgroup></select></form></body></html>知识引入运行示例代码，效果如图。4.<select>标签项目实现掌握表单的相关属性，能够通过表单相关标签和属性制作一个简单的课题问卷调研表。学习目标项目实现员工信息登记表案例6-3案例描述员工信息登记表用于对员工信息进行收集，可使员工档案管理更加科学化、信息化。本案例将使用表单控件，并通过CSS控制表单样式来制作一个员工信息登记表，其效果如图。知识引入掌握使用CSS控制表格样式的方法，能够使用CSS设置表格的样式。学习目标CSS控制表单样式知识引入在网页设计中，表单既要具有相应的功能也要具有美观的样式，使用CSS可以轻松控制表单的样式。下面将通过具体代码来讲解CSS控制表单样式，效果如图。CSS控制表单样式知识引入通过在<p>标签中嵌套<span>标签和<input>标签进行布局，如下。CSS控制表单样式<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>CSS控制表单样式</title></head>知识引入CSS控制表单样式<body><formaction="#"method="post"><p><spanclass="left">账号/号码：</span><inputtype="text"value="itcast"class="num"></p>知识引入CSS控制表单样式<p><spanclass="left">密码：</span><inputtype="password"class="pass"></p><inputtype="button"class="btn"></form></body></html>知识引入运行示例代码，效果如图。CSS控制表单样式知识引入为了使表单更加美观，下面引入内嵌式CSS样式对其进行修饰，具体代码如下。CSS控制表单样式<style>body{font-size:12px;

font-family:"宋体";}

/*全局控制*/body,

form,input{padding:0;margin:0;border:0;}知识引入CSS控制表单样式form{width:300px;height:135px;padding-top:15px;margin:50pxauto;/*使表单在浏览器中居中*/background:#DCF5FA;/*为表单添加背景颜色*/}知识引入CSS控制表单样式p{width:273px;height:24px;padding-left:25px;margin-bottom:15px;}知识引入CSS控制表单样式span{/*定义左边文本的样式

*/display:inline-b

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第6-10章为网页添加表格和表单-实战开发好趣艺术设计部落首页

文档简介

温馨提示

最新文档

评论

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第6-10章 为网页添加表格和表单-实战开发 好趣艺术设计部落首页

文档简介

温馨提示

最新文档

评论

相关文档

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第6-10章为网页添加表格和表单-实战开发好趣艺术设计部落首页