html5 input元素新特点

日期:2021-01-20 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

特性

<input>元素在HTML5中新提升的特性有:autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、max、min、minlength、pattern、placeholder、readonly、required这些。

简易叙述

新提升的特性叙述以下:

  1. autocomplete :是不是显示信息与如今键入內容相配对的历史时间键入纪录。
  2. autofocus :当网页页面载入进行后,此元素得到聚焦点。
  3. form :设定元素归属表单的ID。
  4. formaction :设定表单action特性的值。
  5. formenctype :设定表单enctype特性的值。
  6. formmethod :设定表单method特性的值。
  7. formnovalidate :关掉表单的认证。
  8. formtarget :设定表单target特性的值。
  9. max :设定<input>元素中数据或时间控制的最大值。
  10. min :设定<input>元素中数据或时间控制的最少值。
  11. minlength :设定文字键入控制的內容最少长度。
  12. pattern :设定元素文字內容需配对的正则表达式表述式。
  13. placeholder :设定文字控制的预先显示信息內容。
  14. readonly :设定元素是不是写保护。
  15. required :设定控制是不是为必填项。

autocomplete :是不是显示信息与如今键入內容相配对的历史时间键入纪录

表明:设定当今文字元素中是不是显示信息与如今內容相配对的历史时间键入纪录。

情景:检索框必须此特性,而认证码就不必须。

可设定的值:只能够设定on、off两个值。

  1. autocomplete="on" :显示信息配对的历史时间键入纪录。
  2. autocomplete="off" :无法显示配对的历史时间键入纪录。

示例:

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

autofocus :当网页页面载入进行后,此元素得到聚焦点

表明:若网页页面中有好几个元素含有此特性,只会最前面的元素得到聚焦点。

示例:

<p>名字:<input type="text" placeholder="请键入真正名字" /></p>
<p>详细地址:<input type="text" autofocus /></p>

form :设定元素归属表单的ID

表明:若元素不在表单标识里,可设定此值为必须归属的表单ID。

示例:

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

formaction :设定表单action特性的值

formenctype :设定表单enctype特性的值

formmethod :设定表单method特性的值

表明:可设定的值为post、get等。

formnovalidate :关掉表单的认证。

表明:可运用于相近【暂存】实际操作。

示例:

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

 

formtarget :设定表单target特性的值

表明:可设定的值为_self、_blank、_parent、_top等。

max :设定<input>元素中数据或时间控制的最大值

min :设定<input>元素中数据或时间控制的最少值

minlength :设定文字键入控制的內容最少长度

pattern :设定元素文字內容需配对的正则表达式表述式

表明: 元素文字內容特定的正则表达式表述式彻底配对才会认证根据。

留意:

1) 访问器不容易认证空值,若想必填可再加 required 特性。

2) 若含有title特性的值,当配对不成功会显示信息title的信息内容。

示例:

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

placeholder :设定文字控制的预先显示信息內容

表明: 仅有文本文档內容为空才会显示信息此特性设置的值。

示例:

名字:<input type="text" placeholder="请键入真正名字" />

readonly :设定元素是不是写保护

required :设定控制是不是为必填项

表明: 当递交表单时,才会认证此元素是不是填写,若沒有填写,将显示信息警示信息内容并撤销递交实际操作。

示例:

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

方式

  1. <input>元素在HTML5中提升了2个与校检有关的方式:
  2. checkValidity() :分辨控制的內容是不是校检根据。
  3. setCustomValidity() :设定校检堵塞落伍的自定信息内容。
  4. boolean checkValidity() :分辨控制的內容是不是校检根据

回到值:

{boolean} 回到1个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 :认证根据

void setCustomValidity(string msg) :设定校检堵塞落伍的自定信息内容

表明:在此元素上弹出1个警示框,显示信息自定信息内容。

留意:仅有表单认证时才会显示信息自定的警示信息内容。

主要参数:

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个登陆密码是不是1致
var validityPwd = function(){
    var newPwd = document.getElementById('newPwd');
    var newPwdConfirm = document.getElementById('newPwdConfirm');
    if(newPwd.value != newPwdConfirm.value){
        newPwdConfirm.setCustomValidity('两次登陆密码键入不1致');
    }else{
        newPwdConfirm.setCustomValidity('');
    }
}

新的控制

<input>元素的type特性的值,决策了<input>元素显示信息甚么控制。

HTML5中,给<input>提升了很多新的控制,如color、date、email、month、number、range、search、tel、time、url、week这些。

若访问器不适用新的控制,将默认设置以文字框展现(type="text")。

简易详细介绍

  1. <input>元素type特性的值:
  2. color :色调控制。<>
  3. date :时间控制。<>
  4. email :电子器件电子邮件详细地址键入框。<>
  5. month :年月日历控制。<>
  6. number :标值键入框。<>
  7. range :拖动条。<>
  8. search :检索框。<>
  9. tel :电話号码键入框。<>
  10. time :時间控制。<>
  11. url :网站地址键入框。<>
  12. week :周数控机床件。<>

type="color" :色调控制

表明:显示信息1个色调控制,点一下选定必须的色调。

特性:

value {string} :设定或获得色调控制的值,值的文件格式要为:"#rrggbb"。

示例:

 <input type="color" />

 type="date" :时间控制

表明:显示信息1个时间控制,出示年月日的挑选或自主键入。

特性

value {string} :设定或获得时间控制的值,值的文件格式要为:"yyyy-MM-dd"。

示例:

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

 

 type="email" :电子器件电子邮件详细地址键入框

表明:显示信息1个只能键入电子器件电子邮件文件格式的键入框。

特性:

multiple :加上此特性后适用键入好几个电子器件电子邮件详细地址,务必以','逗号分隔。

示例:

<input type="email" multiple />

type="month" :年月控制

表明:出示1个只能挑选年、月的日历控制。

特性:

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

示例:

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

type="number" :标值键入框

表明:只能键入标值有关标识符,尽数字、.(小数点)、-(负号)等。

特性:max表明标值最大值;min表明标值最少值;step表明微调按钮每次颤动的尺寸。

示例:

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

type="range" :拖动条

表明:以拖动条的方式表明标值。

特性:max表明标值最大值;min表明标值最少值。

示例:

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

type="search" :检索框

表明:在Chrome中检索框没內容时就像一般的文字键入框,当有內容时右侧有个'x'标记,用以消除文字內容。

示例

<input type="search" />

 

type="tel" :电話号码键入框

表明:电話号码的文件格式十分多,可包括数据、横线、括号等。访问器并沒有制订电話号码文件格式,只是在挪动端访问器应用时默认设置显示信息数据电脑键盘。

示例:

<input type="tel" />

 type="time" :時间控制

表明:显示信息1个時间控制,出示時间的挑选或自主键入。

特性:

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

示例:

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

 type="url" :网站地址键入框

表明:键入的网站地址要再加协议书前缀;如http://、https:// 等。

示例:

 <input type="url" />

type="week" :周数控机床件

表明:显示信息1个可挑选年数、周数的日历控制。

特性:

value {string} :设定或获得周数控机床件的值,值的文件格式要为:"yyyy-Www"。(文件格式中的W标识符不可以省略,而且ww周数要为2位数)

示例:

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

上一篇:html5 分层显示屏兼容的方式 返回下一篇:没有了