HTML5新增了哪些input类型及其属性?


HTML5新增了哪些input类型及其属性?

1、url类型、email、tel类型

说明:当输入非url、email的字符串时,浏览器会自动提醒。

<form action="/example/html5/demo_form.asp">
   <input type="url">
   <input type="submit" value="提交">
</form>

2、number类型。

说明:只能输入数字,min表示数字的最小值,max为最大值,step为点击加减按钮时每次增减的数值。

<form action="/example/html5/demo_form.asp">
   <input type="number" min="2" max="10" step="2">
   <input type="submit" value="提交">
</form>

3、range类型(推荐学习:HTML教程

说明:其他属性同number类型一致,step表现为每滑动一步的数值。

<form action="/example/html5/demo_form.asp">
   <input type="range" min="2" max="10" step="2">
   <input type="submit" value="提交">
</form>

4、search类型

说明:在输入内容后,有×可以直接清空输入内容,其他与text类型一致。

<form action="/example/html5/demo_form.asp">
    <input type="search">
    <input type="submit" value="提交">
</form>

5、date、month、week、time、datetime、datetime-local类型

说明:date为取年月日,month为取年月,以此类推。

<form action="/example/html5/demo_form.asp">
   <input type="date">
    <input type="submit" value="提交">
</form>

6、color类型

说明:用于选择颜色。

<form action="/example/html5/demo_form.asp">
   <input type="color">
    <input type="submit" value="提交">
</form>

6、autocomplete属性

说明:此属性默认开启,作用为可以自动完成该input内容的填写。注意:只有在该input有name属性、是一个完整的表单时,才会自动生效。

<form action="/example/html5/demo_form.asp">
    <input type="text" autocomplete="on" name="tel">
    <input type="submit" value="提交">
</form>

7、autofocus属性

说明:进入页面后,焦点自动在该input。

<form action="/example/html5/demo_form.asp">
    <input type="text" autofocus name="tel">
    <input type="submit" value="提交">
</form>

8、pattern属性

说明:该属性值为一个正则,只能输入符合该正则的内容,否则会提示输入符合要求的字符。

<form>
   <input type="text" name="tel" pattern="/\d+/">
   <input type="submit" value="提交">
</form>
Image placeholder
前端答疑
未设置
  66人点赞

没有讨论,发表一下自己的看法吧

推荐文章
HTML5新增了哪些标签?

HTML5新增了哪些标签?html5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。html

HTML新增类型及标签笔记

placeholder属性:提示用户输入的信息multiple可以再email中输入多个邮箱地址,使用','隔开autofocus自动获取焦点required防止域为空

HTML新增类型及标签笔记

新增属性 multiple多个提交emailplaceholder显示提示信息autofocus焦点required必填minlengthmaxlength长度限制minmax 新增type emai

HTML新增类型及标签笔记

header头部nav导航section节aside侧边footer页脚article文章figure元素组合图片与图片描述组合figcaption details文档与文档细节Summary定义标题

innerHTML与jquery里的html()区别?

innerHTML与jquery里的html()区别?●html()可以设置tbody、tr这些只读标签,而innerHTML在低版本IE下不行;jQuery的html()做了些容错处理,原生的Dom

使用html-webpack-plugin对HTML文件进行预处理

一、前言先整理一波之前和webpack相关的文章: 使用Webpack对CSS文件进行后处理 基于Webpack的CSSSprites实现方案 Stylus系列——webpack-spritesmit

html转pdf工具 --- wkhtmltopdf

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 html转pdf工具---wkhtmltopdf [https://wkhtmltopdf.org/wkhtmltopdf htt

css中有哪些简写属性?

css中有哪些简写属性?●border属性●margin、padding属性●background属性●font属性●border-radius属性定义简写属性是可以让你同时设置其他几个CSS属性值的

什么是边缘计算及其重要性?

边缘计算正在改变世界上数百万台设备处理,处理和传递数据的方式。联网设备(IoT)的爆炸性增长,以及需要实时计算能力的新应用,继续推动着边缘计算系统的发展。诸如5G无线之类的更快的联网技术,使边缘计算系

JavaScript类型转换

其他类型转化成Number类型: 1.通过Number()将其他类型转换成数值类型,但是转换的变量为字符串时,若不是数字字符串,则返回NaN 2.通过parseInt()将其他类型转换成数值类型,但是

JavaScript类型转换

浮点数转化 通过parseFloat()将其他类型转换成浮点数,与parseInt()相同.

HTML5 Canvas 数据持久化存储之属性列表

属性列表想必大家都不会陌生,正常用HTML5来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用HTforWeb来实现属性栏点击按钮弹出多功能选框,对传入的数据

行业目前最大容量,东芝16TB硬盘里藏了哪些技术?

强大的SSD似乎给硬盘(HDD)带来了“毁灭性”的打击,使其淡出存储舞台,但事实并非如此。这种冲击确实存在,不过更多在消费级硬盘市场。对于企业级的数据存储,可以说从现在到未来很长一段时间内,硬盘依旧会

HTML内联元素有哪些?

内联元素(inlineelement)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,通常被包括在块元素中使用,常见内联元素有“a、b、

HTML中16个全局属性介绍

HTML原有属性accesskey作用:浏览器用来创建激活或聚焦元素的快捷键值:一个键盘字符如O范围:支持该属性的元素有、、、、、、注意:使用该属性可能在新窗口打开链接时可能会被浏览器屏蔽 百度 阿里

HTML属性的附加信息

课程推荐:前端开发工程师--学习猿地精品课程 HTML属性HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。 属性总是以名称/值对的形式出现,比如:name="value"。 属性总是

js如何修改css属性?

js如何修改css属性?1、修改style样式:通过document.styleSheets[n]//n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到

css设置边框可以用哪个属性?

css设置边框可以用border简写属性,它可以在一个声明设置所有的边框属性,按照border-width、border-style、border-color顺序设置;也可以单独使用这几个属性来设置边

jquery判断是否包含某个属性?

jquery判断是否包含某个属性?在JQuery编码中,我们会判断元素是否存在某个属性,比如是否包含class="new"的样式呢。JQuery判断就非常简单了,因为有hasClass这个方法$("i

html5不常用标签应用场景

divpspanuldlollidtddstrongb现在都已经是9102年了,html5已经相当成熟标准了,为什么在布局的时候不用写html5提供的具有语义化的标签进行布局呢?我个人觉得是因为我们刚

HTML5都有什么用途?

HTML5都有什么用途?HTML5的用途1、本地存储基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5APPCache,以及本地存储功能。2、实现多媒体更加简单利

html5是什么?

html5是什么?万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。本次修改后的标准我们就称之为html5。HTML5是构建Web内容的一种语言描述方式。HTM

html5 css3是什么?

html5和css3是什么?HTML5和CSS3是HTML和CSS的最新版本。HTML为构成网页的主要语言。通过这种语言,我们可以向计算机说明网页格式、内容、显示效果等等。CSS则是专门用来控制网页显