码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-01-18 19:15:16      阅读:3382      评论:0      收藏:0      [点我收藏+]

标签:

输入框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;

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

width: 200px;

height: 100px;

max-width: 200px;

max-height:100px;

<input type="">标签属性

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

autocompletes:on | off;

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

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

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

属性accept;checked;   

autocomplete;  max, min maxlengthpatternrequired

acceptchecked;这两个属性不是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

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

标签:

原文地址:http://www.cnblogs.com/wjh0916/p/5140070.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!