注册页面设计

最新推荐文章于 2021-11-03 15:43:37 发布

boonyaxnn

最新推荐文章于 2021-11-03 15:43:37 发布

阅读量545

点赞数 1

分类专栏：注册页面 HTML 文章标签：设计 html 实例

本文链接：https://blog.csdn.net/boonyaxnn/article/details/53376397

版权

HTML 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

注册页面

1 篇文章 0 订阅

订阅专栏

这是一个HTML注册页面的实现，包含手机号、邮箱、密码输入，以及同意服务协议的步骤。页面设计包括输入框获取焦点时的清空提示，以及表单验证功能，验证手机号和邮箱是否为空。验证成功后会显示提示。

摘要由CSDN通过智能技术生成

<!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>

效果图如下：