<!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=utf-8" />
<title>无标题文档</title>
<script src="../../js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="../../js/emailAutoComplete.js"></script>
<script type="text/jscript">
/*
$(document).ready(function(){
$("input#input_4").click(function(){
})
})
*/
/*表单验证*/
function validateFrom(){
var phone=$("#phone").val();
var email=$("#email").val();
if(phone==""||phone=="可用作登录名"){
$("#phone").focus();
alert("请输入手机号");
return ;
}else if(email==""||email=="可用作登录名"){
$("#email").focus();
alert("请输入邮箱");
return ;
}
alert("验证成功!");
}
$(function(){
/**
*输入框获取焦点事件
*/
$("input").focus(function() {
if($(this).val()=="可用作登录名"
||$(this).val()=="8到20位字母、数字和符号"
||$(this).val()=="请再次输入密码"){
$(this).val("");
}
});
});
</script>
<style type="text/css">
.header{
height:100px;
width:100%;
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
}
.logo{
padding-top:2px;
padding-bottom:8px;
float:left;
margin-left:50px;
}
.denglu{
float:right;
text-align:right;
position:relative;
padding-top:20px;
padding-bottom:o;
margin-right:10%;
}
.left{
height:500px;
width:69%;
text-align:center;
float:left;
margin-left:10px;
}
.right{
height:500px;
width:30%;
float:right;
position:relative;
border-color:#69F;
text-align:left;
}
.top{
height:50px;
width:100%;
margin-top:0px;
}
span{
display:inline-block;
margin-right:5px;
width:196px;
height:5px;
line-height:0;
border-radius: 2px;
vertical-align: middle;
overflow: hidden;
background-color:#35B70F;
}
tr{
height:40px;
font-size:16px;
text-align:left;
}
td{
font-size:16px;
padding:5px;
}
.foot{
text-align:center;
padding:5px;
font-size:14px;
height:100px;
width:100%;
}
.input{
width:220px;
height:25px;
}
.select{
width:100px;
height:30px;
}
</style>
</head>
<body>
<div id="header" class="header">
<div id="logo" class="logo"><img src="../../images/携程1.jpg" /></div>
<div id="denglu" class="denglu"><a href="../登录/2.html">登录</a>|<a href="">客服中心</a></div>
</div>
<div id="left" class="left">
<div id="top" class="top">
<form action="" method="post" οnsubmit="validateFrom()">
<table align="center">
<tr>
<td><span></span>填写</td>
<td><span></span>验证</td>
<td><span></span>注册成功</td>
</tr>
</table>
</div>
<div id="next" class="next">
<table align="center">
<tr>
<td align="right"><h3>会员注册</h3></td>
<td>注册成功可获<strong class="green">1000</strong>积分!+<strong class="orange">返现</strong>特权!</td>
<td></td>
</tr>
<tr>
<td align="right"> 手机号</td>
<td><input id="phone" type="text" value="可用作登录名" οnfοcus="focusInput('phone')" class="input"/></td>
<td></td>
</tr>
<tr>
<td align="right"> Email</td>
<td>
<input id="email" class="input" type="text" value="可用作登录名" οnfοcus="focusInput('email')" />
@
<select class="select">
<option selected="selected">sina.com</option>
<option>google.com</option>
<option>qq.com</option>
</select>
</td>
<td >填写Email并通过验证,可额外获得200积分 !</td>
</tr>
<tr>
<td align="right"> 密码</td>
<td><input id="input_2" type="text" name="password"b class="input" value="8到20位字母、数字和符号" style="color:#999;"/></td>
<td></td>
</tr>
<tr>
<td align="right">确认密码</td>
<td><input id="input_3" type="text" name="password"b class="input" value="请再次输入密码" style="color:#999;"/></td>
<td></td>
</tr>
<tr>
<td align="right"></td>
<td><input id="input_4" type="checkbox" name="save" value="同意"/>同意<a href="">《携程旅行网服务协议》</a></td>
<td></td>
</tr>
<tr>
<td></td>
<td><input id="input_5" type="submit" value="下一步,验证" align="center" style="color:#FFF; cursor:pointer;text-shadow:#F60 1px ;background-color:#F60;width:220px;height:42px; margin-bottom: 8px; font-size: 18px;font-family: "Microsoft YaHei",SimSun,Tahoma,Verdana,Arial, sans-serif;"/></td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="">注册遇到问题?</a></td>
<td></td>
</tr>
</table>
</div>
</form>
</div>
<div id="right" class="right">
<img src="../../images/会员图片.png" style="margin-right:5px; margin-top:10px;" />
</div>
<div id="foot" class="foot">
<p>
<a href="">免费注册</a>
<a href="">网站导航</a>
<a href="">宾馆引索</a>
<a href="">服务说明</a>
<a href="">关于携程</a>
<a href="">企业公民</a>
<a href="">诚聘英才</a>
<a href="">分销联盟</a>
<a href="">企业礼品卡采购</a>
<a href="">代理合作</a>
<a href="">广告业务</a>
<a href="">联系我们</a>
<a href="">我要提建议</a>
</p>
<p>
<a href="">Copyright@</a>1900-2016, <a href="">ctrip.com</a>. all rights reserved.</p>
</div>
</body>
</html>
效果图如下:
注册页面设计
最新推荐文章于 2021-11-03 15:43:37 发布
这是一个HTML注册页面的实现,包含手机号、邮箱、密码输入,以及同意服务协议的步骤。页面设计包括输入框获取焦点时的清空提示,以及表单验证功能,验证手机号和邮箱是否为空。验证成功后会显示提示。
摘要由CSDN通过智能技术生成