input整理

时间:2019-05-15
本文章向大家介绍input整理,主要包括input整理使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

在HTML5中,<input>元素增加了许多新的属性、方法及控件。本文章分别对这三方面进行介绍。

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

新增加的属性描述如下:

autocomplete :是否显示与现在输入内容相匹配的历史输入记录。

<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>

placeholder :设置文本控件的预先显示内容

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

required :设置控件是否为必填项

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

<input>元素的type属性的值,决定了<input>元素显示什么控件。

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

若浏览器不支持新的控件,将默认以文本框展示(type="text")。

<input>元素type属性的值:

type="color" :颜色控件

<input type="color" />

type="date" :日期控件

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

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

<input type="email" multiple />

type="month" :年月控件

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

type="number" :数值输入框

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

type="range" :滑动条

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

type="search" :搜索框

<input type="search" />

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

<input type="tel" />

type="time" :时间控件

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

type="url" :网址输入框

<input type="url" />

type="week" :周数控件

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

 

 

$flag 上一页 下一页