1

通常、フォームのスタイルを次の形式で設定します

<label for="CompanyNameTextBox">
    <span>Company</span>
    <input name="CompanyNameTextBox" type="text" id="CompanyNameTextBox" />
</label>

このようにして、次のように CSS のスタイルを設定できます。

.input[type=text] span
{
    display: inline-block;
    width: 200px;
}

フォーム要素の左側にラベルを配置して、並べて配置します。これは、追加する必要があるすべての要素で機能します。

今、私はフィールドを持っています：クレジットカードの有効期限。

これは特別です。1 つのラベルに 2 つの選択リストがあります。

<label>
    <span>Expiry Date</span>
    <select name="ExpiryDateMonthDropDownList" id="ExpiryDateMonthDropDownList">
        ...
    </select>
    <select name="ExpiryDateYearDropDownList" id="ExpiryDateYearDropDownList">
        ...
    </select>
</label>

後者 (年) を選択しようとするとfor、ラベルに属性を指定していないにもかかわらず、デフォルトで最初 (月) が選択されます。

それで問題は、私に何ができるかということです。フォームが間違っている場合 (実際には を のinput中に入れるべきではありません)、または 2 番目を自分の の中にlabel貼り付けるなどのばかげた回避策を実行する必要がある場合は、解決できません。selectlabel

4

4 に答える 4

2

HTML5 の仕様 " w3.org: 4.10.6 The label 要素" は次のように述べています。

for 属性が指定されていないが、label 要素に labelable 要素の子孫がある場合、ツリー オーダーで最初の子孫が label 要素のラベル付きコントロールになります。

HTML 4 の場合 " w3.org: 17.9.1 LABEL 要素はさらに厳密です。

このlabel要素は、コントロールに情報を添付するために使用できます。各label要素は、正確に 1 つのフォーム コントロールに関連付けられています。

したがって、同じ視覚的出力を得るには、両方をコンテナーにラップする必要がある場合があります。

<div class="multiple_inputs">
    <label>
        <span>Expiry Date</span>
        <select name="ExpiryDateMonthDropDownList"></select>
    </label>
    <select name="ExpiryDateYearDropDownList"></select>
</div>

もちろん<label>、2 番目のフィールドに別のフィールドを追加することもできます。

于 2013-07-17T08:45:26.097 に答える
1

既に述べたように、input タグを label タグ内に配置する必要がありますか? これは w3 によれば完全に有効ですが、WCAG と一部のブラウザー実装で問題が発生する可能性があります。

この場合、1 つのラベル内に 2 つの入力要素がありますが、これは適切ではありません。入力要素ごとに 1 つのラベルが必要だからです。したがって、私の提案は、別のラベルを追加して、それぞれの中に 1 つの要素を配置することです。

于 2013-07-17T08:45:17.530 に答える