web-dev-qa-db-ja.com

チェックボックスとラジオラベルをクリック可能にする

多数の（私が最も言うことを敢えて？）サイトは、チェックボックスとラジオ入力のためにラベルをクリック可能にしません。ほんの少しの努力で、使いやすさが大幅に向上するようです。 <label>の使用に関して、開発者がこのタグを使用するのを思いとどまらせるような互換性/機能/ユーザビリティの問題はありますか？

編集： StackOverflowでさえ、これについて有罪のようです。たとえば、質問をするとき、新しい回答を毎日通知するチェックボックスラベルクリックできません。

htmlusabilitycross-browser
34
RedFilter

怠惰以外の理由はありません。 <label>sはアクセシビリティに不可欠であり、マウスクリックの目的が不十分な私たちにとっても非常に便利です:)

31
Ray

いいえ、問題はありませんが、残念ながら、これは 最も無視されるhtmlタグ の1つです。同意しました。このタグはアクセシビリティの理由から非常に重要です。さらに、モバイルなどの小型デバイスのレイアウトに関しては、これなしでは生きていけません。

7
Sarfraz

私が考えることができる唯一の難しさは、フォームコントロールにID属性が必要であり、ID属性がページ内で一意である必要があることです。

プログラムでフォームフィールドを生成する場合は、表示される各ページ内でフォームフィールドごとに一意のIDを生成する必要があります。これはおそらく問題になる可能性があります。

しかし、一般的には、そうです、プログラマーが頭の中にそれを持っていないというだけだと思います。

ASP.NET WebForms（またはそれが呼ばれるもの）では、<asp:Label>要素にAssociatedControlID属性が必要です。

3
Paul D. Waite

そして、これが デモンストレーション それを行う方法を探している人のためのものです。

フォーム要素の近くのテキストを要素自体に接続する方法があるため、どちらかをクリックしてコントロールをアクティブにすることができます。

飲み物は何にしますか？

<label for="ice1"><input type="checkbox" name="withice" id="ice1">ice</label> 
<label for="ice2"><input type="checkbox" name="withlid" id="ice2">plastic lid</label>
<label for="ice3"><input type="checkbox" name="withstraw" id="ice3">straw</label>
3
Isurus

<label>は純粋なHTMLタグであり、JavaScriptは必要ありません。実装が非常に簡単なので、すべての（主要な）ブラウザーがこのタグをサポートしていると思います。

多くの開発者はそれを使用していません：理由：

  • それはより多くの努力を必要とします（どこにでもすべてのタグを追加する）
  • 彼らはそれの存在について知りません
  • 彼らはそれが便利だとは思わないのですか？！

ただし、タグを使用しない理由はありません。あなたが非常にあなたの帯域幅に制限されていない限り、多分？

1
Veger