HTML5 表单里面的新属性

最新推荐文章于 2022-10-02 18:07:20 发布

ZorroYuan

最新推荐文章于 2022-10-02 18:07:20 发布

阅读量500

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5学习笔记文章标签： HTML5

本文链接：https://blog.youkuaiyun.com/Acmerr/article/details/51675501

HTML5学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML5中新增的input类型，如search、email和number等，这些类型为用户提供更友好的交互体验，并允许浏览器提供相应的支持，例如清除按钮和数字选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在input类型里面，新增加了search属性，Chrome和Safari提供按钮来清除字段。

<input type="search" id="s" name="s">

效果图：（箭头所指的为浏览器提供的清除按钮）

input 类型在HTML5中还提供了email属性和URL等属性，浏览器可以很智能的提供支持。

 <input type="email" id="email" name="email">
    <!--Opera Firefox和WebKit 支持url输入类型，如果URL格式不正确，将会报告输入无效-->
    <label for="url">My website id located at:</label>
    <input type="url" id="url" name="url">

效果图：

其中，有一个类型是number类型，在谷歌浏览器中可以提供向上或者下的箭头来选择一个数字，而且，还有max和min属性可以设置。

 <label for="quantity">I would like to receive
        <input type="number" name="quantity" id="quantity">copies of<cite>The HTML5 Herald</cite>
    </label>