Html 将html表单分成不同的div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5228542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dividing html forms into different divs
提问by Kevin Jung
I just have a question about putting a single form with multiple inputs into different divs.
我只是有一个关于将具有多个输入的单个表单放入不同 div 的问题。
I have 4 main sections that I need to divide into separate divs but they all must get posted to a single php file. The separation is needed as I am trying to set the layout of the page.
我有 4 个主要部分，我需要将它们分成单独的 div，但它们都必须发布到单个 php 文件中。当我尝试设置页面布局时，需要进行分离。
<div id="1">
<form method="post" action="process.php">
URL <input type="text" name="url" size="50"/>
</div>
<div id="2">
<input type="checkbox" name="ck1" value="option1" />
<input type="checkbox" name="ck2" value="option2" />
<input type="checkbox" name="ck3" value="option3" />
</div>
<div id="3">
<input type="checkbox" name="ck4" value="option4" />
<input type="checkbox" name="ck5" value="option5" />
<input type="checkbox" name="ck6" value="option6" />
</div>
<div id="4">
<input type="submit" value="Submit">
</form>
</div>
This does work but does not validate for obvious reason. I tried using the fieldset element but it has that line border around the filesets just dosen't seem to be suitable for my situation. What would be the proper way of formmating this and have it still work?
这确实有效，但由于显而易见的原因无法验证。我尝试使用 fieldset 元素，但它在文件集周围的线条边框似乎不适合我的情况。形成它并使其仍然有效的正确方法是什么？
回答by Jason
What you need to do is use fieldset tag, however, as always this is one option of many.
您需要做的是使用 fieldset 标记，但是，一如既往，这是许多选项之一。
Example: fieldset
示例：字段集
To illustrate this example, see my code/result here: http://jsfiddle.net/grARw/
为了说明这个例子，请在此处查看我的代码/结果：http: //jsfiddle.net/grARw/
Make sure that the form tags are at the top and bottom and not in between div elements.
确保表单标签位于顶部和底部，而不是在 div 元素之间。
Here's the code:
这是代码：
<form method="post" action="process.php">
<fieldset id="f1">
<label>URL</label><input type="text" name="url" size="50"/>
</fieldset>
<fieldset id="f2">
<p><input type="checkbox" name="ck1" value="option1" /> Yes</p>
<p><input type="checkbox" name="ck2" value="option2" /> No</p>
<p><input type="checkbox" name="ck3" value="option3" /> Maybe</p>
</fieldset>
<fieldset id="f3">
<input type="checkbox" name="ck4" value="option4" /> Great
<input type="checkbox" name="ck5" value="option5" /> Average
<input type="checkbox" name="ck6" value="option6" /> Poor
</fieldset >
<fieldset id="f4">
<input type="submit" value="Submit">
</fieldset>
</form>
回答by Chris Sobolewski
The semantic way to do this is with the <fieldset>tag.
这样做的语义方式是使用<fieldset>标签。
http://www.w3schools.com/TAGS/tag_fieldset.asp
http://www.w3schools.com/TAGS/tag_fieldset.asp
Also, this is a big reason your code doesn't validate:
此外，这是您的代码无法验证的一个重要原因：
</form>
</div>
回答by Jumpey
You need to put the <div> tags inside the <form> tag (IDs can't start with numbers, hence the Ds):
您需要将 <div> 标签放在 <form> 标签内（ID 不能以数字开头，因此是 D）：
<form method="post" action="process.php">
<div id="d1">
URL <input type="text" name="url" size="50" />
</div>
<div id="d2">
<input type="checkbox" name="ck1" value="option1" />
<input type="checkbox" name="ck2" value="option2" />
<input type="checkbox" name="ck3" value="option3" />
</div>
<div id="d3">
<input type="checkbox" name="ck4" value="option4" />
<input type="checkbox" name="ck5" value="option5" />
<input type="checkbox" name="ck6" value="option6" />
</div>
<div id="d4">
<input type="submit" value="Submit" />
</div>
</form>
