HTML5 input元素新的特性

2019-11-28 作者:金沙澳门官网网址   |   浏览(68)

2) type="date" :日期控件

说明:展现叁个日子控件,提供年月日的拈轻怕重或活动输入。

属性

value {string} :设置或拿到日期控件的值,值的格式要为:"yyyy-MM-dd"。

HTML5 input元素新的特性。示例

<input type="date" value="2016-04-29" />

图片 1

 

6) formmethod :设置表单method属性的值

说明:可设置的值为post、get等。

 

7) type="search" :搜索框

HTML5 input元素新的特性。说明:在Chrome中搜索框没内容时就好像经常的公文输入框,当有内容时左边有个'x'符号,用以消亡文本内容。

示例

<input type="search" />

图片 2 

 

1.1 简单描述

新扩大的天性描述如下:

autocomplete :是还是不是出示与昨天输入内容相相配的野史输入记录。<HTML5 input元素新的特性。详细介绍>

autofocus :当页面加载成功后,此成分别获得得宗旨。<详见介绍>

form :设置成分归属表单的ID。<详细介绍>

formaction :设置表单action属性的值。<详尽介绍>

formenctype :设置表单enctype属性的值。<详见介绍>

formmethod :设置表单method属性的值。<详细介绍>

formnovalidate :关闭表单的认证。<详尽介绍>

formtarget :设置表单target属性的值。<详见介绍>

HTML5 input元素新的特性。max :设置<input>成分中数字或日期控件的最大值。<详尽介绍>

min :设置<input>成分中数字或日期控件的小不点儿值。<详尽介绍>

minlength :设置文本输入控件的剧情最小长度。<详细介绍>

pattern :设置成分文本内容需合作的正则表明式。<详见介绍>

placeholder :设置文本控件的初期呈现内容。<详尽介绍>

readonly :设置成分是不是只读。<详见介绍>

required :设置控件是或不是为必填项。<详细介绍>

 

1) boolean checkValidity() :推断控件的内容是还是不是校验通过

返回值

{boolean} 重返叁个boolean值表示控件内容是还是不是校验通过。

示例

HTML

网址:<input type="url" id="webURL" />

JavaScript

// 内容为:www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => false :验证不通过

// 内容为:http://www.cnblogs.com/polk6
console.log(document.getElementById('webURL').checkValidity()); // => true :验证通过

  

14) readonly :设置成分是不是只读

 

8) type="tel" :电话号码输入框

说明:电话号码的格式相当多,可含蓄数字、横线、括号等。浏览器并不曾制订电话号码格式,只是在活动端浏览器接纳时暗中同意显示机械键盘。

示例

<input type="tel" />

 

8) formtarget :设置表单target属性的值

说明:可安装的值为_self、_blank、_parent、_top等。

 

5) type="number" :数值输入框

说明:只好输入数值相关字符,如数字、.(小数点)、-(负号)等。

属性:max表示数值最大值;min表示数值最小值;step表示微调按键每回跳动的尺寸。

示例

<input type="number" value="11.5" />

 图片 3

 

10) min :设置<input>成分中数字或日期控件的最小值

 

9) type="time" :时间控件

说明:展现三个光阴控件,提供时间的选用或自动输入。

属性

value {string} :设置或获得时间控件的值,值的格式要为:"HH:mm",、"HH:mm:ss" 或 "HH:mm:ss.SSS"。

示例

<input type="time" value="12:30" />

图片 4 

 

11) minlength :设置文本输入控件的开始和结果最小长度

 

11) type="week" :周数控件

说明:显示一个可选择年数、周数的日历控件。

属性

value {string} :设置或获得周数控件的值,值的格式要为:"yyyy-Www"。(格式中的W字符不能够大致,何况ww周数要为2位数)

示例

<input type="week" value="2016-W01"/>

图片 5

 

End

Web开采之路体系小说

菜单加载中...

1. 属性

<input>元素在HTML5中新增的质量有:autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required等等。

12) pattern :设置成分文本内容需协作的正则表明式

说明: 成分文本内容钦点的正则表明式全盘相配才会评释通过。

注意

1) 浏览器不会表明空值,若想必填可拉长 required 属性。

2) 若含有title属性的值,当相称失利会呈现title的消息。

示例

<form action="#"  >
    <p>手机号码:<input type="text" name="phoneNumber" pattern="[1]([3]|[5])[0-9]{9}" title="13或15开头的手机号码" /></p>
    <input type="submit" />
</form>

图片 6

  

10) type="url" :网站输入框

说明:输入的网站要抬高合同前缀;如 等。

示例

<input type="url" />

图片 7 

 

7) formnovalidate :关闭表单的印证。

说明:可选取于相同【暂存】操作。

示例

<form action="#"  >
    <p>用户名:<input type="text" name="loginName" required /></p>
    <input type="button" value="暂存" formnovalidate />
    <input type="submit" />
</form>

图片 8

 

