【HTML】框架页、表单与JavaScript的综合应用

来源：互联网发布：ios11蜂窝数据无法还原编辑：程序博客网时间：2024/05/10 05:51

JavaScript被某些程序员简称为JS，两者是同一回事。

使用框架页来构建一个大网页没有什么好处，加载一个网页的时候，相当于要求浏览器要加载多个网页，同时，大网页中的框架标签使用起来，又需要浏览器加载。加重浏览器负担的同时，开发起来，也不好管理。要从多个网页中切换。远远不如CSS的DIV布局，甚至还远落后于表格规划网页布局。

虽然使用框架页来构造网页布局的人已经越来越少了，但是还是有必要了解其基本语法。免得看见框架页构建的网页时，不知所云。

一、基本目标

构建如下网页，

二、基本思想

如图：

三、制作过程

如上所示，需要一个frame.html，里面什么都没有，就只有包含三个框架，其中上方表单框架中的网页为form.html，此文件挂载着js.js。左下方框架为left.html。右下方的框架为空网页right.html，其实创建一个空网页也行，但是Dreamweaver要求每个框架必须包含文件。

（1）frame.html

首先需要声明的是，此只有包含三个框架的网页没有body标签，也就是说，一个网页中只要有<html>标签是唯一的。<head>标签可以省略，<body>可以被<frame>标签替代。

整个网页的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>frame</title></head><!--表示先从网页高50%的地方，横着划分框架线，由于分了两份，下方必须包含两个frame标签，不能多不能少--><frameset rows="50%,*" border="0"><!--上方框架放入form.html，即使需要滚动条都不提供，不允许用户自由调节框架--><frame src="form.html" scrolling="no" noresize="noresize" /><!--再从下方的框架中宽20%的地方，竖着划分框架线--><frameset cols="20%,*" border="0"><frame src="left.html" scrolling="no" noresize="noresize" /><!--右下方的框架中放入right.html，而且此框架的名字为right，为left中的超级链接做准备工作--><frame src="right.html" name="right" scrolling="no" noresize="noresize"/></frameset></frameset></html>

frameset 元素是 frame 元素的容器。HTML 文档可包含 frameset 元素或 BODY 元素之一，而不能同时包含两者。
此元素在 Microsoft Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。
注意：不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过，如果需要为不支持框架的浏览器添加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中！

（2）form.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><!--此处的网页编码，如果不把js文件国际化不能更改为utf-8，否则js传递过来的值会乱码--><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Form</title><!--声明我需要使用网站根目录下的js文件夹中js.js--><script type="text/javascript" src="js/js.js"></script></head><body><!--submit按钮的响应函数为submittest()，对reset按钮写函数意义不大，因为reset按钮到最后存在着一个析取函数，把所有组件都还原成默认值--><form onsubmit="submittest()"><fieldset><legend><!--&为&的转义字符，因为&在网页中是显示不出来的-->This is a Form & Jsp Example</legend><label>User:<input type="text" id="user" name="user" /></label><br /><label>Pwd:<input type="password" id="pwd" name="pwd" /></label><br /><label><!--此为下拉菜单的最基本写法，如果加入size属性就会变成另一种菜单了-->Nation:<select id="nation" name="nation"><option value="China">China</option><option value="England">England</option><option value="USA">USA</option></select></label><br /><label><!--此为复选框-->Checked?<input type="checkbox" id="c1" value="Yes" name="c1" />Yes</label><br /><label><!--此为多行文本框的基本写法，其中“添加备注”是此文本框的默认值，wrap="virtual"令文本框输入到末端自动换行-->P.S:<textarea id="ps" name="ps" rows="2" cols="8" wrap="virtual">添加备注</textarea></label><br /><label><input type="submit" value="Sumbit" /></label><input type="reset" value="Reset" /><label></label></fieldset></form></body></html>

备注：

一、<fieldset> 标签

fieldset 元素可将表单内的相关元素分组。最关键的是，此标签完全可以通过css样式去修饰，从而达到不错的效果

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

二、<label> 标签

<label> 标签为 input 元素定义标注（标记）。这使得表单内的每一栏元素都可以被css所修饰。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

所有主流浏览器都支持 <label> 标签。Safari 2 或更早的版本不支持 <label> 标签。

（3）js/js.js

// JavaScript Documentfunction submittest(){//js中，所有变量都用var不分int与String//创建一个变量msg，然后这个字符串不断增加个组件的值，换行用C语言中的\nvar msg="You have been inputed:\n";//获取组件值的方法，此法仅能获取CSS、文本框、密码框、下拉菜单的值，单选按钮、复选框的值获取不了，必须通过建立数组，遍历整个单选框组。var user=document.getElementById("user").value;msg+="用户名："+user+"\n";var pwd=document.getElementById("pwd").value;msg+="密码："+pwd+"\n";var nation=document.getElementById("nation").value;msg+="国籍："+nation+"\n";var ps=document.getElementById("ps").value;msg+="备注："+ps+"\n";//最后把这个信息以弹窗的信息呈现，请不要把此命令的英文拼错，alert警报，alter改变alert(msg);}

（4）left.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>left</title></head><body><dl><dt>网址导航</dt><dd><a href="http://www.baidu.com" target="right">Baidu</a></dd><dd><a href="http://www.163.com" target="right">163</a></dd><dd><a href="http://www.csdn.net" target="right">CSDN</a></dd></dl></body></html>

列表内的标签定义超级链接在框架right中打开。

此网页用了定义列表的方式<dl><dt><dd>三级方式，是HTML种三大列表中的一种，对比于有序列表<ol><li>，无序列表<ul><li>，此标签的出场频率比较少。

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

（5）right.html

一个空网页，不用做任何编辑

自此，本网页制作全部完成。

0 0