3.输入类型.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  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. <form>
  10. <!-- text 文本类型 -->
  11. <input type="text">
  12. <!-- color 取色板 -->
  13. <input type="color" value="#ff0000">
  14. <!-- submit 提交按钮 -->
  15. <input type="submit">
  16. <!-- date 日期选择器 -->
  17. <input type="date" value="2024-06-12">
  18. <!-- time 时间选择器 -->
  19. <input type="time" value="12:00">
  20. <!-- search 搜索框 -->
  21. <input type="search">
  22. <!-- range 进度条 -->
  23. <input type="range">
  24. <!-- number 数字选择器 max 最大值 min最小值 value 默认值 -->
  25. <input type="number" max="20" min="10" value="12">
  26. <!-- tel 手机号 maxlength 最大长度 -->
  27. <input type="tel" maxlength="11">
  28. <!-- file 文件 accept 接收类型 -->
  29. <input type="file" accept="image/jpg">
  30. <select>
  31. <option value="aa">1</option>
  32. <option value="bb">2</option>
  33. <option value="cc">3</option>
  34. </select>
  35. <input type="text" list="abc">
  36. <datalist id="abc">
  37. <option value="1">小学</option>
  38. <option value="2">初中</option>
  39. <option value="3">高中</option>
  40. <option value="4">大学</option>
  41. </datalist>
  42. <!-- email 邮箱输入框 回车时触发 -->
  43. <input type="email">
  44. </form>
  45. </body>
  46. </html>