示例：fieldset

Question

我有一个问题，就是将一个包含多个输入的表单放入不同的div中。

我有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>

这确实有效，但由于显而易见的原因无法验证。我尝试使用fieldset元素，但它有文件集周围的行边界似乎不适合我的情况。什么是形成这种形式的正确方法，并使其仍然有效？

Answer 1

您需要做的是使用fieldset标记，但是，这是许多人的一个选项。

示例：fieldset

要说明此示例，请在此处查看我的代码/结果： http://jsfiddle.net/grARw/

确保表单标记位于顶部和底部，而不是div元素之间。

以下是代码：

<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>

Answer 2

执行此操作的语义方式是使用<fieldset>标记。

http://www.w3schools.com/TAGS/tag_fieldset.asp

此外，这是您的代码无法验证的一个重要原因：

</form>
</div>

Answer 3

你需要把＆lt; div＆gt; ＆lt; form＆gt;内的标签标签（ID不能以数字开头，因此是Ds）：

<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>

将html表单划分为不同的div

3 个答案:

示例：fieldset