网页设计————表单和框架的使用
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
scrolling=auto
26
表单简介
表单的用途
用户注册某种服务时，收集其姓名、地址、电 话号码、电子邮件地址和其他信息。 收集购买物品所需的信息。例如，如果想通过 Internet 购买一本书，就需要填写姓名、邮政 地址和付款方式等。
27
样本表单
28
单行文本输入 框(TEXT) 密码框 (PASSWORD)
SRC="URL"。当使用IMAGE作为输入类型时使用此属性， 它用于标识图像的位置。 31
表单控件的统一格式
指定元素的类型，可 为TEXT、RADIO、 SUBMIT等
控件的名称
控件的初始值
<FORM name="form3" method="post" action=""> <INPUT type="checkbox" name="gen" value="男" size="21" maxlength=4 checked="checked"> …… </FORM>
34
密码框基本语法
密码框
初始密码
密码区宽度
<INPUT type=“password ”
value=“ 123456 ”
size=“22”>
<FORM name="form2" method="post" action=""> …… <ቤተ መጻሕፍቲ ባይዱ>密 码： <INPUT value=“ 123456 ” type="password" size="22"> </P> 密码框，22 </FORM> 个字符宽度
第一个窗口要显示 的网页
框架使用示例：
<HTML> <HEAD> <TITLE>两个大小相等的框架</TITLE> </HEAD> <FRAMESET COLS="50%,*"> <FRAME SRC=x.html> <FRAME SRC=y.html> </FRAMESET> </HTML>
15
22
3、x1.html打开方式:target=_blank
1、框架文件：框架.html
框架名：index
框架名：content
目录文件：2、index.html内容
内容文件：3、x1.html内容 4、y1.html target=content
23
3、x1.html打开方式:target=_blank
VALUE SIZE
MAXLENG HT
此属性是可选属性，它指定表单控件的初始值 此属性指定表单元素的显示长度。用于文本输入的表单元 素即输入类型是TEXT或PASSWORD的
此属性用于指定在TEXT或PASSWORD表单元素中可以输 入的最大字符数。默认值为无限的
CHECKED
SRC
此属性是一个Boolean属性，指定按钮是否是被选中的。当 输入类型为RADIO或CHECKBOX时，使用此属性。
20
复习：<A>目标显示方式属性--target
用来指定目标窗口的打开方式。包含4个取值：
_blank：在新窗口中打开。
_parent：在上一级的浏览窗口中打开。
_self：在当前页面或框架中打开。 _top：在当前浏览窗口页面中打开。
<HTML> <head> </head> <BODY> <A HREF="x1.html" TARGET="_blank">文件x</A> </BODY> </HTML>
控件的初始 宽度
控件中输入的 最多字符个数
控件是否 被选中
32
Input – Type 属性的值
type取值 text password radio checkbox button submit reset image hidden 取值的含义 文字字段 密码域 单选按钮 复选框 普通按钮 提交按钮 重置按钮 图形域 隐藏域。不显示在页面，只将内容传递到 服务器中。 文件域 33
框架的边框
<html> <head> <title>框架的边框控制</title> </head> <frameset rows="30%,*" border="12"> <frame> <frameset cols="20%,*"> <frame> <frame> </frameset> </frameset> </html>
<html> <head> <title>采用整数设置窗口的水平分割</title> </head> <frameset rows="80,120,*"> <frame > <frame> <frame> </frameset> </html>
一个垂直分割的例子
<html> <head> <title>采用整数设置窗口的水平分割</title> </head> <frameset rows="80,120,*"> <frame> <frame> <frame> </frameset> </html>
13
框架集的基本结构
<html> <head> <title>框架的基本结构</title> </head> 将窗口分割成左中
右3个部分,可选
将窗口分割成上 下2个部分,可选
边框尺 寸大小
<frameset cols= "25%,50%,* " rows = "50%,* " border=5> <frame src= "the_first.html " > <frame> </frameset> </html>
4、y1.html target=content
左框架：index
目录文件：2、index.html内容
1、框架集：框架.html
右框架：content 内容文件：3、x1.html内容
24
内嵌框架
IFRAME属性
Name SRC Width Height Scrolling
嵌套的框架集
<HTML> <HEAD> <TITLE>嵌套框架</TITLE> </HEAD> <FRAMESET cols="33%, 33%, 34%"> <FRAME src = " flowers.jpg"> <FRAMESET rows="40%, 60%"> <FRAME src = "x.html"> <FRAME src = "y.html"> </FRAMESET> <FRAME src = "flowers.jpg"> </FRAMESET> </HTML>
19
FRAME 标记
FRAME 标记的属性包括： Name <frame name="子窗口名称"> Src <frame src="html文件的位置"> Noresize <frame noresize src="url"> 不希望用户能随意地改变子窗口的大小 Scrolling <frame scrolling="yes或no或auto"> yes表示为显示滚动条，no表示不显示滚动条，auto 为自动设置。 Marginwidth <frame src="url" marginwidth="value" Marginheight marginheight="value"> 在HTML文件中，利用框架<frame>标记中的 marginwidth和marginheight属性可以设置相应子框架的左右和上 下边缘的空白。
2
表<TABLE>的使用
表名CAPTION 表头 TH
行TR
单元格TD
3
使用表的相关标记创建表
<HTML> <HEAD> <TITLE>使用表</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <CAPTION>创建表</CAPTION> <TH>一月</TH> <TH>二月</TH> <TH>三月</TH> <TH>四月</TH> <TH>五月</TH> <TH>六月</TH> <TR> <TD>1000</TD> <TD>550</TD> <TD>240</TD> <TD>1500</TD> <TD>2765</TD> <TD>1240</TD> </TR> <TR> <TD>3000</TD> <TD>2430</TD> <TD>2500</TD> <TD>1250</TD> <TD>900</TD> <TD>3400</TD> </TR> </TABLE> </BODY> </HTML>
file
文本输入框
输入元素 的默认值
文本区的宽度
文本框基本语法
<INPUT type=“text ” value="张三" size="20">
<FORM name="form1" method="post" action=""> <P>名 字： <INPUT type="text" value="张三" size="20"> </P> …… 单行文本输入框， </FORM> 字符宽度为20
第四章 表单和框架的使用
张新 课程：网页程序设计基础
回顾：
使用HTML标记创建表格，并通过相关的属 性设置表格的格式。 层（DIV）就像一个装满内容的盒子，可以 将它放到页面中所需的位置。 在HTML文件中插入多媒体。
插入GIF动画 插入音频和视频文件 插入 Java Applet 插件
单选按钮 (RADIO)
复选框 (CHECKBOX)
下拉列表 (SELECT)
重置按钮 (RESET) 多行文本框 (TEXTAREA)
提交按钮 (SUBMIT)
29
表单页面的基本结构
<FORM action=/processform method=“post”> …… </FORM> ACTION 指定提交后，由服务器 上处理程序处理 METHOD
导航栏左 侧框架 (left.htm)
详细内容页 面右侧框架 (main.htm)
FRAMESET 标记
使用 FRAMESET 创建框架 其属性有：
Rows Cols 常见的对窗口的分割包括：水平分割、垂直分 割和嵌套分割。具体采用哪种分割方式，取决 于实际需要，可用<frameset>标记中的rows （水平分割）或cols（垂直分割）属性来进行 分割。
25
<HTML> <BODY> <P>很有趣吧。你已经对框架有所了解。 <BR><BR> <IFRAME src="x.html" width="100" height="150" frameborder=1> </IFRAME> <BR> <P><FONT color = hotpink>上面是一个内嵌框架。 </ BODY > </HTML>
4
5
Table中嵌套table
6
<DIV> 层的使用
<DIV>…</DIV>可以设定多行或跨段落或某一区域 的内容样式.
<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <DIV> 第1部分 <P>元素用于组织元素 <P>DIV通常用于块级元素 </DIV> <DIV align = right> 第2部分 <P>这是第二部分 <BR> <H2>您觉得有意思吗？</H2> </DIV> <P>第二部分向右对齐。 < SPAN STYLE ="font-size:25"> 公共格式</SPAN>应用于这一部分中的所有元素 </BODY> </HTML> 7
指定向服务器提交的方法: 一般为post或get方法, post方法比较安全
ACTION = “URL”
METHOD =“post或get”
30
表单输入属性(input 标记的属性)
TYPE 此属性指定表单元素的类型。可用的选项有TEXT、 PASSWORD、CHECKBOX、RADIO、SUBMIT、 RESET、FILE、BUTTON。默认值为TEXT。 此属性指定表单元素的名称。例如，如果表单上有几个文 本框，可以按照名称来标识它们 - TEXT1、TEXT2或用户 选择的任何名称。 NAME
8
Div中嵌套ul+li
9
目标
使用框架
使用表单和表单控件
框架
框架将 Web 浏览器分成多个不同的区域， 每个区域都可以显示独立、可滚动的页面。 例如，可以在网页中使用三个框架，一个 显示标题，一个用作导航菜单，一个显示 数据。