3.输入类型.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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 action="">
  10. <!-- text 文本类型 -->
  11. <input type="text">
  12. <br>
  13. <!-- value 内容值 color 颜色类型 调色板-->
  14. <input type="color" value="#ff0000">
  15. <br>
  16. <!-- submit 提交按钮 -->
  17. <input type="submit">
  18. <br>
  19. <!-- date 日期 -->
  20. <input type="date" value="2024-02-21">
  21. <br>
  22. <!-- time 时间 -->
  23. <input type="time" value="12:00">
  24. <br>
  25. <!-- search 搜索 -->
  26. <input type="search">
  27. <br>
  28. <!-- range 进度条 -->
  29. <input type="range" value="100">
  30. <br>
  31. <!-- number 数值 max 最大值 min 最小值 -->
  32. <input type="number" value="3" max="10" min="1">
  33. <br>
  34. <!-- tel 手机号 
  35. maxlength 最大可输入的范围
  36. -->
  37. <input type="tel" maxlength="11">
  38. <br>
  39. <!--
  40. file 文件类型
  41. accept 接收文件类型
  42. -->
  43. <input type="file" accept="image/jpg,image/png">
  44. <br>
  45. <select>
  46. <option value="1">1</option>
  47. <option value="11">11</option>
  48. <option value="1111">1111</option>
  49. </select>
  50. <input type="text" list="abc">
  51. <datalist id="abc">
  52. <option value="112">11</option>
  53. <option value="11112">1111</option>
  54. </datalist>
  55. <br>
  56. <!-- 邮箱校验 email
  57. 回车执行
  58. 输入内容一定要包含@符号
  59. -->
  60. <input type="email">
  61. </form>
  62. </body>
  63. </html>