使用表单外的元素
在HTML4中,input
、button
和其他与表单相关的元素必须放在form元素中。而在HTML5中,这条限制不复存在。现在可以将这类元素与文档中的任何地方的表单挂钩。input
、button
以及一些其他与表单相关的元素都定义了一个form
属性,该属性正是用于这个目的。要将这类元素与并非其祖先元素的form
元素挂钩,只需将其form
属性设置为相关form
元素的id属性值即可。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用表单外的元素</title>
</head>
<body>
<form id="voteform" method="post" action="http://www.baidu.com">
<p>
<label for="fave">Fruit: <input autofocus id="fave" name="fave"></label>
</p>
</form>
<p>
<label for="name">Name: <input form="voteform" id="name" name="name"> </label>
</p>
<button form="voteform" type="submit">Submit Vote</button>
<button form="voteform" type="reset">Reset</button>
</body>
</html>
此例中只有一个input
元素是那个form
元素的后代元素。另一个input
元素和两个button
元素都位于form
元素之外,但是它们都通过设置form
属性与那个form
元素关联在了一起。
HTML5的这一新功能目前非常受欢迎。