使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。
验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。
通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。
通过实验了解JavaScript的编程规范及基本语法，能够分析JavaScript程序的功能，可以在网页制作中使用JavaScript程序。
通过实验了解Ajax的编程方法，掌握Ajax编程技巧。
1.register.Html
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<style type="text/css">@import url(Css.css);</style>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script language="javascript" src="javascript.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<form action="">
<table border="0" align="center"width="600">
<tr><td colspan="3" align="center" height="40"id="title">填写注册信息</td></tr>
<tr><td align="right" id="t">用户名:*</td>
<td><input type="text" name="username"/></td>
<td id="i">用户名由字母开头，后跟字母、数字或下划线！</td>
</tr>
<tr><td align="right" id="t">密码:*</td>
<td><input type="password" name="userpwd"/></td>
<td id="i">设置登录密码，至少六位！</td>
</tr>
<tr><td align="right" id="t">确认密码:*</td>
<td><input type="password" name="userpwd1"/></td>
<td id="i">请在输入一次你的密码！</td>
</tr>
<tr><td align="right" id="t">性别:*</td>
<td><input type="radio"name="usersex"value="男" checked/>男
<input type="radio" name="usersex" value="女"/>女</td>
<td id="i">请选择你的性别！</td>
</tr>
<tr><td align="right" id="t">年龄:*</td>
<td><input type="text" name="userage"/></td>
</tr>
<tr><td align="right" id="t">邮箱地址:*</td>
<td><input type="text" name="useremail"/>
</td>
</tr>
<tr><td align="right" valign="top">基本情况:*</td>
<td colspan="2">
<textarea name="userbasicinfo"rows="5" cols="50"></textarea>
</td>
</tr>
<tr><td colspan="3"align="center" height="40">
<input type="Button" value="确认" onClick="validate()"/>
<input type="reset"value="取消"/>
</td>
</tr>
<div id="result"></div>
</table>
</form>
</body>
</html>
2.Css.css
@CHARSET "UTF-8";
<style type="text/css">
#title{color:#FF7B0B;font-size:20px;font-weight:bod;}
#i{width:352px;height:15px;color:blue;font-size:12px;}
table{text-align:left;}
#t{text-align:right;}
</style>>
3.javascript.js
function validate(){
var pwd=document.forms[0].userpwd.value;
var pwd1=document.forms[0].userpwd1.value;
var age=document.forms[0].userage.value;
if(pwd.length<6)alert("密码长度必须大于等于6！");
else if(pwd!=pwd1)alert("两次密码不一致！");
else if(age<18||age>100)alert("年龄范围应该为18岁至100岁！")
else document.forms[0].submit();
}
截图：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
