初识初学表单

  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. <div style="color: brown; font-size: 25px; margin-bottom: 10px">
  11. 注册信息
  12. </div>
  13. <form action="" style="display: grid; gap: 1em" method="POST">
  14. <div>
  15. <label for="username">账号:</label>
  16. <input
  17. type="text"
  18. id="username"
  19. placeholder="1-3位字母加数字"
  20. required
  21. autofocus
  22. />
  23. </div>
  24. <div>
  25. <label for="password">密码:</label>
  26. <input
  27. type="password"
  28. id="password"
  29. placeholder="不要用生日"
  30. required
  31. autofocus
  32. />
  33. </div>
  34. <div>
  35. <label for="email">邮箱:</label>
  36. <input type="email" id="email" placeholder="1231@qq.com" />
  37. </div>
  38. <div>
  39. <label for="screct">性别:</label>
  40. <input type="radio" name="sex" value="male" id="male" /><label
  41. for="male"
  42. ></label
  43. >
  44. <input type="radio" name="sex" value="female" id="female" /><label
  45. for="female"
  46. ></label
  47. >
  48. <input
  49. type="radio"
  50. name="sex"
  51. value="screct"
  52. id="screct"
  53. checked
  54. /><label for="screct">保密</label>
  55. </div>
  56. <div>
  57. <label for="">癖好:</label>
  58. <input type="checkbox" name="hobby[]" id="fish" />
  59. <label for="fish">钓鱼</label>
  60. <input type="checkbox" name="hobby[]" id="basketball" />
  61. <label for="basketball">打球</label>
  62. <input type="checkbox" name="hobby[]" id="game" />
  63. <label for="game">玩游戏</label>
  64. </div>
  65. <div>
  66. <label for="">级别:</label>
  67. <select name="level" id="">
  68. <option value="1">一级会员</option>
  69. <option value="2">二级会员</option>
  70. <option value="3">三级会员</option>
  71. </select>
  72. </div>
  73. <!-- datalist 学习 -->
  74. <div>
  75. <label for="">datalis用法:</label>
  76. <input type="search" name="" id="" list="key" />
  77. <datalist id="key">
  78. <option value="随时"></option>
  79. <option value="爱好"></option>
  80. <option value="Mint"></option>
  81. <option value="Strawberry"></option>
  82. <option value="Vanilla"></option>
  83. </datalist>
  84. </div>
  85. <div><button type="button">提交</button></div>
  86. </form>
  87. </body>
  88. </html>