注意注意！ html5新增的input类型大总结

最新推荐文章于 2025-09-07 14:14:53 发布

原创最新推荐文章于 2025-09-07 14:14:53 发布 · 422 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

前端专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了HTML5中新增的input类型，包括电子邮件、搜索、URL、颜色、数字、范围、日期、周和月等，每个类型都附带了功能说明和代码示例，简化了数据验证和用户交互的过程。

文章背景

1.在其他版本的HTML中，表单包含的元素非常有限，并且属性也不多，尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码

2.以上的不足都已经在html5中被克服，HTML5在以上的基础上增加了许多标签和属性，为开发人员带来了极大的方便

电子邮件类型< input type=“email” />

功能就是输入E-mail地址的文本框

注意：输入的内容中必须包含“@”,"@"后面必须具有内容

代码示例：

< body>

< form action="">

< p>

邮箱:< input type="email"/>

< /p>

< p>

< input type="submit" />

< input type="reset" />

< /p>

< /fprm>

< /body>

图例为：

搜索类型< input type=“search” />

功能就是输入搜索关键字的文本框

代码示例：

< body>

< form action="">

< p>

邮箱:< input type="email"/>

< /p>

< p>

搜索：< input type=“search” />`

< /p>

< p>

< input type="submit" />

< input type="reset" />

< /p>

< /fprm>

< /body>

图例为：

URL类型< input type=“url”/>

功能就是输入WEB站点的文本框

注意：输入的内容中必须包含“http://”，后面必须有内容

代码示例：

< body>

< form action="">

< p>

邮箱:< input type="email"/>

< /p>

< p>

搜索： < input type="search" />

< /p>

< p>

网站类型： < input type=“url” />`

< /p>

< p>

< input type="submit" />

< input type="reset" />

< /p>

< /fprm>

< /body>

图例为：

颜色类型< input type=“color” />

功能就是预定义的颜色拾取控件

代码示例：

< body>

< form action="">

< p>

邮箱:< input type="email"/>

< /p>

< p>

搜索： < input type="search" />

< /p>

< p>

网站类型：< input type="url" />

< /p>

< p>

颜色： < input type="color" />

< /p>

< p>

< input type="submit" />

< input type="reset" />

< /p>

< /fprm>

图例为：

数字类型< input type=“number”/>

只能接受数字

属性：

min：当前域能接受的最小值

max：当前域能接受的最大值

step：决定了域所接受值递增或递减的步长，默认值为1

代码示例：

< body>

< form action="">

< p>

邮箱:< input type="email"/>

< /p>

< p>

搜索： < input type="search" />

< /p>

< p>

网站类型：< input type="url" />

< /p>

< p>

颜色：< input type="color" />

< /p>

< p>

成绩：< input type="number" min="0" max="300" step="5"/>

< /p>

< p>

< input type="submit" />

< input type="reset" />

< /p>

< /fprm>

图例为：

范围类型< input type=“range” min=“0” max=“100” value=“80” />

允许用户选择一个范围内的值

属性：

min：范围的下限值

max：范围的上限制

step：声明该值递增或递减的步长

value：设置初始值

代码示例：

< body>

< form action="">

< p>

邮箱:< input type="email"/>

< /p>

< p>

搜索： < input type="search" />

< /p>

< p>

网站类型：< input type="url" />

< /p>

< p>

颜色：`` < input type="color" />

< /p>

< p>

成绩：< input type="number" min="0" max="300" step="5"/>

< /p>

< p>

范围：< input type="range" min="0" max="100" value="80"/>

< /p>

< p>

< input type="submit" />

< input type="reset" />

< /p>

< /fprm>

图例为：

日期类型< input type=“date”/>

功能就是创建一个日期输入域

代码示例：

< body>

< form action="">

< p>

邮箱:< input type="email"/>

< /p>

< p>

搜索： < input type="search" />

< /p>

< p>

网站类型： < input type="url" />

< /p>

< p>

颜色：`` < input type="color" />

< /p>

< p>

成绩：< input type="number" min="0" max="300" step="5"/>

< /p>

< p>

范围：< input type="range" min="0" max="100" value="80"/>

< /p>

< p>

日期：< input type=“date”/>

< /p>

< p>

< input type="submit" />

< input type="reset" />

< /p>

< /fprm>

图例为：

周类型< input type=“week”/>

功能与date类型相似，只能选择周

月类型< input type=“month”/>

功能与date类型相似，但只能选择月份

由于周类型与月类型一样，代码就不写了，想练习的朋友们可以自己练习一下。

（ps:如果您觉得有用，请点赞转发，让更多人看到哦）

小伙伴也可以加一下QQ群，可以获取资源以及更多学习方法哦

QQ群：1126277960 （暗号：优快云）