第5讲框架与表单标记_第1页
第5讲框架与表单标记_第2页
第5讲框架与表单标记_第3页
第5讲框架与表单标记_第4页
第5讲框架与表单标记_第5页
已阅读5页，还剩70页未读， 继续免费阅读

下载本文档

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

文档简介

第5讲框架与表单标记第一页，共75页。学习目标理解框架的作用掌握框架标记的使用理解不支持框架标记的应用掌握浮动框架的使用掌握使用框架作为超链接目标的设置理解有关表单的相关概念掌握各种表单标记的使用第二页，共75页。框架的作用，就是把浏览器窗口划分成若干个区域，每个区域可以分别显示不同的网页。注意：使用框架结构时，HTML文档中不能出现<body>标记对，此时<body>需要由<frameset>代替5.1框架结构第三页，共75页。框架集标记<frameset>：主要是定义浏览器窗口的分割方式、各分割窗口（框架）的大小以及格式化框架边框框架标记<frame>：定义各分割窗口中显示的内容，并能对各分割窗口进行格式化1）框架结构组成标记第四页，共75页。2）框架集标记<frameset>属性属性值描述bordercolor…以RGB颜色值或颜色英文名设置所有框架边框颜色frameborder0/no所有框架都不显示边框1/yes所有框架都显示边框，默认为1framespacingn设置框架之间的间距rowsn1,n2…使窗口按行的方式分割(上下分割)colsn1,n2…使窗口按列的方式分割(左右分割)表5-1<frameset>常用属性第五页，共75页。框架分割窗口方式左右（水平）分割上下（垂直）分割嵌套分割：浏览器窗口既存在左右分割，又存在上下分割

第六页，共75页。左右分割基本语法

<framesetcols=“value,value,……”><frame><frame>…….</frameset>语法解释

cols属性决定了窗口的分割方式为左右分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了<frame>标记的个数，即窗口的个数第七页，共75页。<framesetcols="20%,*"><frame><frame></frameset>左右分割示例第八页，共75页。上下分割基本语法

<framesetrows=“value,value,……”><frame><frame>…….</frameset>语法解释

rows属性决定了窗口的分割方式为上下分割；“value”定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决定了<frame>标记的个数，即窗口的个数第九页，共75页。<framesetrows="20%,*"><frame><frame></frameset>上下分割示例第十页，共75页。嵌套分割基本语法

<framesetcols|rows=“value,value,……”><frame>

<framesetrows|cols=“value,value,…”><frame><frame>……</frameset><frame>…….</frameset>第十一页，共75页。<framesetcols="20%,55%,*">

<framesetrows="100,*"><frame><frame></frameset><frame><frame></frameset>嵌套分割示例第十二页，共75页。<frameset>对框架边框的格式化<frameset>标记对框架边框的格式化通过设置”frameborder”、”framespacing”和”bordercolor”等属性来实现第十三页，共75页。3)框架标记<frame>基本语法

<framesetcols=“value,value,……”>

<framesrc=“url”name=“frame_name”><framesrc=“url”name=“frame_name”>

…….</frameset>语法解释

src属性用于设置在框架窗口中显示的内容来自的文件；name属性用于标记框架名称，以便于其他对象对它的引用，如作为链接的一个目标窗口

第十四页，共75页。<framesetcols="20%,*"><framesrc=“frame_menu.html”name=“left”><framesrc=“p.htm”name=“right”></frameset><frame>标记基本设置示例第十五页，共75页。frame属性属性值描述srcURL设置在框架中显示的文件的路径name…设置Frame名称，以便于其它对象对它的引用frameBorder0/no不显示边框1/yes显示边框，默认为1scrollingyes显示滚动条no不显示滚动条auto根据页面的长度自动判断是否显示滚动条，默认自动noresize设置框架能否改变大小marginwidthn以像素为单位，设置框架边框与页面内容的左右页边距marginheightn以像素为单位，设置框架边框与页面内容的上下页边距bordercolor…以RGB颜色值或颜色英文名设置框架边框颜色<frame>常用属性第十六页，共75页。框架综合示例第十七页，共75页。4)不支持框架标记<noframes>一些早期版本的浏览器不支持框架。制作人员无法改变这一现象，所能做的只是显示该浏览器不支持框架技术，有些内容无法看到。这一任务可由<noframes>标记来完成，当浏览器不能加载框架集文件时，会检索到<noframes>标记，并显示标记中的内容

