diff options
Diffstat (limited to 'files/ja/web/html/element/label/index.html')
| -rw-r--r-- | files/ja/web/html/element/label/index.html | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/files/ja/web/html/element/label/index.html b/files/ja/web/html/element/label/index.html new file mode 100644 index 0000000000..61a2b706ba --- /dev/null +++ b/files/ja/web/html/element/label/index.html @@ -0,0 +1,198 @@ +--- +title: <label> +slug: Web/HTML/Element/label +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/label +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><label></code> 要素</strong>は、ユーザーインターフェイスの項目のキャプションを表します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p><code><label></code> を {{htmlelement("input")}} 要素と関連付けると、いくらかの利点が発生します。</p> + +<ul> + <li>ラベルのテキストが、対応するテキスト入力欄に視覚的に関連付けられるだけではありません。プログラム的にも関連付けられます。つまり、例えばユーザーがフォーム入力欄にフォーカスを移動した時、読み上げソフトがラベルを読み上げ、支援技術のユーザーが何のデータを入力するべきか理解しやすくすることができます。</li> + <li>関連付けられたラベルをクリックして、入力欄自体をクリックした場合と同様に、入力欄にフォーカスを与えたりアクティブ化にしたりすることができます。こうしてヒット領域を拡大すると、タッチパネルの端末を使用している場合を含めて、入力欄をアクティブ化させやすくなります。</li> +</ul> + +<p><code><label></code> を <code><input></code> 要素に関連付けるには、 <code><input></code> に <code>id</code> 属性を設定しなければなりません。そして <code><label></code> に <code>for</code> 属性を設定して、値を input の <code>id</code> と同じにします。</p> + +<p>他の方法として、 <code><input></code> を直接 <code><label></code> の内側に入れることができますが、この場合は関連付けが明確なので、 <code>for</code> および <code>id</code> 属性は必要ありません。</p> + +<pre class="brush: html notranslate"><label>Do you like peas? + <input type="checkbox" name="peas"> +</label> +</pre> + +<p id="Usage_notes">その他の使用上の注意事項</p> + +<ul> + <li>label がラベル付けするフォームコントロールは<ruby><em>ラベル付きコントロール</em><rp> (</rp><rt>labeled control</rt><rp>) </rp></ruby>と呼ばれます。一つの入力欄に複数のラベルを関連付けることができます。</li> + <li><code><label></code> がクリックやタップされ、それがフォームのコントロールに関連付けられていた場合は、 <code>click</code> イベントが関連付けられたコントロールにも発生するようになります。</li> +</ul> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd><code><label></code> 要素と同一の文書内にある<a href="/ja/docs/Web/Guide/HTML/Content_categories#Form_labelable">ラベル付け可能</a>フォーム関連要素の {{htmlattrxref("id")}}。文書中の <code>for</code> 属性の値と合致する <code>id</code> を持つ最初の要素がラベル付け可能な要素であれば、このラベル要素の示す<em>ラベル付きコントロール</em>となります。<a href="https://html.spec.whatwg.org/multipage/forms.html#category-label">ラベル付け可能要素</a>でなければ、 <code>for</code> 属性は効果がありません。一致する <code>id</code> 値を持つ他の要素が文書内のその後にあったとしても、考慮されません。 + <div class="note"><strong>注</strong>: <code><label></code> 要素は、 <code>for</code> 属性が指す要素が包含するコントロール要素である場合、 <code>for</code> 属性を持ちつつ、中にコントロール要素を含めることができます。</div> + </dd> +</dl> + +<h2 id="Styling_with_CSS" name="Styling_with_CSS">CSS のスタイル付け</h2> + +<p><code><label></code> には特殊なスタイル上の考慮事項はありません。 — 構造的に単純なインライン要素であり、ほとんどは {{htmlelement("span")}} や {{htmlelement("a")}} 要素と同じ方法でスタイルを適用します。テキストが読みにくくならない限り、あらゆる方法でスタイルを適用することができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_label_example" name="Simple_label_example">シンプルな label の例</h3> + +<pre class="brush: html notranslate"><label>Click me <input type="text"></label></pre> + +<p>{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}</p> + +<h3 id="Using_the_for_attribute" name="Using_the_for_attribute">"for" 属性の使用例</h3> + +<pre class="brush: html notranslate"><label for="username">Click me</label> +<input type="text" id="username"></pre> + +<p>{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<h3 id="Interactive_content" name="Interactive_content">対話型コンテンツ</h3> + +<p><code>label</code> の中に{{HTMLElement("a", "アンカー")}}や{{HTMLElement("button", "ボタン")}}のような対話型要素を配置しないでください。そのようにすると、ユーザーが <code>label</code> に関連したフォーム入力欄を有効化する事が難しくなります。</p> + +<h4 id="Dont" name="Dont">悪い例</h4> + +<pre class="brush: html example-bad notranslate"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + <a href="terms-and-conditions.html">利用規約と利用条件</a>に同意します。 +</label> +</pre> + +<h4 id="Do" name="Do">良い例</h4> + +<pre class="brush: html example-good notranslate"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + 利用規約と利用条件に同意します。 +</label> +<p> + <a href="terms-and-conditions.html">利用規約と利用条件を読む</a> +</p> +</pre> + +<h3 id="Headings" name="Headings">見出し</h3> + +<p>見出しは一般的に<a href="/ja/docs/Web/HTML/Element/Heading_Elements#Navigation">ナビゲーションエイド</a>として使用されるため、 <code><label></code> の中に<a href="/ja/docs/Web/HTML/Element/Heading_Elements">ヘッダー要素</a>を配置すると、数多くの種類の支援技術を妨げることになります。ラベルの文字列を視覚的に調整する必要がある場合は、代わりに <code><label></code> 要素に CSS クラスを適用してください。</p> + +<p><a href="/ja/docs/Web/HTML/Element/form">フォーム</a>、またはフォームのセクションにタイトルが必要な場合は、 {{HTMLElement("fieldset")}} の中に {{HTMLElement("legend")}} を配置して使用してください。</p> + +<h4 id="Dont_2" name="Dont_2">悪い例</h4> + +<pre class="brush: html example-bad notranslate"><label for="your-name"> + <h3>Your name</h3> + <input id="your-name" name="your-name" type="text"> +</label> +</pre> + +<h4 id="Do_2" name="Do_2">良い例</h4> + +<pre class="brush: html example-good notranslate"><label class="large-label" for="your-name"> + Your name + <input id="your-name" name="your-name" type="text"> +</label> </pre> + +<h3 id="Buttons" name="Buttons">ボタン</h3> + +<p>{{HTMLElement("input")}} 要素に <code>type="button"</code> がついた宣言に妥当な <code>value</code> 属性があれば、関連付けるラベルは必要ありません。ラベルを付けると、支援技術がボタン入力をどう解釈するかをじゃまする可能性があります。 {{HTMLElement("button")}} 要素でも同じことが言えます。</p> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form-associated_content">フォーム関連要素</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、ただし、子孫に <code>label</code> 要素を持つことはできない。ラベル付けの対象となるコントロール以外の<a href="/ja/docs/Web/Guide/HTML/Content_categories#Form_labelable">ラベル付け可能</a>要素を入れてはならない。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLLabelElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td><a class="external external-icon" href="https://www.w3.org/TR/REC-html40-971218/interact/forms.html#h-17.9.1" hreflang="en" lang="en" rel="noopener">HTML 4.0 Specification<br> + <small lang="ja"><label> の定義</small></a></td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.label")}}</p> |