4) formaction :设置表单action属性的值

 

3) form :设置元素归于表单的ID

说明:若成分不在表单标签里,可设置此值为须求归于的表单ID。

示例

<input type="text" form="register_form" />

 

5) formenctype :设置表单enctype属性的值

 

1) type="color" :颜色控件

说明:展现一个颜色控件,点击选中需求的水彩。

属性

value {string} :设置或得到颜色控件的值,值的格式要为:"#rrggbb"。

示例

<input type="color" />

图片 9

 

2.1 详细介绍

2.1 简介

<input>成分type属性的值:

color :颜色控件。<详细介绍>

date :日期控件。<详尽介绍>

email :电子邮件地址输入框。<详见介绍>

month :年月日历控件。<详见介绍>

number :数值输入框。<详细介绍>

range :滑动条。<详见介绍>

search :搜索框。<详细介绍>

tel :电话号码输入框。<详尽介绍>

time :时间控件。<详见介绍>

url :网站输入框。<详见介绍>

week :周数控件。<详细介绍>

 

13) placeholder :设置文本控件的优先体现内容

说明: 唯有文书档案内容为空才会来得此属性设定的值。

示例

姓名:<input type="text" placeholder="请输入真实姓名" />

图片 10

 

2) autofocus :当页面加载成功后,此成分别获得得主旨

说明:若页面中有两个要素含有此属性,只会最前头的元素获得主题。

示例

<p>姓名:<input type="text" placeholder="请输入真实姓名" /></p>
<p>地址:<input type="text" autofocus /></p>

 

9) max :设置<input>成分中数字或日期控件的最大值

 

1) autocomplete :是或不是出示与今天输入内容相相称的历史输入记录

说明:设置当前文本元素中是还是不是出示与当今内容相相配的历史输入记录。

场景:寻觅框要求此属性,而验证码就无需。

可设置的值:只可以够安装on、off多少个值。

  autocomplete="on" :显示相称的野史输入记录。

  autocomplete="off" :不显得相配的历史输入记录。

示例

<form action="#" >
    <p>验证码:<input type="text" autocomplete="off" /></p>
    <input type="submit" />
</form>

 

3) type="email" :电子邮件地址输入框

说明:展现三个只可以输入电子邮件格式的输入框。

属性

multiple :增添此属性后协助输入三个电子邮件地址,必得以','逗号隔断。

示例

<input type="email" multiple />

图片 11

 

2) void setCustomValidity(string msg) :设置校验不经过时的自定义音信

说明:在那因素上弹出三个警戒框,显示自定义务消防队息。

注意:独有表单验证时才会显示自定义的警戒新闻。

参数

msg {string} :设置须要显示的音讯。若为空值,将关门警报框。

示例

HTML:

<form>
    <p>新的密码:<input type="password" id="newPwd" oninput="validityPwd()" required /></p>
    <p>确认密码:<input type="password" id="newPwdConfirm" oninput="validityPwd()"  /></p>
    <input type="submit" />
</form>

JavaScript

// 校验2个密码是否一致
var validityPwd = function(){
    var newPwd = document.getElementById('newPwd');
    var newPwdConfirm = document.getElementById('newPwdConfirm');
    if(newPwd.value != newPwdConfirm.value){
        newPwdConfirm.setCustomValidity('两次密码输入不一致');
    }else{
        newPwdConfirm.setCustomValidity('');
    }
}

 图片 12

 

15) required :设置控件是还是不是为必填项

说明: 当提交表单时,才会申明此因素是不是填写,若未有填写,将呈现警示消息并撤销提交操作。

示例

<form action="#" >
    <p>用户名:<input type="text" name="loginName" required /></p>
    <input type="submit" />
</form>

图片 13

 

4) type="month" :年月控件

说明:提供叁个不能不采纳年、月的日历控件。

属性

value {string} :设置或获得控件的值,值的格式要为:"yyyy-MM"。

示例

<input type="month" value="2016-04" />

图片 14

 

3. 新的控件

<input>成分的type属性的值,决定了<input>成分突显怎么控件。

HTML5中,给<input>扩展了相当多新的控件,如color、date、email、month、number、range、search、tel、time、url、week等等。

若浏览器不援助新的控件,将私下认可以文本框展现(type="text")。

 

2. 方法

<input>元素在HTML5中加进了2个与校验相关的艺术:

checkValidity() :推断控件的开始和结果是或不是校验通过。

setCustomValidity() :设置校验不经过时的自定义消息。

2.2 详细介绍

目录

  1. 属性

  2. 方法

  3. 新控件 

 

1.2 详细介绍

   在HTML5中,<input>成分扩大了过多新的习性、方法及控件。本小说分别对那三地点开展介绍。

6) type="range" :滑动条

说明:以滑行条的格局表示数值。

属性:max表示数值最大值;min表示数值最小值。

示例

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

 图片 15

 

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:HTML5 input元素新的特性

关键词: