小习html5为表单添加的新属性

输入框html5新增属性

在学习任何一种语言时都提到“渐进增强”原则，说白了就是兼容性有木有。虽然html5一些新属性在实际使用中受到限制，但是依然阻挡不了伟大的同伴们学习的脚步。近来有点儿忙，这是2016年第一篇文章。内容比较简单只是了解学习。

输入框按输入的内容分，也就是单行输入和多行输入，既是<input type="">和<textarea></textarea>

<textarea></textarea>标签属性

autofocus，页面加载文本区域自动获得焦点。这个属性同样适用于<input type="">中的单行输入，当然一个页面中多个输入框只能设置一个。

用法：<textarea autofocus></textarea>

兼容：IE10以下的浏览器是不只支持滴。

placeholder，为文本域将要输入的内容做简短的提示。这个属性着实不错，不过IE10以下的浏览器是不只支持滴。

maxlength，限制文本区域可输入最大的字符串数。在这个属性出现之前限制其输入是使用js实现的，js实现就不必要考虑浏览器的兼容性。在后面会附上jQuery实现输入限制、提示的实现方法。IE10以下的浏览器是不只支持滴。

required，规定在提交表单前文本区域是必填的。这个属性省去表单的在提交前表单的验证，但是提示不能输入的样式受到限制。

兼容：不支持IE浏览器哦！

form，说明输入域可以用于多个form表单。

wrap，说明输入域的文本是否换行。

以上是html新属性，后两个自认为不常用，前几个在网站开发中也得斟酌使用，但是在手机页面开发中可以大胆的使用。

textarea标签固定大小和禁止拖拉动

在大部分浏览器中指定行(rows)和列(cols)属性，就可以规定textarea的尺寸和大小。还有一种办法是使用csss设置width和height，Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。过分拖动会改变页面的美观。

彻底禁用拖动

resize:none;

只是固定大小，右下角的图标仍在

200px;

height: 100px;

max- 200px;

max-height:100px;

<input type="">标签属性

以上textarea标签的html5属性input标签都有，除此之外还有一些新属性。

autocompletes:on | off;

<input type="">标签里添加的新属性

自有了html5和css3简直就是前端的大爱，以前很多需要js一堆代码实现的功能现在只需添加一个属性的OK。

我就列几个input标签常用的新添加的属性。

属性accept；checked;   

autocomplete;  max, min； maxlength；pattern；required；

accept；checked;这两个属性不是html5新属性但是也很实用哦。

accetp属性只适用于type="file"类型的input标签

例如：

<form action="demo_form.asp">

  <input type="file" name="pic" accept="image/*">

  <input type="submit">

</form>

<form>

  <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

</form>

checked属性与 <input type="checkbox"> 或 <input type="radio"> 配合使用；我想说的是在jQuery或是js中这个属性非常实用。

autocomplete: on|off

autocomplete属性html5的新属性，特别的高大上的一个属性。能够记住你在浏览器中曾经输入的字符断，对于邮箱输入等体验非常好. <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

max, min这两个属性配合实用，限制输入值得范围

适用<input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。也就是说它们的值是数字或是日期。

input max="number|date"

用法基本如下

<input type="number" name="points" min="0" max="10" />

 

pattern属性属性规定用于验证输入字段的模式，其属性值也就是正则表达式。

<input type="password" name="country_code" placeholder="请输入密码" pattern="[A-z,0-9]{6}" title="输入6位数字或是字符" />

 

required属性规定输入字段的值是必需的。和<textarea>标签的用法相同。

http://blog.csdn.net/csethcrm/article/details/9231425