简单的用户注册页面

最新推荐文章于 2022-12-21 12:07:37 发布

bolovesang

最新推荐文章于 2022-12-21 12:07:37 发布

阅读量183

点赞数

分类专栏： HTML 文章标签： html javascript css ViewUI

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这个简单的用户注册页面（学习中。。。。。）

不怎么美观，就实现了一些简单的功能。

<html>
<head>
<title>www.baidu.com</title>
<link href="title01.css" rel="stylesheet" type="text/css" />
<link href="color02.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	.title01 {
	font-family: "宋体";
	font-size: 24px;
	font-style: normal;
	font-weight: bold;
	color: #FF0000;
	background-color: #999999;
}
.color {
	font-family: "方正舒体";
	font-size: 16px;
	font-weight: normal;
	font-variant: normal;
	color: #0000FF;
	text-decoration: underline;
}

</style>
<script language="javascript">
	function checkpassword(){
		var a = document.myform.password.value;
		var b = document.myform.password2.value;
		if(a==b){
			//alert("继续！");
		}else{
			document.myform.password2.focus();
			document.myform.password2.select();
			alert("请输入相同的密码");
		}
	}
	function web(thisurl){
		//window.location = thisurl;//重定向
		window.open(thisurl,"页面属性","width=800,height=500,scrollbars=yes,resizeable=yes");// 在新页面中打开
	}
	function Input(thisurl){
		window.open(thisurl,"页面属性","width=300,height=200,scrollbars=yes,resizeable=no");
	}
	function del(){
		if(window.confirm("是否删除")){
			alert("你选择删除！");
		}else{
			alert("你选择取消！");
		}
	}
	function check(){
		var v = document.myform.email.value;
		if(!/^\w+@+\w+.\w+$/.test(v)){
			alert("请输入正确的邮箱格式!");
			document.myform.email.focus();
			document.myform.email.select();
		}else{
			alert("right!");
		}
	}
	
	function show(){
		var s ="姓名：";
		var val = document.myform.name.value;
		s+=val+"，"
		if(document.myform.sex[0].checked){
			val = document.myform.sex[0].value;
		}else{
			val = document.myform.sex[1].value;
		}
		s+="性别:";
		s+=val+"，";
		s+="爱好："
		for(i=0;i<document.myform.inst1.length;i++){
			if(document.myform.inst1[i].checked){
				s+=document.myform.inst1[i].value+"，";
			}
		}
		s+="来自于："
		for(i=0;i<document.myform.from.length;i++){
			if(document.myform.from[i].selected){
				s+=document.myform.from[i].value;
			}
		}
		s+="，"
		s+="邮箱地址：";
		s+=document.myform.email.value;
		document.myform.area.value = s;
	
	}
</script>
</head>
<body>
<form action="" name="myform" method="post">
<table width="676" border="1" align="center">
  <tr>
    <td colspan="2"><div align="center" class="title01">用户注册</div></td>
  </tr>
  <tr>
    <td width="79" class="color"><div align="right">用户名</div></td>
    <td width="581">
		<input type="text" name="name" value="请输入用户名">
	</td>
  </tr>
  <tr>
    <td class="color"><div align="right">密码</div></td>
    <td>
		<input type="password" name="password" size="10">
	</td>
  </tr>
  <tr>
    <td class="color"><div align="right">密码确认</div></td>
    <td>
		<input type="password" name="password2" size="10" onBlur="checkpassword()">
	</td>
  </tr>
  <tr>
    <td class="color"><div align="right">性别</div></td>
    <td>
		<input type="radio" name="sex" value="男" checked>男
		<input type="radio" name="sex" value="女">女
	</td>
  </tr>
  <tr>
  	<td class="color">
		<div align="right">邮箱地址
      </div></td>
	<td>
		<input type="text" name="email" value="请输入正确的邮箱地址">
		<input type="button"  value="检查邮箱格式" onClick="check()">
		<input type="button" value="输入邮箱地址" onClick="Input('inputPage.htm')">
	</td>
  </tr>
  <tr>
    <td class="color"><div align="right">你感兴趣</div></td>
    <td>
		<input type="checkbox" name="inst1" value="VC" checked=>VC
		<input type="checkbox" name="inst1" value="VB">VB
		<input type="checkbox" name="inst1" value="VF">VF
		<input type="checkbox" name="inst1" value="VJ">VJ<br>
		<input type="checkbox" name="inst1" value="BC">BC
		<input type="checkbox" name="inst1" value="CO">CO
		<input type="checkbox" name="inst1" value="JA">JA
		<input type="checkbox" name="inst1" value="Delphi">Delphi
	</td>
  </tr>
  <tr>
    <td height="112" class="color"><div align="right">你感兴趣</div></td>
    <td>
		<select name="inst2" size="6">
		<option value="VC">VC</option>
		<option value="VB">VB</option>
		<option value="VF">VF</option>
		<option value="VJ">VJ</option>
		<option value="BC">BC</option>
		<option value="CO">CO</option>
		<option value="JA">JA</option>
		<option value="Delphi">Delphi</option>
		</select>
	</td>
  </tr>
  <tr>
    <td class="color"><div align="right">你来自</div></td>
    <td>
		<select name="from">
		<option value="请选择">请选择</option>
		<option value="上海">上海</option>
		<option value="北京">北京</option>
		<option value="天津">天津</option>
		<option value="宁波">宁波</option>
		<option value="舟山">舟山</option>
		</select>
	</td>
  </tr>
  <tr>
	<td class="color"><div align="right">你喜欢的网站：</div>
	</td>
	<td>
		<select name="like" οnchange="web(this.value)">
			<option value="#">==请选择==</option>
			<option value="http://www.baidu.com">百度</option>
			<option value="http://www.qq.com">腾讯</option>
			<option value="http://www.sina.com">新浪</option>
		</select>
	</td>
  </tr>
  <tr>
    <td class="color"><div align="right">自我介绍</div></td>
    <td>
		<textarea name="area" cols="60" rows="10">
		</textarea>
	</td>
  </tr>
  <tr>
    <td colspan="2" align="center">
		<input type="button" name="submit" value="提交" onClick="show()">&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="reset" name="reset" value="重置">
		<input type="button" value="删除" οnclick="del()">
	</td>
  </tr>
</table>
</form>
</body>
</html>

input.htm

<html>
<head>
	<title>www.baidu.com</title>
	<script language="javascript">
		function returnPage(){
			var el = document.cform.email.value;
			var doc = window.opener.document;
			doc.myform.email.value = el;
		}
	</script>
</head>
<form action="" name="cform">
<body>
	请输入邮箱地址：<input type="text" name="email">
	<input type="button" value="确定" οnclick="returnPage()">
</body>
</form>
</html>