在 HTML5 以前,所有的表单中的元素都必须在
<form> 和 </form> 中间。
不过现在 HTML5 有一种新的做法,请看下面的代码:
<form id="contact_form" method="get">
<label>Name:</label>
<input type="text" id="name" name="name">
<label>Email:</label>
<input type="email" id="email" name="email">
<input type="submit" id="submit" value="SEND">
</form>
<textarea id="comments" form="contact_form"></textarea>
<label>Name:</label>
<input type="text" id="name" name="name">
<label>Email:</label>
<input type="email" id="email" name="email">
<input type="submit" id="submit" value="SEND">
</form>
<textarea id="comments" form="contact_form"></textarea>
这段代码有两个特殊之处:
textarea 标签在 form 的外面。
textarea 使用了一个 form 的属性(来确定与表单之间的绑定关系)。
这里有个 Demo 页面,你可以看看你的浏览器是否支持。目前仅有以下浏览器支持这种写法:
- Opera 9.5+ (完全支持)
- Safari 5.1+ (不确定支持的级别)
- Firefox 4+ (部分支持)
- Chrome 10+ (部分支持)
- IE (完全不支持)
这是实际的测试结果。