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">
相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):扎实的基本功是唯一捷径
前端·javascript·程序员
摇滚侠1 小时前
Vue3 其它API toRow和markRow
前端·javascript
難釋懷1 小时前
JavaScript基础-history 对象
开发语言·前端·javascript
beibeibeiooo1 小时前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
拉不动的猪1 小时前
刷刷题47(react常规面试题2)
前端·javascript·面试
浪遏1 小时前
场景题:大文件上传 ?| 过总字节一面😱
前端·javascript·面试
Bigger1 小时前
Tauri(十八)——如何开发 Tauri 插件
前端·rust·app
355984268550552 小时前
医保服务平台 Webpack逆向
前端·webpack·node.js
百锦再2 小时前
React编程的核心概念:发布-订阅模型、背压与异步非阻塞
前端·javascript·react.js·前端框架·json·ecmascript·html5
thinkQuadratic2 小时前
scss预处理器对比css的优点以及基本的使用
前端·css·scss