1

以下のcssを使用してレイアウトされたフォームがあります。ほとんどの場合はうまく機能しますが、<label>タグ付きの入力フィールドが 2 つある場合は常に、2 番目のフィールドをクリックして選択できません。最初の入力欄をクリックすればOKです。2 番目の入力フィールドをクリックすると、自動的にフォーカスが最初のフィールドに戻ります。ただし、2 つの間でタブを使用することはできます。

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>

1 つのラベル内に<select>&がある場合と同じ問題があります。<input>しかし、残りの 20 行ほどは 1 行だけで<input>問題ありません。

4

2 に答える 2

2

要素は、参照する要素と同じ属性を使用してlabel、単一の要素を参照する必要があります。そうしないと、最初の に焦点を当てている例のように、予測どおりに動作しません。これは、例では意味がありません。フォーム要素をグループ化する場合は、 要素を使用する必要があります(CSS でスタイルを設定して のようにすることができます)。inputforvalueidinputlabelinputfieldsetlabel

正しい構文は次のとおりです。

<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

をクリックするとlabel、ほとんどのブラウザーでの動作は、関連する入力にフォーカス (またはチェックボックスの場合はチェック) を与えることです。

input2 番目のタグをタグの外に移動する必要がありますlabel。おそらくそれ自身に。

于 2013-11-25T22:59:27.720 に答える