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">
相关推荐
来自星星的坤4 小时前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
vvilkim6 小时前
全面解析React内存泄漏:原因、解决方案与最佳实践
前端·javascript·react.js
vvilkim6 小时前
React批处理(Batching)更新机制深度解析
前端·javascript·react.js
Bayi·6 小时前
前端面试场景题
开发语言·前端·javascript
程序猿熊跃晖6 小时前
Vue中如何优雅地处理 `<el-dialog>` 的关闭事件
前端·javascript·vue.js
进取星辰6 小时前
12、高阶组件:魔法增幅器——React 19 HOC模式
前端·javascript·react.js
拉不动的猪6 小时前
前端低代码开发
前端·javascript·面试
程序员张37 小时前
Vue3集成sass
前端·css·sass
夜跑者7 小时前
axios 在请求拦截器中设置Content-Type无效问题
前端
知识分享小能手7 小时前
JavaScript学习教程,从入门到精通,Ajax与Node.js Web服务器开发全面指南(24)
开发语言·前端·javascript·学习·ajax·node.js·html5