Question

什么是＆＃34;最＆＃34; 构造表单元素的有效方法，其中包含多个具有多个输入的逻辑划分的字段集？

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

<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代码是否有效将input和label对包装在fieldset内？

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

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

1 个答案: