4.表单标签.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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. <style>
  8. /* input {
  9. width: 300px;
  10. height: 200px;
  11. } */
  12. </style>
  13. </head>
  14. <body>
  15. <!--
  16. form 表单标签
  17. 属性:action 提交内容到后台
  18. 输入框:
  19. input
  20. 属性:placeholder提示信息
  21. type 类型
  22. 1.text 文本类型
  23. 2.password 密码
  24. 3.submit 提交按钮
  25. 4.reset 重置按钮
  26. 5.button 自定义按钮 配合value属性使用
  27. 6.radio 单选格式 需要设置相同的name属性值
  28. 7.checkbox 多选格式 checked默认选择 禁止选择
  29. -->
  30. <form action="">
  31. <input type="text" placeholder="请输入您的手机号" />
  32. <input type="password" />
  33. <input type="submit" />
  34. <input type="reset" />
  35. <input type="button" value="哈哈哈" />
  36. <br /><br />
  37. <input type="radio" name="aaa" />男
  38. <input type="radio" name="aaa" />女
  39. <br /><br />
  40. <input type="checkbox" />篮球
  41. <input type="checkbox" disabled />足球
  42. <input type="checkbox" checked />羽毛球
  43. <input type="checkbox" />网球
  44. <input type="checkbox" />排球
  45. <!--
  46. button 按钮标签
  47. -->
  48. <button>登录</button>
  49. <!--
  50. 下拉框
  51. select 与 option 搭配使用
  52. option中value的值是绑定数据进行联调
  53. -->
  54. <select>
  55. <option value="1">小学</option>
  56. <option value="2">初中</option>
  57. <option value="3">高中</option>
  58. </select>
  59. <!-- 文本域
  60. textarea
  61. rows 行
  62. cols 列
  63. maxlength 最大输入长度
  64. -->
  65. <textarea rows="20" cols="30" maxlength="10"></textarea>
  66. </form>
  67. </body>
  68. </html>