Java代码
- <!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" />
- <meta http-equiv="X-UA-Compatible" content="IE=7" />
- <title>注册中心</title>
- <script type="text/javascript" src="http://www.eeyy.com/statics/js/jquery.min.js"></script>
- <style>
- @charset "utf-8";
- /* CSS Document */
- html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,a,em,img,strong,b,i,dl,dt,dd,ul,li,form,table,tr,th,td,footer,header,input,button {margin: 0;padding: 0;border: 0;outline:0;}
- body {font: 12px/1.5 tahoma,arial,'宋体',sans-serif;margin:0 auto; padding:0 0;color:#333;position:relative;zoom:1;}
- /* CSS Document */
- body{ background:url(../images/body_bg.jpg) no-repeat center top #f9feff;}
- .clearafter:after{ height:0px; content:"."; clear:both; display:block; visibility:hidden;}
- table tr td{ padding-bottom:15px;}
- .login_title{ width:105px; text-align:right; font-size:14px; font-weight:bold; color:#555;}
- .login_title em{ font-size:12px; font-family:"宋体"; font-weight:normal; color:#F00; margin-right:3px; overflow:hidden;}
- .login_title{ width:188px;}
- .text_info{ display:inline; float:left; width:262px; height:28px; border-top:1px solid #bfbfbf; border-left:1px solid #bfbfbf; border-right:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; margin-right:15px; position:relative; overflow:hidden;}
- .text_hint{ width:250px; height:26px; line-height:26px; border-top:2px solid #ebebeb; border-left:2px solid #ebebeb; color:#999; padding:0px 5px; position:absolute; top:0px; left:0px; overflow:hidden; cursor:text;}
- .text_info input{ width:252px; height:28px; padding:0px 5px; color:#555; background:#fff; overflow:hidden;}
- /*input:focus {border-color:#74A5E1;box-shadow:0 0 5px #74A5E1;}*/
- .text_info1{ width:162px;}
- .text_info1 input{ width:152px;}
- </style>
- </head>
- <body>
- <table width="667" border="0" cellspacing="0" cellpadding="0">
- <tr class="row">
- <td class="login_title"><em>*</em>邮箱：</td>
- <td>
- <div class="text_info">
- <label class="text_hint" for="email">请输入您常用的邮箱地址</label>
- <input type="text" id="email" name="email" />
- </div>
- </td>
- </tr>
- <tr class="row">
- <td class="login_title"><em>*</em>密码：</td>
- <td>
- <div class="text_info">
- <label class="text_hint" for="password">6-20个英文字母、数字或特殊字符</label>
- <input type="password" id="password" name="password" />
- </div>
- </td>
- </tr>
- <tr class="row">
- <td class="login_title"><em>*</em>确认密码：</td>
- <td>
- <div class="text_info">
- <label class="text_hint" for="pwdconfirm"></label>
- <input type="password" name="pwdconfirm" id="pwdconfirm" />
- </div>
- </td>
- </tr>
- <tr class="row">
- <td class="login_title"><em>*</em>昵称：</td>
- <td>
- <div class="text_info">
- <label class="text_hint" for="nickname">4-20个字符，建议使用中文，注册后不可修改</label>
- <input type="text" id="nickname" name="nickname" />
- </div>
- </td>
- </tr>
- </table>
- <script language="JavaScript">
- $(function(){
- //自动显/隐提示
- $('.text_info').find('input').bind("focus",function(){
- $(this).prev('label').hide();
- });
- $('.text_info').find('input').bind('blur',function(){
- if ($(this).val() == '') {
- $(this).prev('label').show();
- }
- });
- //初始化隐藏
- $('.text_info').find('input').each(function(){
- if ($(this).val() != '') {
- $(this).prev('label').hide();
- }
- });
- })
- </script>
- </body>
- </html>
类似功能html5 placeholder
Java代码
- <form action="demo_form.asp" method="get">
- <input type="search" name="user_search" placeholder="Search W3School" />
- <input type="submit" />
- </form>
