HTML5 新的 Input 类型学习笔记

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">