部分设置不是非常完美 有待后期学习优化

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>账户信息</title>
  6.     <link rel="stylesheet" type="text/css" href="idup0.css">
  7. </head>
  8. <body>
  9.     <form action="#">
  10.     <div class="all">
  11.         <div class="head">-- 账户信息 --</div>
  12.         <div class="chence">
  13.             <span class="xing">*</span>
  14.             <label for="userAccount">用户名:</label>
  15.             <input type="text" class="kuang-1" id="userAccount" placeholder="用户名设置成功后不可以被修改">
  16.             <span id="str_1"></span>
  17.         </div>
  18.         <div class="chence">
  19.             <span class="xing">*</span>
  20.             <label for="userPass">登录密码:</label>
  21.             <input type="password" class="kuang" id="userPass" placeholder="6-20位字母，数字或者符号">
  22.             <span id="str_2"></span>
  23.         </div>
  24.         <div class="chence">
  25.             <span class="xing">*</span>
  26.             <label for="userPass_">确认密码:</label>
  27.             <input type="password" class="kuang" id="userPass_" placeholder="再次确认登录密码">
  28.             <span id="str_3"></span>
  29.         </div>
  30.         <div class="chence">
  31.             <span class="xing">*</span>
  32.             <label for="userName">真实姓名:</label>
  33.             <input type="text" class="kuang" id="userName" placeholder="请输入真实姓名，中文且最多五位">
  34.             <span id="str_4"></span>
  35.         </div>
  36.         <div class="chence">
  37.             <span class="xing">*</span>
  38.             <label for="information">身份证号:</label>
  39.             <input type="text" class="kuang" id="information" placeholder="请输入有效的身份证号码">
  40.             <span id="str_5"></span>
  41.         </div>
  42.         <div class="chence">
  43.             <span class="xing">*</span>
  44.             <label for="email">邮箱:</label>
  45.             <input type="email" class="kuang-2" id="email" placeholder="请输入有效的邮箱地址">
  46.             <span id="str_6"></span>
  47.         </div>
  48.         <div class="chence">
  49.             <span class="xing">*</span>
  50.             <label for="tell">手机号码:</label>
  51.             <input type="tel" class="kuang" id="tell" placeholder="请输入您的手机号码">
  52.             <span id="str_7"></span>
  53.         </div>
  54.         <div class="chence-1">
  55.             <input type="checkbox" id="choose">
  56.             <label class="cu"  for="choose">我已阅读并同意遵守规定</label>
  57.             <button id="tijiao">确认提交</button>
  58.         </div>
  59.     </div>
  60.     </form>
  61. </body>
  62. <script type="text/javascript" src="idup0.js"></script>
  63. </html>