7_表单元素.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  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. <!-- 表单 -->
  11. <form action="后台提交地址">
  12. <!-- 文本框 type="text" -->
  13. 用户名:
  14. <input type="text">
  15. <!-- 换行 -->
  16. <br>
  17. <!-- 密码框 type="password" -->
  18. 密码:
  19. <input type="password">
  20. <br>
  21. <!-- 单选框 name属性="随便起"-->
  22. <!-- ctrl+? 注释 -->
  23. 性别:
  24. <input type="radio" name="sex">男
  25. <input type="radio" name="sex">女
  26. <br>
  27. <!-- 复选框 type="checkbox"-->
  28. 爱好:
  29. <input type="checkbox" name="hobby">吃饭
  30. <input type="checkbox" name="hobby">睡觉
  31. <input type="checkbox" name="hobby">敲代码
  32. <br>
  33. <!-- 下拉框
  34. 开始和结束标签中的内容是展示给用户看的
  35. value中的值是最终提交给后台,存在数据库中的
  36. -->
  37. 学校:
  38. <select>
  39. <option value="1">黑大</option>
  40. <option value="2">理工</option>
  41. <option value="3">农大</option>
  42. </select>
  43. <br>
  44. <!-- 文本域 -->
  45. 备注:
  46. <textarea></textarea>
  47. <br>
  48. <!-- 普通按钮 -->
  49. <input type="button" value="确定">
  50. <!-- 或 -->
  51. <button>确定</button>
  52. <!-- 提交按钮 type="submit" 提交按钮默认会提交表单 -->
  53. <input type="submit">
  54. <!-- 重置按钮 -->
  55. <input type="reset">
  56. </form>
  57. </body>
  58. </html>