菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
66
0

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

原创
05/13 14:22
阅读数 831


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>

发表评论

0/200
66 点赞
0 评论
收藏
为你推荐 换一批