HTML5中有哪些新增的INPUT输入类型？

HTML5 新增了8种 INPUT 输入类型，包括：date, time, datetimelocal, week, month, email, url, tel。

HTML5 引入了多种新的<input> 类型，使得表单输入更加灵活和高效，这些新类型不仅增强了用户体验，还简化了数据验证过程，下面将详细介绍 HTML5 新增的8类<input> 输入类型的应用：

1、email 类型

功能说明：专门用于输入电子邮件地址的文本框，在提交表单时会自动验证输入值是否符合电子邮件格式。

代码示例：

     <input type="email" name="user_email" />

2、url 类型

功能说明：用于输入URL地址的文本框，提交表单时会自动验证URL格式是否正确。

代码示例：

     <input type="url" name="user_url" />

3、number 类型

功能说明：提供用于输入数值的文本框，可以设置最小值、最大值和步长等属性来限制输入范围。

代码示例：

     <input type="number" name="quantity" min="1" max="100" step="5" />

4、range 类型

功能说明：用于输入一定范围内数字值的文本框，在网页中显示为滑动条，用户可以通过拖动滑块来选择数值。

代码示例：

     <input type="range" name="volume" min="0" max="100" />

5、date 类型

功能说明：允许用户选择一个日期，格式为“年/月/日”。

代码示例：

     <input type="date" name="date_picker" />

6、month 类型

功能说明：用于选择月份和年份，格式为“年/月”。

代码示例：

     <input type="month" name="month_picker" />

7、week 类型

功能说明：允许用户选择周和年份，格式为“年/周”。

代码示例：

     <input type="week" name="week_picker" />

8、time 类型

功能说明：用于选择时间（小时和分钟）。

代码示例：

     <input type="time" name="time_picker" />

输入类型	功能说明	代码示例
email	输入电子邮件地址
url	输入URL地址
number	输入数值，可设定范围和步长
range	滑动条选择数值
date	选择日期
month	选择月份和年份
week	选择周和年份
time	选择时间（小时和分钟）

相关问答FAQs：

1、问：HTML5中的email类型如何进行自动验证？

答：email类型的输入框在提交表单时会自动验证输入值是否符合电子邮件格式，如果输入的值不符合电子邮件格式，则无法通过验证，从而防止无效数据的提交。

2、问：HTML5中的range类型在实际应用中有哪些常见用途？

答：range类型常用于需要用户选择一个数值范围的场景，例如音量控制、亮度调节等，它以滑动条的形式展示，用户可以通过拖动滑块来选择具体的数值，操作直观且便捷。