第十八页，共75页。基本语法

<frameset><frame><frame>…….<noframes><body>……</body></noframes></frameset>放在<noframes>标记对之间的部分就是在不支持框架的浏览器中显示的内容第十九页，共75页。5)浮动框架<iframe>浮动框架是一种特殊的框架页面，其作为HTML文档的一部分，就象图像一样出现在HTML文档中。浮动框架允许将一个HTML文档插入到另一个HTML文档内部的某个区域。基本语法

<iframesrc=“”height=“value”width=“value”name=“iframe_name”align=“left|center|right”>常用属性:属性属性值描述srcURL设置浮动框架中显示页面源文件的路径widthn设置浮动框的宽度heightn设置浮动框的高度name…设置浮动框的名称，以便于其他对象引用它align…设置浮动框相对于浏览器窗口的对齐方式frameborder…设置浮动框架边框显示状态，与普通框架同scrolling…设置浮动框架滚动条显示属性，与普通框架同noresize设置浮动框架尺寸调整属性，与普通框架同bordercolor…设置浮动框架边框颜色，与普通框架同marginheightn浮动框架边框与页内容上下间距，与普通框架同marginwidthn浮动框架边框与页内容左右间距，与普通框架同第二十页，共75页。浮动框架示例第二十一页，共75页。框架的一个重要目的是在不同的框架中显示不同的页面，通过链接目标窗口的设置可以很容易实现这一目的具体实现方法：将框架的框架名属性值作为超链接的target的属性值6)框架与链接第二十二页，共75页。<framesetcols="20%,*"><framesrc="frame_menu.html"name="left"><framesrc="p.htm"name="right"></frameset>frame_menu.html超链接代码如下:<body><p><ahref="p.htm"target="right">Photoshop</a></p><p><ahref="f.htm"target="right">Freehand</a></p><p><ahref="i.htm"target="right">Illustrator</a></p><p><ahref="c.htm"target="right">CorelDraw</a></p></body>普通框架与链接示例第二十三页，共75页。浮动框架与链接示例第二十四页，共75页。表单作用：表单是实现动态网页的一种主要的外在形式，其主要功能是收集网页访问者的信息。表单特性：表单中包含多种不同的元素，如文本框、文本域、下拉式菜单等元素访问者输入的信息需要由CGI等服务器端处理程序处理访问者输入的信息可以使用GET和POST这两种方式提交到服务器端5.2表单标记第二十五页，共75页。组成部分：根据实现的功能的不同，可将表单分成以下两个部分：描述表单元素的HTML源代码客户端的脚本以及服务器端用于处理访问者所输入信息的程序第二十六页，共75页。

表单元素示例第二十七页，共75页。1)表单组成标记表单是网页上的一个特定区域，构成这个区域的标记有六种，如表5-2所示。

表5-2表单标记标记描述<form>定义一个表单区域以及携带表单的相关信息<input>设置输入表单元素<select>设置菜单或列表元素<optgroup>设置项目分组的菜单或列表<option>定义菜单或列表元素中的项目<textarea>设置表单文本域元素根据表现形式的不同，可将表单元素分为三大类：输入元素、文本域元素及菜单和列表元素，分别对应标记<input>、<textarea>和<select>第二十八页，共75页。<form>标记作用：限定表单的范围，即定义一个区域，表单各元素都要设置在这个区域内，单击提交按钮时，提交的也是这个区域内的数据携带表单的相关信息，如处理表单的脚本程序的位置、提交表单的方法等2)表单标记<form>第二十九页，共75页。基本语法

