学科分类
目录
HTML5+CSS3

全新的input属性

在HTML5中,还增加了一些新的input控件属性,用于指定输入类型的行为和限制。例如autofocus、min、max、pattern等,下面将对这些全新的input属性做具体讲解。

1. autofocus属性

在HTML5中,autofocus属性用于指定页面加载后是否自动获取焦点,将标签的属性值指定为true时,表示页面加载完毕后会自动获取该焦点。

2.form属性

在HTML5之前,如果用户要提交一个表单,必须把相关的控件元素都放在表单内部,即<form>和</form>标签之间。在提交表单时,会将页面中不是表单子元素的控件直接忽略掉。

HTML5中的form属性,可以把表单内的子元素写在页面中的任一位置,只需为这个元素指定form属性并设置属性值为该表单的id即可。此外,form属性还允许规定一个表单控件从属于多个表单。

注意:

form属性适用于所有的input输入类型。在使用时,只需引用所属表单的id即可。

3. list属性

在上面的小节中,已经学习了如何通过datalist元素实现数据列表的下拉效果。而list属性用于指定输入框所绑定的datalist元素,其值是某个datalist元素的id。

4.multiple属性

multiple属性指定输入框可以选择多个值,该属性适用于email和file类型的input元素。multiple属性用于email类型的input元素时,表示可以向文本框中输入多个E-mail地址,多个地址之间通过逗号隔开。multiple属性用于file类型的input元素时,表示可以选择多个文件。

5.min、max和step属性

HTML5中的min、max和step属性用于为包含数字或日期的input输入类型规定限值,也就是给这些类型的输入框加一个数值的约束,适用于date pickers、number和range标签。具体属性说明如下:

● max:规定输入框所允许的最大输入值。

● min:规定输入框所允许的最小输入值。

● step:为输入框规定合法的数字间隔,如果不设置,默认值是1。

由于前面介绍input元素的number类型时,已经讲解过min、max和step属性的使用,这里不再举例说明。

6.pattern属性

pattern属性用于验证input类型输入框中,用户输入的内容是否与所定义的正则表达式相匹配(可以简单理解为表单验证)。pattern属性适用于的类型是:text、search、url、tel、email和password的<input/>标签。常用的正则表达式如表1所示。

表1 常用的正则表达式和说明

正则表达式 \说明**
^[0-9]*$ 数字
^\d{n}$ n位的数字
^\d{n,}$ 至少n位的数字
^\d{m,n}$ m-n位的数字
^(0|[1-9][0-9]*)$ 零和非零开头的数字
^([1-9][0-9]*)+(.[0-9]{1,2})?$ 非零开头的最多带两位小数的数字
^(-|+)?\d+(.\d+)?$ 正数、负数、和小数
^\d+$ 或 ^[1-9]\d*|0$ 非负整数
^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$ 非正整数
^[\u4e00-\u9fa5]{0,}$ 汉字
^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$ 英文和数字
^[A-Za-z]+$ 由26个英文字母组成的字符串
^[A-Za-z0-9]+$ 由数字和26个英文字母组成的字符串
^\w+$ 或 ^\w{3,20}$ 由数字、26个英文字母或者下划线组成的字符串
^[\u4E00-\u9FA5A-Za-z0-9_]+$ 中文、英文、数字包括下划线
^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$ Email地址
[a-zA-z]+://[^\s]* 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$ URL地址
^\d{15}|\d{18}$ 身份证号(15位、18位数字)
^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$ 以数字、字母x结尾的短身份证号码
^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线)
^[a-zA-Z]\w{5,17}$ 密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线)

7.placeholder属性

placeholder属性用于为input类型的输入框提供相关提示信息,以描述输入框期待用户输入何种内容。在输入框为空时显式提示信息,而当输入框获得焦点时,提示信息消失。

注意:

placeholder属性适用于type属性值为text、search、url、tel、email以及password的<input/>标签。

8.required属性

required属性用于判断用户是否在表单输入框中输入内容,当表单内容为空时,则不允许用户提交表单。

点击此处
隐藏目录