html5系列：form 2.0 新结构

以往的一个form表单，结构比较死板，所有的form元素都必须处在

<form>

和

</form>

之间才有效，这会造成一些麻烦，比如说：像bootstrap这种使用

<div>

来控制布局的框架，

<form>

放在哪都很尴尬；另外，目前的

web 2.0

，UI比较丰富，为了布局或其它的原因，表单元素之间可能充斥着大量非表单相关的元素，而

form 1.0

又规定表单元素必须在闭合的

<form>

标签以内，那

<form>

跟

</form>

就相隔得非常远了，也是相当别扭的。

而

form 2.0

并不要求form元素处在

<form>

和

</form>

之间，只需要为其指定属于哪个表单（甚至是“哪几个表单”）即可，由此便衍生出以下的写法：

<form id="test-form" method="post" action="save.php"></form>
First name:
<input type="text" name="firstname" form="test-form" />
<br />
Last name:
<input type="text" name="lastname" form="test-form" />

另外，每个form元素可以隶属于多个form表单，换句话说，多个form表单可以共享同一个form元素。用

form

属性指定多个form表单时用空格分隔，如下所示：

<form id="test-form1" method="post" action="save.php"></form>
<form id="test-form2" method="post" action="save.php"></form>
<input type="text" name="firstname" form="test-form1 test-form2" />

form override attributes（表单重写属性）

网上的资料都把这一部分放到

form 2.0 attribute

来写，但我认为

form override attributes

对

form 2.0

的结构是有非常重大的影响的，因此放到这一块来叙述。

表单重写属性有：

formaction - 重写表单的 action 属性

formenctype - 重写表单的 enctype 属性

formmethod - 重写表单的 method 属性

formnovalidate - 重写表单的 novalidate 属性

formtarget - 重写表单的 target 属性

以一个例子来进行说明：

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" /> //普通的提交按钮
<br />
<!--用这个按钮来提交的时候，由于`formaction`重写了表单的`action`属性，因此该表单将会被提交到`demo_admin.asp`而非`demo_form.asp`-->
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<!--用这个按钮来提交的时候，由于`formnovalidate`重写了表单的`novalidate`属性，因此该表单在提交时将不会进行验证-->
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

由此，可以利用

form override attributes

，设置多个提交按钮来控制以不同的方式提交表单。