input整理

最新推荐文章于 2024-05-13 10:45:54 发布

weixin_33801856

最新推荐文章于 2024-05-13 10:45:54 发布

阅读量88

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qinlinkun/p/10872091.html

本文详细介绍了HTML5中<input>元素的新属性和控件类型，包括autocomplete、autofocus、required等属性，以及color、date、email、number等控件，展示了如何使用这些新特性提升网页表单的功能性和用户体验。

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

转载于:https://www.cnblogs.com/qinlinkun/p/10872091.html