如何在表单中使用标签和字段集构造多个输入

Question

什么是构造一个表单元素的“最”有效方式，它包含多个逻辑划分的字段集和多个输入？

经过一些研究，我发现这可能是答案，但我不确定：

<form>
    <fieldset>
        <p>
            <label></label>
            <input>
        </p>
        <p>
            <label></label>
            <input>
        </p>
        <p>
            <label></label>
            <input>
        </p>
    </fieldset>
    <fieldset>
        <p>
            <label></label>
            <input>
        </p>
        <p>
            <label></label>
            <input>
        </p>
        <p>
            <label></label>
            <input>
        </p>
    </fieldset>
</form>

p 标记是在 fieldset 中包装 input 和 label 对的有效方法吗？

Answer 1

p 标签不是划分这些输入的有效方法，有效的方法是使用换行符<br/>。

如果您为这些字段添加图例，则可以更好地构建字段集（当然这值得商榷，因为这主要是个人喜好）。

HTML：

<form>
    <fieldset>
        <legend>Personal details</legend>
            <label>First name:</label><input/><br/>
            <label>Last name:</label><input/><br/>
            <label>Age:</label><input/><br/>
    </fieldset>
    <fieldset>
        <legend>Other details</legend>
            <label>Address:</label><input/><br/>
            <label>E-mail Address:</label><input/><br/>
            <label>Language:</label><input/><br/>
    </fieldset>
</form>

CSS：

legend {
    padding-left:10px;
    padding-right:10px;
}

fieldset {
    position:relative;
    line-height:24px;
}

input {
    position:absolute;
    left:115px;
}

JSFiddle Demo