Java_Web应用开发技术与案例教程课件第2章-HTML表单标签与表单设计
合集下载
JavaWeb应用开发教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集
2.3 .1 JavaScript基本语法
(2)数组定义 var 数组名= new Array(数组长度) 例如：
var arr = new Array(3); 数组元素可以通过下标访问 例如： arr[0]=20; 通过arr.length可以取得数组的长度
2.3 .1 JavaScript基本语法
2.3.2 JavaScript常用内置对象
1．window对象: window对象表示的是一个和浏览器相关的最高级对象 . Window对象最常用的地方在于从一个窗口中新开一个窗口，它的基本语法如下： [NewWindow=]window.open(url，windowName[,windowPros])； 其中： newWindow为表示这个新开窗口对象的变量名称； url是这个新开窗口所引用的url； windowPros为新开窗口的属性，可以取下面各值： Toolbar：用于指明新开窗口是否需要标准工具栏； status：用于指明新开窗口是否需要状态条； menubar．用于指明新开窗口是否需要菜单栏； scrollbar：用于指明当新开窗口中的文档的内容超出窗口大小的时候是否需要滚动 条； resizable：是否允许改变新开窗口的大小； width：指定新开窗口的宽度； height：指定新开窗口的高度； top：指定新开窗口距离电脑屏幕上方的像素； left：指定新开窗口距离电脑屏幕左边的像素。
Java Web应用开发
☆
第二章 Java Web编程基础
：
目标
• 掌握HTML的基本元素 • 掌握HTML的table元素 • 掌握HTML的form元素 • 理解JavaScript的基本原理。 • 掌握JavaScript的基本语法。 • 理解JavaScript事件机制。 • 掌握CSS基本原理 • 掌握CSS在布局中的应用
第2章 HTML入门(网页制作案例教程课件)
2020/7/26
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
HTML制作表单ppt课件
name=“login”>
用户名：<input type ="text" name="userName"/> <br/>
年 龄：<input type="text" name="age"/> <br/>
<input type="submit"/>
action属性值：url地址
</form> Nhomakorabea相对或绝对路径
• 创建图像按钮
• <input type=“image” scr=“图像地址” name=“控
件名称”/>
▪ type属性：image ▪ name属性值：控件名称 ▪ src属性值：图像文件地址
代码 示例
22
<input>——隐藏控件
• 创建隐藏控件
• <input type=“hidden” name=“控件名”/>
• size属性：文本框长度
• maxlength属性：文本框最多输入字符数
• value属性：文本框中默认值
代码 示例
15
<input>——密码框
• 创建一个密码文本框 • <input type="password" name="名称" size="NB"
maxlength="NB"/>
• type属性值：password • name属性值：控件名称 • size属性值：指定密码框大小 • maxlength属性值：允许输入最多字符 • 输入的文本显示为密码形式
Web应用程序设计案例教程第2章
6
2.2.2 的基本对象
1. OleDbConnection对象
☺ 要对数据库进行各种操作，OleDbConnection对象负责与数据库取得联系，
语法格式：
格式1：Dim 对象名称 As New OleDbConnection() 格式2：Dim 对象名称 As New OleDbConnection("连接字符串")
16
【课外拓展 课外拓展】 课外拓展
利用显示图书表所有记录的信息。
17
本章小结
本章简述了网上书店数据库，介绍了SQL语句， 重点讲述了数据库访问模型和基本 概念，通过实例介绍了访问数据库 的方法。 使用访问数据库的步骤通常为：先 通过Connection对象建立与数据源的连接，然 后直接通过Command对象或DataAdapter对象 加载Command对象执行对数据库的操作(插入、 查询、删除、修改)，若为查询操作则由被填 充的DataSet对象来访问数据。 通过本章的学习，读者要掌握访问 数据库的过程。
2.2.2 的基本对象
6. SqlDataReader对象 ☺SqlDataReader对象用来从SQL Server数据库中得到一个只读的、 单向的数据流。用于完成从SqlCommand.ExecuteReader方法形 成的SqlDataReader中读取数据。其主要属性和主要方法与 OleDbDataReader对象相似。 7. DataSet对象 ☺DataSet对象是的“断开”结构的核心组件，其主要作 DataSet 用是实现独立于任何数据源的数据访问。建立此对象的格式为： ☺Dim 对象名称 As New DataSet() 8. OleDbDataAdapter对象 ☺OleDbDataAdapter对象执行各种SQL语句，并将操作结果填入 Dataset对象中，因此OleDbDataAdapter在此所扮演的角色是担 任数据库与Dataset对象之间沟通的桥梁。 9. SqlDataAdapter对象 ☺Dataset对象总是要和SqlDataAdapter对象配合使用。 SqlDataAdapter对象的作用如同Dataset对象和数据源之间的桥梁。
《课JavaWeb基础》PPT课件
ASP: 即Active Server Pages，vbscript的子集，
●优点 支持动态网页功能，易于使用
●缺点 ASP虽然功能非常优越，因为脚本是在服务器端运行
的，所以Web服务器完成所有处理后，将标准的HTML页面 送往浏览器。这意味着，ASP只能在可以支持的服务器上运 行，但目前只能在微软公司的NT平台的IIS服务器上执行限 制了ASP的应用
C/S结构
C/S结构
C/S结构，即Client/Server（客户机／服务器）结构，是 一种软件系统体系结构。它把整个软件系统分成Client和 Server两个部分，Client和Server通常处在不同的计算机
上。
客户机
数据库
数据库服务器 结请 果求 Ethernet
客户机
……
服务器层 Server
动态网站与静态网站
动态网站有三个特点： 1) “交互性”即网页会根据用户的要求和选择而动态改
变和响应。 2) “自动更新”即无须手动地更新HTML文档，便会自动
生成新的页面，可以大大节省工作量。 3) “因时因人而变”，即当不同的时间、不同的人访问
同一网址时会产生不同的页面。
注：一般我们说的动态Web网站是需要与数据库进行交互 的程序。
几种B/S技术介绍
动态网页技术 CGI/ASP/PHP/JSP
CGI：即Common Gateway Interface(公用网 关接口)。
您可以使用不同的程序编写适合的CGI程序，如 Visual Basic、Delphi或C/C＋＋等。此技术现 已淘汰
动态网页技术 CGI/ASP/PHP/JSP
具有内置Servlet容器的Web服务器，如：Tomcat 使用Servlet引擎插件的产品，如JRun;Apache Web服务
●优点 支持动态网页功能，易于使用
●缺点 ASP虽然功能非常优越，因为脚本是在服务器端运行
的，所以Web服务器完成所有处理后，将标准的HTML页面 送往浏览器。这意味着，ASP只能在可以支持的服务器上运 行，但目前只能在微软公司的NT平台的IIS服务器上执行限 制了ASP的应用
C/S结构
C/S结构
C/S结构，即Client/Server（客户机／服务器）结构，是 一种软件系统体系结构。它把整个软件系统分成Client和 Server两个部分，Client和Server通常处在不同的计算机
上。
客户机
数据库
数据库服务器 结请 果求 Ethernet
客户机
……
服务器层 Server
动态网站与静态网站
动态网站有三个特点： 1) “交互性”即网页会根据用户的要求和选择而动态改
变和响应。 2) “自动更新”即无须手动地更新HTML文档，便会自动
生成新的页面，可以大大节省工作量。 3) “因时因人而变”，即当不同的时间、不同的人访问
同一网址时会产生不同的页面。
注：一般我们说的动态Web网站是需要与数据库进行交互 的程序。
几种B/S技术介绍
动态网页技术 CGI/ASP/PHP/JSP
CGI：即Common Gateway Interface(公用网 关接口)。
您可以使用不同的程序编写适合的CGI程序，如 Visual Basic、Delphi或C/C＋＋等。此技术现 已淘汰
动态网页技术 CGI/ASP/PHP/JSP
具有内置Servlet容器的Web服务器，如：Tomcat 使用Servlet引擎插件的产品，如JRun;Apache Web服务
Java_Web应用开发技术与案例教程课件第2章-HTML文档结构与基本语法
网页文件是利用HTML所规定的标签定义网页中的各种元素的性质和特点，从而完成 网页所要求的功能。例2-1运行界面
本小节总结 回顾，所介绍的主要知识点内容！
实际上，本引言已经介绍完成HTML的基本内容。这些知识点理解 了，我们的HTML也就学会了，后面的问题就是如何应用HTML设计程 序了。
后面的内容： 介绍常见的标签及其使用，有的介绍的详细，有的不介绍。你们在 以后，可以根据需要自学相关的标签。
本节内容实际上介绍各类标签的使用方法，其实，我们可以不需要详细介绍， 在设计网页时，根据需要直接查阅所需要的标签即可。
提示：HTML网页设计的基本思想与方法
（1）设计网页，就是在显示器上，按一定的格式展示所希望显示的信息。
（2）为了显示不同的信息，采用不同的标签及其相应的属性设置要显示信息的格式和 样式。 例如：
——利用浏览器打开静态网页程序（*.html） （2）第二种方式：程序存放到服务器上，由浏览器请求服务器，然后服务器响应返回 信息，再有浏览器解释执行并显示网页。注意：所有的实际应用程序，都是采用这种 方式。
引言——5_HTML文件
用HTML编写的超文本文档称为HTML文档（文件），是一个放置了“标签”的文 本文件，以“.html”或“.htm”为扩展名，可供浏览器解释执行的网页文件 例2-1源代码
再例如： <font size="30">山东农业大学</font>
1.3 注释说明标记
注释标记用于在HTML源码中插入注释。 注释部分，不会再会被浏览器解释执行，也不显示在网页上，只是 对我们编辑的网页某些部分的说明。
基本语法： <!-- 注释内容 -->
应用示例——理解标签的分类、使用格式、属性属性值
本小节总结 回顾，所介绍的主要知识点内容！
实际上，本引言已经介绍完成HTML的基本内容。这些知识点理解 了，我们的HTML也就学会了，后面的问题就是如何应用HTML设计程 序了。
后面的内容： 介绍常见的标签及其使用，有的介绍的详细，有的不介绍。你们在 以后，可以根据需要自学相关的标签。
本节内容实际上介绍各类标签的使用方法，其实，我们可以不需要详细介绍， 在设计网页时，根据需要直接查阅所需要的标签即可。
提示：HTML网页设计的基本思想与方法
（1）设计网页，就是在显示器上，按一定的格式展示所希望显示的信息。
（2）为了显示不同的信息，采用不同的标签及其相应的属性设置要显示信息的格式和 样式。 例如：
——利用浏览器打开静态网页程序（*.html） （2）第二种方式：程序存放到服务器上，由浏览器请求服务器，然后服务器响应返回 信息，再有浏览器解释执行并显示网页。注意：所有的实际应用程序，都是采用这种 方式。
引言——5_HTML文件
用HTML编写的超文本文档称为HTML文档（文件），是一个放置了“标签”的文 本文件，以“.html”或“.htm”为扩展名，可供浏览器解释执行的网页文件 例2-1源代码
再例如： <font size="30">山东农业大学</font>
1.3 注释说明标记
注释标记用于在HTML源码中插入注释。 注释部分，不会再会被浏览器解释执行，也不显示在网页上，只是 对我们编辑的网页某些部分的说明。
基本语法： <!-- 注释内容 -->
应用示例——理解标签的分类、使用格式、属性属性值
Java Web程序设计案例教程第二章 HTML
择合适的形式在网页中显示表格。
案例2：HTML表格制作
【知识要点】 表格的基本结构 列
表格标题<caption>
列标题 <th>
单元格 <td>
行 <tr>
HTML中的表格<table><th><tr><td> 广泛使用表格来存放网页上的文本和图像
案例2：HTML表格制作
【实施步骤】
1.打开Webapps目录，在该目录下创建文件夹chap02（后面的案例直接打开）。 2.在chap02文件夹下新建HTML文件table.htm ，代码如下： <!DOCTYPE html> <html> <head> <title>网页中的表格</title> </head> <body> <table align = "center" bordercolor = "#FF3399" cellpadding = "5" cellspacing= "0" bgcolor = "#FFFF99" border = "10" width = "300"> <caption>表格占页面的70%</caption> <tr align = "center"> <td>序号</td> <td>姓名</td> </tr> <tr align = "center"> <td>1</td> <td>张三</td> </tr> <tr align = "center"> <td>2</td> <td>李四</td> </tr> </table></body></html>
案例2：HTML表格制作
【知识要点】 表格的基本结构 列
表格标题<caption>
列标题 <th>
单元格 <td>
行 <tr>
HTML中的表格<table><th><tr><td> 广泛使用表格来存放网页上的文本和图像
案例2：HTML表格制作
【实施步骤】
1.打开Webapps目录，在该目录下创建文件夹chap02（后面的案例直接打开）。 2.在chap02文件夹下新建HTML文件table.htm ，代码如下： <!DOCTYPE html> <html> <head> <title>网页中的表格</title> </head> <body> <table align = "center" bordercolor = "#FF3399" cellpadding = "5" cellspacing= "0" bgcolor = "#FFFF99" border = "10" width = "300"> <caption>表格占页面的70%</caption> <tr align = "center"> <td>序号</td> <td>姓名</td> </tr> <tr align = "center"> <td>1</td> <td>张三</td> </tr> <tr align = "center"> <td>2</td> <td>李四</td> </tr> </table></body></html>
Web应用开发技术课件——HTML技术
第2章 HTML技术
本章目标
本章结束ቤተ መጻሕፍቲ ባይዱ，学员能够：
了解HTML基本概念 了解HTTP协议 了解Web站点发布原理 掌握HTML基本词法结构 熟练HTML常用词法
2.1 HTML基本概述及其特点
超文本标记语言HTML（Hyper Text Markup Language）
一个HTML文档包含两部分内容：文档本身 要描述的内容和描述内容的HTML标记。
值，分别对应将中间的字体循环移动、只 移动一次、在屏幕中间左右移动。
2.5.7 文字移动(续)
LOOP属性决定了文字的移动次数：
语法: 说明:
<MARQUEE LOOP=“”></MAEQUEE>
其中的LOOP属性的属性值是取一个 数值，表示将中间的字体循环移动的 次数。
2.5.7 文字移动(续)
2.5.9 列表（续）
语法: <LI TYPE=“”></LI>
说明: TYPE属性是可选的，一般情况下是不需要的， 因为在整体列表定义时应该已经定义完毕， 只有在极少数情况下，需要使不同表项的强 调符不同，才有必要在这里定义这个属性。 属性值的选择和前面列表的属性选项一致。
2.5.9 列表（续）
2.5.9 列表
HTML通常常用的有三种类型的列表(list)，分别 是无序列表，有序列表，定义列表。各种列表单 元的HTML代码具有相同的结构：首先是起始标 记，定义了整个列表的开始，同时定义这个列表 的属性；然后在其中定义每一个选项；最后是列 表的结束标记。
列表项中不仅可以含有文本，而且可以含有除标 题以外的其他字块，包括其他列表和列表单元， 因此，列表单元允许嵌套
语 <IMG SRC=“” ALIGN=“” BORDER=“” 法: ALT=“”> 说 其中属性SRC表示图片的来源（存放路 明: 径）,属性ALIGN属性则标识了图片在页
本章目标
本章结束ቤተ መጻሕፍቲ ባይዱ，学员能够：
了解HTML基本概念 了解HTTP协议 了解Web站点发布原理 掌握HTML基本词法结构 熟练HTML常用词法
2.1 HTML基本概述及其特点
超文本标记语言HTML（Hyper Text Markup Language）
一个HTML文档包含两部分内容：文档本身 要描述的内容和描述内容的HTML标记。
值，分别对应将中间的字体循环移动、只 移动一次、在屏幕中间左右移动。
2.5.7 文字移动(续)
LOOP属性决定了文字的移动次数：
语法: 说明:
<MARQUEE LOOP=“”></MAEQUEE>
其中的LOOP属性的属性值是取一个 数值，表示将中间的字体循环移动的 次数。
2.5.7 文字移动(续)
2.5.9 列表（续）
语法: <LI TYPE=“”></LI>
说明: TYPE属性是可选的，一般情况下是不需要的， 因为在整体列表定义时应该已经定义完毕， 只有在极少数情况下，需要使不同表项的强 调符不同，才有必要在这里定义这个属性。 属性值的选择和前面列表的属性选项一致。
2.5.9 列表（续）
2.5.9 列表
HTML通常常用的有三种类型的列表(list)，分别 是无序列表，有序列表，定义列表。各种列表单 元的HTML代码具有相同的结构：首先是起始标 记，定义了整个列表的开始，同时定义这个列表 的属性；然后在其中定义每一个选项；最后是列 表的结束标记。
列表项中不仅可以含有文本，而且可以含有除标 题以外的其他字块，包括其他列表和列表单元， 因此，列表单元允许嵌套
语 <IMG SRC=“” ALIGN=“” BORDER=“” 法: ALT=“”> 说 其中属性SRC表示图片的来源（存放路 明: 径）,属性ALIGN属性则标识了图片在页
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
语法格式： <form name="表单名" method="提交方法"
action="处理程序"> ………..表单内容 </form>
其中：属性name是表单对象名称，
3.2 <input>标记及其属性
利用input标签给有关的变量提供数据（都为字符串类型）。
基本语法： <input name="输入域名称" type="域类型" value="输入域的值">
… </frameset>
（2）子窗口的设置 基本语法：
< frame src="html文件的位置" name="子窗口名称" scrolling="yes或no或auto">
例如：
frameset rows="80,*"> <frame src="ch02_7_top.html" name="top" scrolling="no"> <frameset cols="140,*"> <frame src="ch02_7_left.html“ name="left" scrolling="no"> <frameset rows=“50%,*"> <frame src="ch02_7_left.html“ name="left" scrolling="no"> <frame src="ch02_7_right.htm" name="right" scrolling="auto"> </frameset> </frameset>
<input>标记主要有六个属性： type，name，size，value，maxlength，check。 其中，name和type是必选的两个属性： name：属性的值是响应程序（由form标记中的action属性指定）中的变量名
type主要有9种类型：
名称
格式
文本域 <input type="text" name="“ maxlength=" " size=" " value=" ">
</frameset>
<a href=" ch02_7_imgTag.html" target="right">图像显示</a>> <a href=" ch02_7_viwTag.html" target="right">视频播放</a> <a href=" ch02_7_soundTag.html" target="right">音乐播放</a>
3 HTML表单标签与表单设计
表单是用户与服务器交互的主要方法，用户在表单中填入数据，提交给服务器程 序来处理。表单时Web程序中使用最多的。
在本节中，只介绍表单的设计，对于对表单中的数据数据如何处理，在第三章中 详细介绍。
表单示例：
单选元素
密码域元素
多行文 本元素 按钮元素
单行文本 元素
下拉列 表元素
密码域
<input type="password" name="" size=" " maxlength=" " value=" " >
单选按钮 <input type="radio" name="" value="" checked />
复选框
提交按钮 取消按钮 图像按钮
image 文件域
隐藏域
<input type="checkbox" name="" value="" checked /> <input type="submit" name=" " value=" "/> <input type="reset" name=" " value=" "/> <input type="image" src="图片"/> <input type="file" name="" size="" maxlength=""> <input type="hidden" name=" " value=" " />
</select>
3.4 多行文本框<textarea>标记
基本语法： <textarea name="" rows="" cols="" wrap="off | virtual | physical"> 初始值 </textarea>
其中： rows设置输入域的行数， cols设置输入域的列数， wrap设置是否自动换行。
</frameset>
（3） target属性
在框架结构子窗口的HTML文档中如果含有超链接，当用户点击该链接时，目标网 页显示的位置由target属性指定，若没有指定则在当前子窗口打开。
target属性使用格式：
<a href="目标网页地址“ target="显示目标网页的子窗口名字">超链接文字</a>
【运行】《运行界面》
课堂练习： 设计一个邮箱注册表单。
设计一个邮箱登录表单。
本小节结束
回顾，所介绍的主要知识点内容！ 表单的设计以及与其相关的各类输入标签
5、 HTML框架标签与框架设计——自学
框架将浏览器窗口分割为几个窗口，下图就是一个框架，该框架被分 为4个窗口。
商品导航： 左侧框架
顶部框 架
设计示例：
frameset rows="80,*"> <frame src="ch02_7_top.html" name="top" scrolling="no"> <frameset cols="140,*"> <frame src="ch02_7_left.html“ name="left" scrolling="no"> <frame src="ch02_7_right.htm" name="right" scrolling="auto"> </frameset>
基本语法： <select name"“ size= "" multiple>
<option value=“要获取的值” selected>显示信息</option> <option value=“要获取的值”>显示信息</option> …… </select>
例如：
<select name ="stuSelect2"> <option value=“10” selected>计算机科学与技术</option> <option value=“20” >网络工程</option> <option value=“30” >物联网工程</option> <option value=“40” >应用数学</option>
例题：按下图表单，给出设计
单选元素 密码域元素 多行文 本元素 按钮元素
【实现】源代码
单行文本 元素
下拉列 表元素
复选元素
文件域元素
3.3下拉列表框：<select>、<option>
下拉列表框是从多个列表中，选择一个或多个值，提供给变量。（当选多个时，用 数组存放）。
在表单中，通过<select>和<option>标记可设计一个下拉式的列表或带有滚动条 的列表，用户可以在列表中选中一个或多个选项。
例如：
个人介绍: <textarea name=“Letter” rows=“4” cols=“40”> 要显示的内容
</textarea>
4 、表单设计案例 ——学生入校注册页面设计
【例2-6】设计所示的学生信息注册网页。
【分析】
该页面采用表单的方式设计，为了使页面各元素整齐，采用表格的方 式控制元素的位置。该例中给出了表单常用的各种元素，请注意它们的使 用特点。 【实现】源代码
标题栏框架
商品介绍： 右侧框架
图 2-7 框架的简单结构
需要将网页分割为不同的部分，可以水平、垂直分隔。
（1）窗口的分割与设置 分割框架的语法结构： <frameset rows="高度1,高度2…"
action="处理程序"> ………..表单内容 </form>
其中：属性name是表单对象名称，
3.2 <input>标记及其属性
利用input标签给有关的变量提供数据（都为字符串类型）。
基本语法： <input name="输入域名称" type="域类型" value="输入域的值">
… </frameset>
（2）子窗口的设置 基本语法：
< frame src="html文件的位置" name="子窗口名称" scrolling="yes或no或auto">
例如：
frameset rows="80,*"> <frame src="ch02_7_top.html" name="top" scrolling="no"> <frameset cols="140,*"> <frame src="ch02_7_left.html“ name="left" scrolling="no"> <frameset rows=“50%,*"> <frame src="ch02_7_left.html“ name="left" scrolling="no"> <frame src="ch02_7_right.htm" name="right" scrolling="auto"> </frameset> </frameset>
<input>标记主要有六个属性： type，name，size，value，maxlength，check。 其中，name和type是必选的两个属性： name：属性的值是响应程序（由form标记中的action属性指定）中的变量名
type主要有9种类型：
名称
格式
文本域 <input type="text" name="“ maxlength=" " size=" " value=" ">
</frameset>
<a href=" ch02_7_imgTag.html" target="right">图像显示</a>> <a href=" ch02_7_viwTag.html" target="right">视频播放</a> <a href=" ch02_7_soundTag.html" target="right">音乐播放</a>
3 HTML表单标签与表单设计
表单是用户与服务器交互的主要方法，用户在表单中填入数据，提交给服务器程 序来处理。表单时Web程序中使用最多的。
在本节中，只介绍表单的设计，对于对表单中的数据数据如何处理，在第三章中 详细介绍。
表单示例：
单选元素
密码域元素
多行文 本元素 按钮元素
单行文本 元素
下拉列 表元素
密码域
<input type="password" name="" size=" " maxlength=" " value=" " >
单选按钮 <input type="radio" name="" value="" checked />
复选框
提交按钮 取消按钮 图像按钮
image 文件域
隐藏域
<input type="checkbox" name="" value="" checked /> <input type="submit" name=" " value=" "/> <input type="reset" name=" " value=" "/> <input type="image" src="图片"/> <input type="file" name="" size="" maxlength=""> <input type="hidden" name=" " value=" " />
</select>
3.4 多行文本框<textarea>标记
基本语法： <textarea name="" rows="" cols="" wrap="off | virtual | physical"> 初始值 </textarea>
其中： rows设置输入域的行数， cols设置输入域的列数， wrap设置是否自动换行。
</frameset>
（3） target属性
在框架结构子窗口的HTML文档中如果含有超链接，当用户点击该链接时，目标网 页显示的位置由target属性指定，若没有指定则在当前子窗口打开。
target属性使用格式：
<a href="目标网页地址“ target="显示目标网页的子窗口名字">超链接文字</a>
【运行】《运行界面》
课堂练习： 设计一个邮箱注册表单。
设计一个邮箱登录表单。
本小节结束
回顾，所介绍的主要知识点内容！ 表单的设计以及与其相关的各类输入标签
5、 HTML框架标签与框架设计——自学
框架将浏览器窗口分割为几个窗口，下图就是一个框架，该框架被分 为4个窗口。
商品导航： 左侧框架
顶部框 架
设计示例：
frameset rows="80,*"> <frame src="ch02_7_top.html" name="top" scrolling="no"> <frameset cols="140,*"> <frame src="ch02_7_left.html“ name="left" scrolling="no"> <frame src="ch02_7_right.htm" name="right" scrolling="auto"> </frameset>
基本语法： <select name"“ size= "" multiple>
<option value=“要获取的值” selected>显示信息</option> <option value=“要获取的值”>显示信息</option> …… </select>
例如：
<select name ="stuSelect2"> <option value=“10” selected>计算机科学与技术</option> <option value=“20” >网络工程</option> <option value=“30” >物联网工程</option> <option value=“40” >应用数学</option>
例题：按下图表单，给出设计
单选元素 密码域元素 多行文 本元素 按钮元素
【实现】源代码
单行文本 元素
下拉列 表元素
复选元素
文件域元素
3.3下拉列表框：<select>、<option>
下拉列表框是从多个列表中，选择一个或多个值，提供给变量。（当选多个时，用 数组存放）。
在表单中，通过<select>和<option>标记可设计一个下拉式的列表或带有滚动条 的列表，用户可以在列表中选中一个或多个选项。
例如：
个人介绍: <textarea name=“Letter” rows=“4” cols=“40”> 要显示的内容
</textarea>
4 、表单设计案例 ——学生入校注册页面设计
【例2-6】设计所示的学生信息注册网页。
【分析】
该页面采用表单的方式设计，为了使页面各元素整齐，采用表格的方 式控制元素的位置。该例中给出了表单常用的各种元素，请注意它们的使 用特点。 【实现】源代码
标题栏框架
商品介绍： 右侧框架
图 2-7 框架的简单结构
需要将网页分割为不同的部分，可以水平、垂直分隔。
（1）窗口的分割与设置 分割框架的语法结构： <frameset rows="高度1,高度2…"