注册页面设计

这是一个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>
效果图如下:
HTML注册页面设计代码的实现可以分为以下几个步骤: 1. 创建一个 HTML 文件,并在文件头部添加文档类型声明和字符集设置: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <!-- 注册表单 --> </body> </html> ``` 2. 在 `<body>` 标签中创建一个表单,添加必要的输入项,如用户名、密码和确认密码: ```html <form action="#" method="POST"> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <label for="confirm_password">确认密码:</label> <input type="password" id="confirm_password" name="confirm_password"><br> <input type="submit" value="注册"> </form> ``` 3. 添加样式,美化表单,如设置输入框的宽度和高度、字体、颜色等: ```html <style> input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; font-family: Arial, sans-serif; font-size: 16px; } input[type=submit] { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; font-family: Arial, sans-serif; font-size: 16px; } input[type=submit]:hover { background-color: #45a049; } </style> ``` 以上就是一个基本的 HTML 注册页面设计代码。如果您还有其他问题或需要更深入的了解,欢迎继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值