1

我有一个使用下面的 css 布局的表格。大多数情况下它运作良好，但每当有两个带有<label>标签的输入字段时，我无法单击以选择第二个字段。如果单击第一个输入字段就可以了。如果您单击第二个输入字段，它会自动将焦点跳回第一个。但是，您可以成功地在两者之间切换。

div.largeblock{
    margin:5px 0px 20px 0px;
    background:#d7e5f2;
    border:1px solid #d7e5f2;
}
div.largeblock label{
    display:block;
    margin-bottom:5px;
}
div.largeblock label span{
    display:block;
    float:left;
    margin-right:6px;
    width:130px;
    text-align:right;
}

<label>
   <span>Postcode</span>
   <input type="text" maxlength="4" name="postcode1" required="required" placeholder="Post" />
   <input type="text" maxlength="3" name="postcode2" required="required" placeholder="Code"/>
</label>

我有一个<select>与<input>1 标签内的 & 相同的问题。但对于其他 20 条左右只有 1 条<input>的线，这很好。

4

2 回答 2

2

一个label元素应该引用单个input元素，使用的for属性应该与它所引用的元素具有value相同的属性。否则，它的行为将无法预测，就像在您的示例中关注 first一样，这在您的示例中没有任何意义。如果要对表单元素进行分组，则应使用该元素（可以使用 css 设置样式，使其看起来像 a ）。idinputlabelinputfieldsetlabel

正确的语法是：

<label for="postcode1">Postcode 1</label>
<input type="text" id="postcode1" maxlength="4" name="postcode1" required="required" placeholder="Post" />
<label for ="postcode2">Postcode 2</label>
<input type="text" id="postcode2" maxlength="3" name="postcode2" required="required" placeholder="Code"/>

或者，如果您想使用fieldset：

<fieldset>
    <legend>Postcode</legend>
    <input type="text" maxlength="4" name="postcode1" required="required" placeholder="Post" />
    <input type="text" maxlength="3" name="postcode2" required="required" placeholder="Code"/>
</fieldset>
于 2013-11-25T23:10:36.803 回答
2

当您单击 alabel时，大多数浏览器中的行为是将焦点（或在复选框的情况下选中）给相关输入。

您需要将第二个input标签移出label标签。可能是自己的。

于 2013-11-25T22:59:27.720 回答