你可以在多个<div>中分割出一个逻辑<form>吗?

Tim*_*ith 17 html html5

在我现有的网页布局中,涉及多个文件,一个指定高级布局,有两个元素,一个用于左列,另一个用于右列.

我希望有一个逻辑<form>(只有一个动作),其中<input>元素分布在左列和右列.这样做的唯一方法是将元素作为<div>s的父级(并重构我的布局代码),或者是否可以<form [something]>在两个div中执行某些操作,以便在一个表单中单击提交提交两个表单中的所有输入?

Joh*_*nde 8

提交两个表单的唯一方法是将两个<div>s 包装在一个<form>标记中.或者,您可以使用jQuery/JavaScript聚合数据并将它们作为一个提交一起提交.


joe*_*ncy 8

我想人们都错过了这个问题.A <form>可以包含它需要的任何元素.如果您的页面布局如下:

<body>
    <div id="leftColumn"><input name="foo" type="text"></div>
    <div id="rightColumn"><input name="bar" type="text"></div>
<body>
Run Code Online (Sandbox Code Playgroud)

你不需要单独foobar形式.您可以愉快地将这两个内容包含<div>在单个<form>元素中:

<body>
    <form name="onlyOneForm">
        <div id="leftColumn"><input name="foo" type="text"></div>
        <div id="rightColumn"><input name="bar" type="text"></div>
    </form>
<body>
Run Code Online (Sandbox Code Playgroud)


Tim*_*ith 6

(抱歉没有接受答案并发布我自己的答案,但我发现显然我得到的答案与HTML5不是最新的!)

HTML5 form=<input>元素[1] 引入了一个属性.这样你就可以做<input form="form1" name="input1" /> and have it in a nested inner form, or even outside of the`元素.

[1] http://www.w3.org/TR/html5/association-of-controls-and-forms.html#attr-fae-form

  • 从w3schools获取您的信息时要非常小心.这[经常是错误的](http://w3fools.com).在这种情况下,请注意它说"要引用多个表单,请使用以空格分隔的表单ID列表".这是错误的 - 没有为表单属性提供空格分隔列表. (8认同)