2.表单.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <!-- 表单
  10. form 表单
  11. 属性:action 将表单信息提交到表单发送处(很少使用)
  12. label 存放文本信息
  13. input 输入框
  14. 属性:type类型 placeholder 提示信息
  15. 1.text 文本
  16. 2.password 密码
  17. 3.radio 单选 name值相同
  18. 4.checkbox 多选 disabled禁止选中 checked默认选中
  19. 5.submit 提交按钮
  20. 6.reset 重置按钮
  21. 7.button 按钮 value控制按钮名称
  22. -->
  23. <form action="">
  24. <label>账号:</label>
  25. <input type="text" placeholder="请输入账号">
  26. <br><br>
  27. <label>密码:</label>
  28. <input type="password" placeholder="请输入密码">
  29. <!-- <br><br> -->
  30. <label>性别:</label>
  31. <input type="radio" name="aa">男
  32. <input type="radio" name="aa">女
  33. <br>
  34. <label>喜好:</label>
  35. <input type="checkbox">画画
  36. <input type="checkbox" disabled>篮球
  37. <input type="checkbox" checked>声乐
  38. <input type="checkbox">书法
  39. <br>
  40. <input type="submit">
  41. <input type="reset">
  42. <input type="button" value="自定义">
  43. <br>
  44. <br>
  45. <!--
  46. 行内块元素:行内块元素一行展示时,会产生空白间隙
  47. img input
  48. -->
  49. <input style="background: #00f;width: 100px;" type="text" placeholder="请输入账号">
  50. <input style="background: #00f;" type="text" placeholder="请输入账号">
  51. <!-- 下拉框
  52. select与option一起组成
  53. selected 默认选择
  54. disabled 禁止选中
  55. -->
  56. <select>
  57. <option value="1" disabled>内容一内容一内容一内容一</option>
  58. <option value="2" selected>2</option>
  59. <option value="3">3</option>
  60. </select>
  61. <!--
  62. 文本域 textarea
  63. rows 行
  64. cols 列
  65. maxlength 最大长度
  66. -->
  67. <textarea rows="10" cols="10" maxlength="20"></textarea>
  68. </form>
  69. </body>
  70. </html>