表单的制作

效果图

代码如下

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>用户注册</title>
  9. </head>
  10. <body>
  11. <style>
  12. .register input{
  13. border-radius: 5px;
  14. border: 1px solid #666;
  15. }
  16. .item{
  17. height: 40px;
  18. line-height: 40px;
  19. }
  20. input[type="text"]{
  21. width: 170px;
  22. }
  23. input[type="email"]{
  24. width: 170px;
  25. }
  26. input[type="password"]{
  27. width: 170px;
  28. }
  29. input[type="search"]{
  30. width: 170px;
  31. }
  32. #keywords{
  33. width: 170px;
  34. }
  35. .submit{
  36. background-color: #1E9FFF;
  37. color: #fff;
  38. border-radius: 4px;
  39. text-align: center;
  40. padding: 0px 30px;
  41. border: 1px solid transparent;
  42. height: 38px;
  43. line-height: 38px;
  44. }
  45. .item:nth-child(2) label{
  46. color: red;
  47. }
  48. </style>
  49. <div class="register">
  50. <h4>用户注册</h4>
  51. <form action="#" method="post">
  52. <fieldset>
  53. <div class="item">
  54. <label for="username">账号:</label>
  55. <input type="text" name="username" id="username" placeholder="请输入账号" required value="admin">
  56. </div>
  57. <div class="item">
  58. <label for="password">密码:</label>
  59. <input type="password" name="password" id="password" placeholder="请输入密码" required>
  60. </div>
  61. <div class="item">
  62. <label for="email">邮箱:</label>
  63. <input type="email" name="email" id="email" placeholder="examples@qq.com" required>
  64. </div>
  65. </fieldset>
  66. <div class="item">
  67. <label for="secret">性别:</label>
  68. <input type="radio" name="gender" value="1"><label for=""></label>
  69. <input type="radio" name="gender" value="0"><label for=""></label>
  70. <input type="radio" name="gender" value="2" checked id="secret"><label for="">保密</label>
  71. </div>
  72. <div class="item">
  73. <label>爱好:</label>
  74. <input type="checkbox" name="hobby[]" id="game" checked /><label for="game">游戏</label>
  75. <input type="checkbox" name="hobby[]" id="trave" /><label for="trave">旅游</label>
  76. <input type="checkbox" name="hobby[]" id="shoot" checked /><label for="shoot">摄影</label>
  77. </div>
  78. <div class="item">
  79. <select name="level" id="">
  80. <option value="1">铜牌会员</option>
  81. <option value="2">银会员</option>
  82. <option value="3">金牌会员</option>
  83. <option value="4" selected>钻石会员</option>
  84. </select>
  85. </div>
  86. <div class="item">
  87. <label for="">搜索关键字:</label>
  88. <input type="search" name="search" list="keywords" />
  89. <datalist id="keywords">
  90. <option value="html"></option>
  91. <option value="css"></option>
  92. <option value="javascript"></option>
  93. <option value="js"></option>
  94. <option value="php"></option>
  95. </datalist>
  96. </div>
  97. <div class="item">
  98. <button class="submit">提交</button>
  99. </div>
  100. </form>
  101. </div>
  102. </body>
  103. </html>