1.HTML表单元素的使用
<!doctype html>
<html>
<head>
<title>NEFU</title>
</head>
<body>
<center>
<h2><font color="blue">中国百度</font></h2>
<a href="http://www.baidu.com/"><h3>百度</h3></a>
</center>
<form action="" method="post">
<font color="red">编 号：</font>
<input type="text" name="userid" color="red" size="14" maxlength="14">
<br><br>
<font color="red">用户名：</font>
<input type="text" name="username" value="请输入用户名" size="14" maxlength="14">
<br><br>
<font color="red">密 码：</font>
<input type="password" name="userpass" value="请输入密码" size="14" maxlength="14">
<br><br>
<font color="red">性 别：</font>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<br><br>
<font color="red">部 门：</font>
<select name="dept">
<option value="技术部">技术部</option>
<option value="财务部">财务部</option>
<option value="销售部">销售部</option>
<option value="人力部">人力部</option>
</select>
<br><br>
<font color="red">兴 趣：</font>
<input type="checkbox" name="inst" value="唱歌">唱歌
<input type="checkbox" name="inst" value="编程">编程
<input type="checkbox" name="inst" value="上网">上网
<input type="checkbox" name="inst" value="看书">看书
<input type="checkbox" name="inst" value="睡觉">睡觉
<br><br>
<font color="red">说 明：</font>
<textarea name="note" cols="30" rows="3">
中国百度网址地址：http://www.baidu.com
</textarea>
<br><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>
2.onLoad事件与onUnload事件
在HTML中事件都统一命名，都是以on开头的。
<!doctype html>
<html>
<head>
<title>Gou JinPing</title>
</head>
<script>
function Hello(){
alert("Welcome to the page!");
}
function Byebye(){
alert("Bye bye!");
}
</script>
<body onl oad="Hello()" onUnload="Byebye()">
<a href="http://www.baidu.com/" οnclick="Hello()"></font color="green">进入百度首页</font></a>
</body>
</html>3.输出表单中的内容
<html>
<head>
<title></title>
</head>
<script>
function show()
{
var value=document.myform.text1.value;
alert("姓名："+value);
var sex;
//在JavaScript中，多个控件定义了同一个名字，此时将按照数组的形式操作。
if(document.myform.sex[0].checked)
sex=document.myform.sex[0].value;
else
sex=document.myform.sex[1].value;
alert("性别："+sex);
var inst="";
for(i=0;i<document.myform.inst.length;i++){
if(document.myform.inst[i].checked){
inst += document.myform.inst[i].value+" ";
}
}
alert("兴趣："+inst);
}
</script>
<body>
<form action="" method="post" name="myform">
<font color="green">Input Name：</font>
<input type="text" name="text1"><br><br>
<font color="green">Select Sex：</font>
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex">女<br><br>
<font color="green">Interest：</font>
<input type="checkbox" name="inst" value="唱歌">唱歌
<input type="checkbox" name="inst" value="跳舞">跳舞
<input type="checkbox" name="inst" value="看书">看书
<input type="checkbox" name="inst" value="编程" checked>编程
<input type="checkbox" name="inst" value="睡觉">睡觉
<input type="checkbox" name="inst" value="游泳">游泳
<br><br>
<input type="button" value="show" οnclick="show()">
<br><br>
</form>
</body>
</html>
4.对下拉列表框的所选的内容的输出
<html>
<head>
<title></title>
</head>
<script language="javascript">
function show(val){
document.myform.result.value=val;
}
</script>
<body>
<form action="" method="post" name="myform">
<font color="green">部门：</font>
<select name="dept" οnchange="show(this.value)">
<option value="技术部">技术部</option>
<option value="销售部">销售部</option>
<option value="财务部">财务部</option>
<option value="经理部">经理部</option>
</select>
<br><br>
<font color="green">结果：</font>
<input type="text" name="result" value="">
</form>
</body>
</html>