HTML5表单属性

1.autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

 <form action="demo.asp" method="GET" autocomplete="on">
        自动完成输入:<input type="text"><br />
        自动完成输入:<input type="text" autocomplete="off"><br />
        <input type="submit" />
    </form>

email默认启用自动完成功能

2.autofocus 属性

autofocus 属性规定在页面加载时,域自动地获得焦点。

姓名:<input type="text" name="username" autofocus="autofocus" />

3.form 属性

适用于所有 <input> 标签的类型

<form action="" method="GET" id="form1">
        姓名:<input type="text" name="username" autofocus="autofocus"/>
        <input type="submit" />
    </form>
    年龄:<input type="text" form="form1" />

form="form1"指明第二个输入框也属于表单form1,尽管它在表单外。

4.表单重写属性(form override attributes)

允许您重写 form 元素的某些属性设定。

<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />

5.height 和 width 属性

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。

6.list属性

datalist 是输入域的选项列表

<form action="" method="GET" id="form1">
        姓名:<input type="text" name="username" autofocus="autofocus" list="name_list"/>
        <datalist id="name_list">
            <option label="user1" value="user1"></option>
            <option label="user2" value="user2"></option>
            <option label="user3" value="user3"></option>
        </datalist>
        <input type="submit" />
    </form>

7.min、max 和 step 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)

8.multiple 属性

multiple 属性规定输入域中可选择多个值。

multiple 属性适用于以下类型的 <input> 标签:email 和 file

 

Select images: <input type="file" name="img" multiple="multiple" />

 

 

 9.novalidate 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

novalidate="novalidate"

10.pattern 属性

pattern 属性规定用于验证 input 域的模式(pattern)。

模式(pattern) 是正则表达式,例如下面的正则表达式:只能包含三个字母的文本域(不含数字及特殊字符),若不符合,提交时会进行验证

<input type="text" name="country_code" pattern="[A-z]{3}" />

11.placeholder 属性

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

 

 

    年龄:<input type="text" form="form1" placeholder="请输入年龄" />

12.required 属性

required 属性规定必须在提交之前填写输入域(不能为空)

 

posted @ 2020-08-19 09:48  DurianTRY  阅读(241)  评论(0编辑  收藏  举报