forms - 将html表单分成不同的div

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 标记，但是，一如既往，这只是众多选项中的一个。

示例:字段集

为了说明此示例，请在此处查看我的代码/结果: 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>