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"/>
type="output" 定义一个计算结果
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>
type="reset" 定义重置按钮。重置按钮会清除表单中的所有数据
<form action="#" method="get"> <input> <input type="reset" value="Reset" /> <input type="submit" value="Submit" /> </form>
type="datalist" 指定一个预先定义输入控件选项列表
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>