HTMLのタグのfor属性の詳細分析

この記事では、HTML の タグの詳細な分析を紹介します。必要な方は参考にしていただければ幸いです。

freecodecamp の HTML チュートリアルの ラジオ ボタンのセットの作成 セクションで、次の段落を目にしました。Create a Set of Radio Buttons这一节中，看到这样一段话，

It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element.

大概的意思是：最好的做法，是给label标签，添加for属性，其值与input标签的id

label 要素に値を指定して for 属性を設定することがベスト プラクティスと考えられますこれは、input 要素の id 属性の値と一致します。これにより、支援技術がラベルと子 input 要素の間にリンクされた関係を作成できるようになります。

おそらく、ベスト プラクティスは、 label を指定することです。タグに for 属性を追加します。その値は、input タグの id 属性の値と同じです。そのため、label とinput それらの間の関連付けを作成します。

同時に、以下のようなサンプルコードを示します。

<!-- Code 1 -->
<label> 
  <input>Indoor 
</label>

このコードでは、labelのfor属性の値はinputのid属性の値と同じです。このコードからは、接続がどこにあるのかは明らかではありません。

ラベルの for 属性の定義は次のとおりです:

for 属性は、ラベルがバインドされるフォーム要素を指定します。

翻訳: for 属性は、ラベルがフォーム内のどの要素にバインドされるかを指定します。 サンプルコード:

<!-- Code 2 -->

     Male   
     Female   
     Other   
  

1. 2つのコードを比較すると、

2. labelとinput labelの間の包含関係が異なることがわかります。コード 1 のラベルと入力は包含関係に属しますが、コード 2 のラベルと入力は比較的独立しています。

3. ラベルと入力はページ上で異なる配置になっています。 Chrome の開発者ツールを使用すると、コード 1 の実行結果では、ラベル label が入力ラベルを覆い、コード 2 の実行結果では、ラベル label が入力ラベルと並置されていることを見つけるのは難しくありません。

ラベルは入力に1対1で対応します。ラベルの内容をクリックすると、対応するシングルエンド ボタンが選択されます。

2 つのコードの label の for 属性を削除すると、前のポイント 1 と 2 は変更されず、変更されたのはポイント 3 になります。コード 1 の操作結果については、ラベルの内容をクリックすることでラジオ ボタンを選択できます。コード 2 は異なります。ラベルの内容をクリックしてもラジオ ボタンを選択できません。

コードの実行結果を簡単に比較すると、記事の冒頭で引用した段落が正しいことを確認できます。 for 属性をラベルに追加すると、コードの品質が向上します。

おすすめの関連記事:

HTML でのタグのネストの問題を解決する方法

親要素 タグのデフォルトの動作とクリック イベント間の相互作用

🎜🎜🎜

以上がHTMLのタグのfor属性の詳細分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。