<formname=“form_name”method=“get/post”action=“url”>……</form>第三十页，共75页。语法解释，见表5-3表5-3<form>标记常用属性属性描述name设置表单名称，用于脚本引用method定义表单内容从客户端传送到服务器的方法，包括两种方法：get和post；默认时使用get方法action用于定义表单处理程序的位置（相对地址或绝对地址）onsubmit用于定义表单处理脚本的位置第三十一页，共75页。数据发送形式数据从浏览器向服务器发送时，它以两部分发送，即HTTP头和HTTP正文体。其中头包含关于用户代理、服务器信息、内容类型等信息，这些信息通常以纯文本发送，因而不安全；而HTTP正文体包含正文实体，这些信息是编码后再发送的，所以比HTTP头发送的信息更安全第三十二页，共75页。POST和GET提交方法的比较GET方法是将表单数据以HTTP头的形式附加到URL地址后面，因而不安全；而POST方法则是以HTTP正文体形式发送，因而相对比较安全。GET方法对传送数据的长度有限制，不能超过8K个字符；而POST方法无此限制。GET方法只能传送ASCII码的字符；而POST方法没有字符码的限制，它可以传送包含在ISO10646中的所有字符。表单默认的提交方法是GET，当数据涉及到保密问题或所传送的数据是用于执行插入或更新数据库操作时，必须使用POST方法；否则可以使用GET方法第三十三页，共75页。基本语法<inputtype=“type_name”name=“field_name”>语法解释type属性用于设置不同类型的输入域，可设置的域的类型请参见表6-3；name属性指定域的名称。3)输入标记<input>第三十四页，共75页。表5-4type属性值type属性值描述text设置文字域password设置密码域file设置文件域hidden设置隐藏域radio设置单选框checkbox设置复选框button设置普通按钮submit设置提交按钮reset设置重置按钮image设置图像域(图像提交按钮)第三十五页，共75页。文字域text作用

设置单行输入文本框，用于访问者在其中输入文本信息，输入的信息将以明文显示基本语法<inputtype=“text”name=“field_name”maxlength=“value”size=“value”value=“field_value”>文字域属性描述name设置文字域的名称，在脚本中用于获取域的数据maxlength设置在文字域中最多可输入的字符数size设置文字域中可显示的字符数value设置文字域的默认值第三十六页，共75页。文字域示例姓名：<inputtype=“text”size=“12”maxlength=“20”name=“user_name”>第三十七页，共75页。密码域password作用

设置单行密码输入框，用于访问者在其中输入密码信息，默认以“*”回显所输入的密码基本语法<inputtype=“password”name=“field_name”maxlength=“value”size=“value”value=“field_value”>第三十八页，共75页。密码域示例密码：<inputtype=“password”size=“12”maxlength=“20”name=“psw”>第三十九页，共75页。隐藏域hidden作用

隐藏域在页面中对用户是不可见的，其作用是用于在页面之间传递数据。基本语法<inputtype=“hidden” name=“field_name” value=“field_value”>示例:<inputtype=“hidden”value=“nch”name=“user_name”>“name”和“value”属性值必须设置第四十页，共75页。文件域file作用

用于上传本地文件到服务器中。基本语法

<inputtype=“file”name=“field_name”>第四十一页，共75页。文件域示例请上传你的照片：<inputtype=“file”name=“photo”>第四十二页，共75页。单选按钮radio作用

用于在一组选项中进行单项选择基本语法<inputtype=“radio”name=“group_name”value=“field_value”checked>

第四十三页，共75页。语法解释

“value”属性值表示选中项目后传到服务器端的值，checked表示此项被默认选中，注意，同一组的单选框中只能有一个单选项被设置checked，属于同一组的单选框的name属性必须设置为相同的值第四十四页，共75页。单选按钮示例性别： <inputtype=“radio”value=“female”name=“gender”checked>女 <inputtype=“radio”value=“male”name=“gender”>男第四十五页，共75页。复选框checkbox作用

用于在一组选项中进行多项选择基本语法<inputtype=“checkbox”name=“”value=“field_value”checked>

第四十六页，共75页。语法解释

“value”属性值表示选中项目后传到服务器端的值，checked表示此项被默认选中，在同一组中可对多个选项框设置为checked，各复选框的name属性可以设置为相同或不同的值第四十七页，共75页。复选框示例

<inputtype=“checkbox”value=“rock”name=“m1”checked>摇滚乐 <inputtype=“checkbox”value=“jazz”name=“m2”checked>爵士乐<inputtype=“checkbox”value=“pop”name=“m3”>流行乐第四十八页，共75页。提交按钮submit作用

单击提交按钮后，将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理基本语法<inputtype=“submit”name=“field_name”value=“button_text”>value属性值表示显示在按钮上面的文字第四十九页，共75页。在表单中添加提交按钮的步骤

