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">
相关推荐
风继续吹..26 分钟前
后台管理系统权限管理:前端实现详解
前端·vue
yuanmenglxb20041 小时前
前端工程化包管理器:从npm基础到nvm多版本管理实战
前端·前端工程化
新手小新1 小时前
C++游戏开发(2)
开发语言·前端·c++
我不吃饼干2 小时前
【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
前端·typescript·trae
小杨同学yx3 小时前
前端三剑客之Css---day3
前端·css
Mintopia4 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九5 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
Mintopia6 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1896 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴6 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript