form属性

html4中，表单内的从属元素必须写在表单form内部，而HTML5中，可以把他们写在页面上的任何地方，然后给该元素指定一个form属性，属性值为该表单form的 ID，这样就可以声明该元素从属指定表单了。

1
2
3
4
5
6
7
8
9
10
11
12
html4中
<form id="textform">
    <input type="text">
    <textarea>请输入内容</textarea>
</form>
html5中，
<form id="textform">
    <input type="text">
</form>
这里有无数行代码...
<textarea form="textform">请输入内容</textarea>
但是并不建议这样做，因为会增加后期的代码维护成本。

formaction属性

在HTML4中，一个表单的所有元素只能通过表单的action属性被统一提交到另一个页面，而在HTML5中，可以为所有的提交按钮增加不同的formaction属性，使得点击不同按钮时可以把表单提交到不同的页面。

1
2
3
4
5
6
7
8
<form action="#">   		// HTML4中只能在这写提交地址

	<input type="text" placeholder="请输入内容">
	
	<input type="submit" formaction="#1">
	<input type="submit" formaction="#2">
	<input type="submit" formaction="#3">
</form>

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。意思是：验证表单，输入不能为空。
注释：required 属性适用于以下类型的input标签：text, search, url, tel, email, password, date pickers, number, checkbox, radio 以及 file。
实例

1
name: <input type="text" required="required" />

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。模式（pattern） 是正则表达式。
意思是：pattern属性用于input表单验证，pattern属性的值是正则表达式。
注释：pattern 属性适用于以下类型的input标签：text, search, url, tel, email 以及 password。
实例：下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

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

oninvalid属性

oninvalid虽然说他是一个属性，其实他是一个事件。他的值是js代码。
oninvalid=” this.setCustomValidity(‘你要设置显示的内容’)”，那么当表单验证不通过时，提示的内容就是 你要设置显示的内容。

draggable 属性设置元素为可拖动

draggable 属性规定元素是否可拖动。
为了使元素可拖动，把 draggable 属性设置为 true ：

1
2
<div draggable="true" />
<p draggable="true">This is a draggable paragraph.</p>

× 请我吃糖~
打赏二维码