HTML5 引入了多种新的表单输入类型，这些新特性不仅增强了输入控制，还提供了更强大的验证功能，使表单设计更加灵活和便捷。以下是 HTML5 新的 Input 类型的详细学习笔记。
一、color 类型
-
功能：用于选取颜色。
-
使用场景：当需要用户选择颜色时，例如设置主题颜色、选择背景色等。
-
兼容性：在 Opera、Chrome 中兼容，但在 Safari、Firefox、IE 中不兼容。
-
示例代码：
HTML复制
选择你喜欢的颜色: <input type="color" name="favcolor">预览
二、date 类型
-
功能：允许从日期选择器中选择一个日期。
-
使用场景：适用于需要用户输入日期的场景，如生日、预约日期等。
-
兼容性：在 Safari 中兼容。
-
示例代码：
HTML复制
生日: <input type="date" name="bday">预览
三、datetime 类型
-
功能：允许选择一个日期和时间（UTC 时间）。
-
使用场景：适用于需要精确到时间的日期选择，如国际会议时间选择。
-
示例代码：
HTML复制
生日 (日期和时间): <input type="datetime" name="bdaytime">预览
四、datetime-local 类型
-
功能：允许选择一个日期和时间（无时区）。
-
使用场景：当需要用户输入本地日期和时间，且不涉及时区转换时。
-
示例代码：
HTML复制
生日 (日期和时间): <input type="datetime-local" name="bdaytime">预览
五、email 类型
-
功能：用于输入电子邮件地址，并在提交表单时自动验证其合法性。
-
使用场景：适用于需要用户输入邮箱地址的场景，如注册、订阅等。
-
兼容性：在 iPhone 的 Safari 浏览器中支持，并通过改变触摸屏键盘来配合输入。
-
示例代码：
HTML复制
E-mail: <input type="email" name="email">预览
六、month 类型
-
功能：允许选择一个月份。
-
使用场景：适用于需要用户选择特定月份的场景，如财务报表选择月份。
-
示例代码：
HTML复制
生日 (月和年): <input type="month" name="bdaymonth">预览
七、number 类型
-
功能：用于输入数值，并可设置数值范围。
-
使用场景：适用于需要用户输入数值的场景，如购买数量、评分等。
-
属性：
-
min：规定允许的最小值。 -
max：规定允许的最大值。 -
step：规定合法的数字间隔。 -
value：规定默认值。
-
-
示例代码：
HTML复制
数量 (1 到 5 之间): <input type="number" name="quantity" min="1" max="5">预览
八、range 类型
-
功能：用于输入一定范围内的数值，通常以滑动条的形式显示。
-
使用场景：适用于需要用户选择一个范围内的数值，如音量调节、评分等。
-
属性：
-
min：规定允许的最小值。 -
max：规定允许的最大值。 -
step：规定合法的数字间隔。 -
value：规定默认值。
-
-
示例代码：
HTML复制
<input type="range" name="points" min="1" max="10">预览
九、search 类型
-
功能：用于搜索域，如站点搜索或 Google 搜索。
-
使用场景：适用于需要用户输入搜索关键词的场景。
-
示例代码：
HTML复制
Search Google: <input type="search" name="googlesearch">预览
十、tel 类型
-
功能：用于输入电话号码。
-
使用场景：适用于需要用户输入电话号码的场景，如注册、联系信息填写等。
-
示例代码：
HTML复制
电话号码: <input type="tel" name="usrtel">预览
十一、time 类型
-
功能：允许选择一个时间（无时区）。
-
使用场景：适用于需要用户输入时间的场景，如预约时间、工作时间等。
-
示例代码：
HTML复制
选择时间: <input type="time" name="usr_time">预览
十二、url 类型
-
功能：用于输入 URL 地址，并在提交表单时自动验证其合法性。
-
使用场景：适用于需要用户输入网址的场景，如链接分享、个人主页等。
-
兼容性：在 iPhone 的 Safari 浏览器中支持，并通过改变触摸屏键盘来配合输入。
-
示例代码：
HTML复制
添加您的主页: <input type="url" name="homepage">预览
十三、week 类型
-
功能：允许选择周和年。
-
使用场景：适用于需要用户选择周的场景，如课程安排、工作计划等。
-
示例代码：
HTML复制
选择周: <input type="week" name="week_year">
