HTML5 input属性

最新推荐文章于 2024-10-11 20:36:36 发布

性格如此bzzb

最新推荐文章于 2024-10-11 20:36:36 发布

阅读量3.2k

点赞数

文章标签： web前端

本文链接：https://blog.csdn.net/bzzb_/article/details/89161663

版权

1.value 属性

value 属性规定输入字段的初始值

2.readonly属性

readonly属性规定输入字段为只读

3.disabled属性

disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

disabled 属性不需要值。它等同于 disabled=“disabled”。

4.size 属性

size 属性规定输入字段的尺寸（以字符计）

5.maxlength 属性

maxlength 属性规定输入字段允许的最大长度

如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。

该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。

**注释：**输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。

以下为HTML5新增属性

6.autocomplete属性

多数浏览器都带有辅助用户完成输入的自动完成功能,只要开启了该功能,用户下次输入相同的内容时,浏览器就会自动完成内容的输入.

HTML5新增的autocomplete属性可以帮助用户在input类型的输入框中实现自动完成内容输入,这些input类型包括:text search URL telephone email password datepickers range以及color.不过,在某些浏览器中,可能需要首先启用浏览器本身的自动完成功能,才能使autocomplete属性起作用

autocomplete属性同样适用于标签,默认状态下表单的autocomplete属性是处于打开状态的,其中的输入类型继承所在表单的autocomplete状态.用户也可以单独将表单中某一输入类型的autocomplete状态设置为打开状态,这样可以更好的实现自动完成.

autocomplete属性有2个值:on off

<input type="email" name="email" autocomplete="off">

7.autofocus属性

autofocus属性可以实现在页面加载时,某表单空间自动获得焦点,这些控件可以是文本框复选框单选按钮普通按钮等所有标签的类型

注意:在同一页面中只能指定一个autofocus属性,所以必须谨慎使用,在当前页面中的表单控件比较多时,建议挑选最需要聚焦的那个控件来使用这一属性,例如一个搜索页面中的搜索文本框,或者一个同意某些许可的"同意"按钮.

8.form属性

form属性可以把表单内的从元素卸载页面中的任意位置,然后只需要为这个元素指定一下form属性并为其指定属性值为该表单的id.如此一来,便规定了该表单元素属于指定的这一表单,此外,form属性也允许规定一个表单元素从属于多个表单.form属性适用于所有的input输入类型,在使用时,必须引用所属表单的id

如果一个form属性要引用两个或两个以上表单,则需要使用空格将表单的id分开.

<input type="text" name="address1" form="form1 form2 form3">

9. 表单重写属性

HTML5新增了多个表单重写属性,用于重写form元素的某些属性设定,

formaction:用于重写表单的action属性
formenctype:重写enctype属性
formmethod:重写method属性
formnovalidate:重写novalidate属性
formtarget:重写target属性
#注意:表单重写属性并不适用于所有的input输入类型,仅适用于submit和image输入类型

10.height和width属性

height和width属性用于设置image类型的input标签的图像高度和宽度,这两个属性只适用于image类型的标签.

11.list属性

HTML5新增了一个datalist元素,可以实现数据列表的下拉效果,其外观类似autocomplete,用户可以从列表中选择,也可以输入.而list属性用于指定输入框绑定哪一个datalist元素,其值是某个datalist的id.

list属性适用于以下input输入类型:
text search url telephone email date pickers number range和color

12.min max step属性

HTML5新增min max和step属性,用于为包含数字或日期的input输入类型设置限值,也就是给这些类型的输入框加一个数值的约束,适用于date pickers,number和range标签.

max:设置输入框所允许的最大值
min:设置输入框所允许的最小值
step:为输入框设置合法的数字间隔,或称步长.

13.multiple属性

在HTML5之前,input输入类型中的file类型只支持选择单个文件来上传,而新增的multiple属性支持一次性选择多个文件,并且该属性同样支持新增的email类型.这一特性无疑为开发者提供了极大的方便,因为有了HTML5不必再单独开发选择并提交多个文件的控件.

14.pattern属性

pattern属性用于验证input类型输入框中用户输入的内容是否与自定义的正则表达式相匹配,该属性适用于以下类型的input标签:text search URL telephone email password

在一些用于处理字符串的程序或网页代码中,经常会用到一些用于查找或输入符合某些复杂规则的字符串的代码,而正则表达式正式用于描述一系列符合某个句法规则的代码.一个正则表达式通常被称为一个模式.

pattern属性允许用户自定义一个正则表达式,而用户的输入必须符合正则表达式所指定的规则.pattern属性中的正则表达式与发育JavaScript中的正则表达式语法相匹配.

15.placeholder属性

placeholder属性用于为input类型的输入框提供一种提示(hint),这些提示可以描述输入框期待用户输入何种内容,在输入框为空时显示出现,而当输入框获得焦点时则会消失.placeholder属性适用于以下类型的input标签:text search URL telephone email password