homework08.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. font-size: 18px;
  11. }
  12. #login label {
  13. display: inline-block;
  14. width: 150px;
  15. text-align: right;
  16. margin-right: 20px;
  17. }
  18. .formitem {
  19. margin: 20px 0;
  20. }
  21. .hint {
  22. display: inline-block;
  23. width: 320px;
  24. font-size: 14px;
  25. margin-left: 10px;
  26. }
  27. .correct {
  28. color: green;
  29. }
  30. .incorrect {
  31. color: red;
  32. }
  33. #login input[type="submit"] {
  34. display: inline-block;
  35. width: 120px;
  36. height: 30px;
  37. background-color: darkred;
  38. color: white;
  39. font-size: 20px;
  40. line-height: 30px;
  41. border: none;
  42. cursor: pointer;
  43. margin-left: 200px;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <form id="login" action="" method="post">
  49. <div class="formitem">
  50. <label for="username">用户名: </label>
  51. <input type="text" id="username" name="username">
  52. <span id="uidHint" class="hint"></span>
  53. </div>
  54. <div class="formitem">
  55. <label for="password">密码: </label>
  56. <input type="password" id="password" name="password">
  57. <span id="pwdHint" class="hint"></span>
  58. </div>
  59. <div class="formitem">
  60. <label for="repassword">确认密码: </label>
  61. <input type="password" id="repassword">
  62. <span id="rePwdHint" class="hint"></span>
  63. </div>
  64. <div class="formitem">
  65. <label for="tel">手机号: </label>
  66. <input type="text" id="tel" name="tel">
  67. <span id="telHint" class="hint"></span>
  68. </div>
  69. <div class="formitem">
  70. <label for="code">验证码: </label>
  71. <input type="text" id="code" name="code" size="4">
  72. <input type="button" value="获取验证码">
  73. </div>
  74. <div class="formitem">
  75. <input type="submit" value="立即开通">
  76. </div>
  77. <div class="formitem">
  78. <label for="agreement"></label>
  79. <input type="checkbox" id="agreement">
  80. <span class="hint">我同意<a href="#">《XYZ服务协议》</a></span>
  81. </div>
  82. </form>
  83. <script src="js/jquery.min.js" ></script>
  84. </body>
  85. </html>