在<form>中设置action=处理表单程序名

或设置onsubmit=处理表单脚本函数名在<form></form>之间字段要出现的地方添加一个<input>标记设置type=“submit”，指定输入域为提交按钮（必设）设置name属性来标记内容（可选）设置value属性以在按钮上显示文字（可选）第五十页，共75页。提交按钮示例<formaction=“add.jsp”method=“post”>

<inputtype=“submit"name=“submit"value="新增“></form>第五十一页，共75页。普通按钮button作用 激发提交表单动作，配合javascript脚本对表单执行处理操作基本语法<inputtype=“button”name=“field_name”value=“button_text”onclick=“javascript函数名“>onclick属性用于指定程序对表单的处理第五十二页，共75页。普通按钮示例

<inputtype="button"name=“submit"value="新增"onclick="add()"> <inputtype="button"name=“submit"value="删除"onclick="delete()">第五十三页，共75页。重置按钮reset作用 单击重置按钮后，清除表单中所输入的内容，将表单内容恢复成默认的状态基本语法<inputtype=“reset”name=“field_name”value=“button_text”>第五十四页，共75页。重置按钮示例<inputtype=“reset”name=“reset”value=“重置“>第五十五页，共75页。图像域image作用 按钮外形以图像表示，功能与提交按钮一样，具有提交表单内容的作用基本语法<inputtype=“image”name=“field_name”src=“image_URL”>第五十六页，共75页。提交图像域示例

<inputtype=“image”src="images/daohangtiao1.jpg"name=imagewidth="60"height="30">第五十七页，共75页。4)菜单和列表标记<select>、<option>、<optgroup>作用 选择列表允许访问者从选项列表中选择一项或几项。它的作用等效于单选按钮（单选时）或复选框（多选时），当选项比较多的情况下，相对于单选框和复选框来说，选择列表可节省了很大的空间。第五十八页，共75页。<select>，<option>标记的功能

<select>标记用于声明选择列表，需由它确定选择列表是否可多选，以及一次可显示的列表选项数；而选择列表中的各选项则需要由<option>来设置，其可设置各选项的值、以及是否为默认选项。第五十九页，共75页。选择列表类型：依列表选项一次可被选择和显示的个数，选择列表可分为以下两种形式：下拉菜单（下拉列表）列表第六十页，共75页。列表

列表是指一次可以选择多个列表项，且一次可以显示1个以上列表选项的选择列表第六十一页，共75页。基本语法<selectname=“name”size=“value”multiple><optionvalue=“value”selected>选项一</option><optionvalue=“value”>选项二</option><optionvalue=“value”selected>选项三</option>……</select>属性描述name设置列表的名称size设置能同时显示的列表选项个数（默认为1）multiple设置列表中的项目可多选value设置选项值selected设置默认选项，可对多个列表选项进行此属性的设置第六十二页，共75页。列表示例请选择你喜欢的网站:<selectname="web"size=“4”

multiple><optionvalue="sina"selected>新浪</option><optionvalue="yahoo">雅虎</option><optionvalue=“sohu”selected>搜狐</option><optionvalue="google"selected>google</option><optionvalue="163">网易</option></select>第六十三页，共75页。下拉菜单

下拉菜单是指一次只能选择一个列表选项，且一次只能显示一个列表选项的选择列表第六十四页，共75页。基本语法<selectname=“name”size=“1”><optionvalue=“value”selected>选项一</option><optionvalue=“value”>选项二</option>……</select>语法解释selected属性用于设置默认选中项，只能有一个列表选项设置此属性；size属性只能设置为1，也可不设置此属性，因为其值默认为1第六十五页，共75页。下拉菜单示例您的最高学历/学位:<selectname=“degree"><optionvalue=“1”>博士后</option><optionvalue=“2”selected=“selected”>博士</option><optionvalue=“3”>硕士</option><optionvalue=“4”>学士</option><optionvalue=“0”>其他</option></select>第六十六页，共75页。5)文本域标记<textarea>作用 用于制作一个多行多列的文本输入区域基本语法

<textareaname=“name”rows=“value1

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

温馨提示

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

最新文档

评论

0/150

提交评论