html基础:form表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <form action="" method="POST">
  11. <fieldset>
  12. <legend>必填项</legend>
  13. <!-- 文本输入框 -->
  14. <div>
  15. <label for="username">帐号:</label>
  16. <input
  17. type="text"
  18. id="username"
  19. autofocus
  20. required
  21. placeholder="账号"
  22. />
  23. </div>
  24. <div>
  25. <label for="password">密码:</label>
  26. <input type="password" id="password" required placeholder="密码" />
  27. </div>
  28. </fieldset>
  29. <div>
  30. <label for="email">邮箱:</label>
  31. <input type="email" id="email" placeholder="demo@qq.com" />
  32. </div>
  33. <div>
  34. <label for="secret">性别:</label>
  35. <input type="radio" name="gender" value="male" id="male" /><label
  36. for="male"
  37. ></label
  38. >
  39. <input type="radio" name="gender" value="female" id="female" /><label
  40. for="female"
  41. ></label
  42. >
  43. <input
  44. type="radio"
  45. name="gender"
  46. value="secret"
  47. id="secret"
  48. checked
  49. /><label for="secret">保密</label>
  50. </div>
  51. <div>
  52. <label>爱好:</label>
  53. <input type="checkbox" name="hobby[]" id="programmer" checked /><label
  54. for="programmer"
  55. >编码</label
  56. >
  57. <input type="checkbox" name="hobby[]" id="game" /><label for="game"
  58. >游戏</label
  59. >
  60. <input type="checkbox" name="hobby[]" id="trave" /><label for="trave"
  61. >旅游</label
  62. >
  63. <input type="checkbox" name="hobby[]" id="shot" /><label for="shot"
  64. >摄影</label
  65. >
  66. </div>
  67. <div>
  68. <select name="level" id="">
  69. <option value="1">铜牌会员</option>
  70. <option value="2">银牌会员</option>
  71. <option value="3" selected>金牌会员</option>
  72. <option value="4">钻石会员</option>
  73. </select>
  74. </div>
  75. <div>
  76. <!-- datalist -->
  77. <label for="">关键字</label>
  78. <input type="search" name="search" id="" list="my-key" />
  79. <datalist id="my-key">
  80. <option value="html">html</option>
  81. <option value="css">css</option>
  82. <option value="js">js</option>
  83. </datalist>
  84. </div>
  85. <button type="submit">提交</button>
  86. </form>
  87. </body>
  88. </html>

效果图