您的位置：首页 > Web前端 > JavaScript

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

2014-10-22 19:10 375 查看

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 Document
function submittest(){
	//js中，所有变量都用var不分int与String
	//创建一个变量msg，然后这个字符串不断增加个组件的值，换行用C语言中的\n
	var 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

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

自此，本网页***全部完成。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航