Skip to content

Commit

Permalink
2024/03/22 時点の英語版に基づき更新 (#21302)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfuji09
mfuji09 authored Jun 8, 2024
1 parent 61ab1f9 commit e36e679
Showing 1 changed file with 40 additions and 36 deletions.
76 changes: 40 additions & 36 deletions files/ja/learn/forms/other_form_controls/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
title: その他のフォームコントロール
slug: Learn/Forms/Other_form_controls
l10n:
sourceCommit: 89175e6714699477a461efef4d3eddd9213cba86
sourceCommit: 0798c75c919a1a87b73bf5be46e2eb35c8ebb910
---

{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/HTML5_input_types","Learn/Forms/Styling_web_forms", "Learn/Forms")}}

ここでは、 `<input>` 以外のフォーム要素の機能を、ドロップダウンリストや複数行のテキストフィールドなどの他の操作型から、 {{htmlelement('output')}} 要素（前回の記事で実際に使用しました）やプログレスバーなどの他の便利なフォーム機能まで、詳しく見ていきましょう。
ここでは、`<input>` 以外のフォーム要素の機能を、ドロップダウンリストや複数行のテキストフィールドなどの他の操作型から、 {{htmlelement('output')}} 要素（前回の記事で実際に使用しました）やプログレスバーなどの他の便利なフォーム機能まで、詳しく見ていきましょう。

<table>
<tbody>
<tr>
<th scope="row">前提条件:</th>
<td>
基本的なコンピューターリテラシーと、基本的な
基本的な
<a href="/ja/docs/Learn/HTML/Introduction_to_HTML"
>HTML の理解</a
>。
Expand All @@ -41,9 +41,9 @@ l10n:

{{EmbedLiveSample("Multi-line_text_fields", 120, 160)}}

`<textarea>` と通常の単一行のテキストフィールドとの主な違いは、ユーザーが送信データの中に改行を (リターンを押すことで) 入れることができることです。
`<textarea>` と通常の単一行のテキストフィールドとの主な違いは、ユーザーが送信データの中に改行を（リターンキーを押すことで）入れることができることです。

`<textarea>` は閉じタグを取ることができ、既定のテキストを開始タグと終了タグの間に置いてください。これに対し、 {{HTMLElement("input")}} は閉じタグのない空要素です。 [`value`](/ja/docs/Web/HTML/Element/input#値) 属性の中に既定の値が入ります。
`<textarea>` は閉じタグを取ることができ、既定のテキストを開始タグと終了タグの間に置いてください。これに対し、 {{HTMLElement("input")}} は閉じタグのない{{glossary("void element", "空要素")}}です。 [`value`](/ja/docs/Web/HTML/Element/input#値) 属性の中に既定の値が入ります。

注意として、`<textarea>` 要素（その他の HTML 要素、CSS、JavaScript を含む）には何でも入れられるものの、この性質により、プレーンテキストコンテンツのように描画されます（フォームコントロール以外で [`contenteditable`](/ja/docs/Web/HTML/Global_attributes/contenteditable) を使うと、プレーンテキストの代わりに HTML/「リッチ」コンテンツの API を使用できます）。

Expand Down Expand Up @@ -80,7 +80,7 @@ l10n:

## ドロップダウンコントロール

ドロップダウンコントロールは、ユーザーインターフェイスのスペースをあまり取らずに、ユーザーがさまざまなオプションから選択できるようにするためのシンプルな方法です。HTML には、**選択ボックス**と**自動補完ボックス**という 2 つの形式のドロップダウンコンテンツがあります。どちらの場合も相互作用は同じです。コントロールを有効にすると、ブラウザーにはユーザーが選択できる値のリストが表示されます。
ドロップダウンコントロールは、ユーザーがさまざまな選択肢から選択できるようにすることを、ユーザーインターフェイスのスペースをあまり取らずに実現するシンプルな方法です。HTML には、**選択ボックス**と**自動補完ボックス**という 2 種類のドロップダウンコントロールがあります。どちらの場合も相互作用は同じです。コントロールを有効にすると、ブラウザーにはユーザーが選択できる値のリストが表示されます。

> **メモ:** すべてのドロップダウンボックスの例は、GitHub の [drop-down-content.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/drop-down-content.html)にあります ([ライブでもご覧ください](https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html))。
Expand All @@ -101,7 +101,7 @@ l10n:
{{EmbedLiveSample("Basic_example", 120, 120)}}

必要に応じて、希望する {{HTMLElement("option")}} 要素の [`selected`](/ja/docs/Web/HTML/Element/option#selected) 属性を用いて、選択ボックスの既定値を設定することができます。
このオプションは、ページが読み込まれたときにあらかじめ選択されています。
この選択肢は、ページが読み込まれたときにあらかじめ選択されています。

#### optgroup の使用

Expand All @@ -124,11 +124,11 @@ l10n:

{{EmbedLiveSample("Using_optgroup", 120, 120)}}

{{HTMLElement("optgroup")}} 要素では、 [`label`](/ja/docs/Web/HTML/Element/optgroup#attr-label) 属性の値が入れ子になったオプションの値の前に表示されます。ブラウザーは通常、それらをオプションから視覚的に離して（すなわち太字にしたり、入れ子レベルを変えたりして）表示しますので、実際のオプションと混同される可能性は低くなります。
{{HTMLElement("optgroup")}} 要素では、 [`label`](/ja/docs/Web/HTML/Element/optgroup#label) 属性の値が入れ子になった選択肢の値の前に表示されます。ブラウザーは通常、それらを選択肢から視覚的に離して（すなわち太字にしたり、入れ子レベルを変えたりして）表示しますので、実際の選択肢と混同される可能性は低くなります。

#### value 属性の使用

{{HTMLElement("option")}} 要素に明示的な value 属性が設定されている場合、そのオプションが選択された状態でフォームが送信された時にその値が送信されます。上の例のように value 属性を省略した場合は、 {{HTMLElement("option")}} 要素の内容が値として使われます。そのため、 value 属性は必要ありませんが、選択ボックスに視覚的に表示されている値とは異なる値を短くしたり、サーバーに送信したい理由があるかもしれません。
{{HTMLElement("option")}} 要素に明示的な value 属性が設定されている場合、その選択肢が選択された状態でフォームが送信された時にその値が送信されます。上の例のように value 属性を省略した場合は、 {{HTMLElement("option")}} 要素の内容が値として使われます。そのため、 value 属性は必要ありませんが、選択ボックスに視覚的に表示されている値とは異なる値を短くしたり、サーバーに送信したい理由があるかもしれません。

例えば、

Expand All @@ -140,11 +140,11 @@ l10n:
</select>
```

既定では、選択ボックスの高さは、単一の値を表示するのに十分です。オプションの [`size`](/ja/docs/Web/HTML/Attributes/size) 属性は、選択ボックスにフォーカスがない場合に表示されるオプションの数を制御します。
既定では、選択ボックスの高さは、単一の値を表示するのに十分です。選択肢の [`size`](/ja/docs/Web/HTML/Attributes/size) 属性は、選択ボックスにフォーカスがない場合に表示される選択肢の数を制御します。

### 複数選択の選択ボックス

既定では、選択ボックスは、ユーザーに単一の値を選択させるだけです。 {{HTMLElement("select")}} 要素に [`multiple`](/ja/docs/Web/HTML/Element/select#multiple) 属性を追加することで、オペレーティングシステムが提供するデフォルトのメカニズム（例えば、 <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> を押しながらデスクトップ上で複数の値をクリックするなど）を使用して、ユーザーが複数の値を選択できるようにすることができます。
既定では、選択ボックスは、ユーザーに単一の値を選択させるだけです。 {{HTMLElement("select")}} 要素に [`multiple`](/ja/docs/Web/HTML/Element/select#multiple) 属性を追加することで、オペレーティングシステムが提供する既定のメカニズム（例えば、デスクトップでは、 <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> を押しながら複数の値をクリックするなど）を使用して、ユーザーが複数の値を選択できるようにすることができます。

```html
<select id="multi" name="multi" multiple size="2">
Expand All @@ -163,17 +163,17 @@ l10n:

{{EmbedLiveSample("Multiple_choice_select_box", 120, 120)}}

> **メモ:** 複数選択可能な選択ボックスの場合、選択ボックスはドロップダウンコンテンツとして値を表示しないことに気づくでしょう - 代わりに、すべての値がリストに一度に表示され、オプションの [`size`](/ja/docs/Web/HTML/Attributes/size)属性はウィジェットの高さを決定します。
> **メモ:** 複数選択可能な選択ボックスの場合、選択ボックスはドロップダウンコンテンツとして値を表示しないことに気づくでしょう - 代わりに、すべての値がリストに一度に表示され、選択肢の [`size`](/ja/docs/Web/HTML/Attributes/size)属性はウィジェットの高さを決定します。
> **メモ:** {{HTMLElement("select")}} 要素に対応しているすべてのブラウザーは、 [`multiple`](/ja/docs/Web/HTML/Element/select#multiple)/select#multiple)/select#multiple) 属性にも対応しています。
> **メモ:** {{HTMLElement("select")}} 要素に対応しているすべてのブラウザーは、 [`multiple`](/ja/docs/Web/HTML/Element/select#multiple) 属性にも対応しています。
### 自動補完のボックス

表示する値を指定する {{HTMLElement("option")}} 子要素つきの {{HTMLElement("datalist")}} 要素を使って、フォームウィジェット用の自動補完の提案値を提供できます。 `<datalist>` には `id`が必要です。
フォームウィジェット用の自動補完の提案値は、{{HTMLElement("datalist")}} 要素と {{HTMLElement("option")}} 子要素を用いて提供することができます。この `<datalist>` には `id`が必要です。

データリストは、 {{htmlelement("input")}} 要素（つまり`text` や `email` の入力型）の [`list`](/ja/docs/Web/HTML/Element/input#list) 属性の値をデータリストの `id` の値を指定することで結びつけます。

データリストがフォームウィジェットに関連づけられると、オプションはユーザーが入力する自動補完テキストに使われます。典型的には、これはユーザーが入力に打ち込んだものに一致するドロップダウンボックスで表示されます。
データリストがフォームウィジェットに関連づけられると、選択肢はユーザーが入力する自動補完テキストに使われます。典型的には、これはユーザーが入力に打ち込んだものに一致するドロップダウンボックスで表示されます。

#### 基本的な例

Expand Down Expand Up @@ -233,7 +233,7 @@ l10n:

[HTML 仕様書](https://html.spec.whatwg.org/multipage/input.html#attr-input-list)によると、 [`list`](/ja/docs/Web/HTML/Element/input#list) 属性と {{HTMLElement("datalist")}} 要素はユーザーの入力を必要とするあらゆる種類のウィジェットに使用することができます。このため、少し目立たないと思われるような使用法もあります。

例えば、 `range` 入力型で `{{htmlelement("datalist")}}` に対応しているブラウザーでは、 datalist の `{{htmlelement("option")}}` 値の範囲ごとに小さなチェックマークが範囲の上に表示されます。 [`<input type="range">` のリファレンスページでこの例](/ja/docs/Web/HTML/Element/input/range#a_range_control_with_hash_marks)を見ることができます。
例えば、 `range` 入力型で `{{htmlelement("datalist")}}` に対応しているブラウザーでは、 datalist の `{{htmlelement("option")}}` 値の範囲ごとに小さなチェックマークが範囲の上に表示されます。 [`<input type="range">` のリファレンスページの例](/ja/docs/Web/HTML/Element/input/range#目盛の追加)で見ることができます。

また、 {{htmlelement('datalist')}} と [`<input type="color">`](/ja/docs/Web/HTML/Element/input/color) に対応しているブラウザーは、フルカラーパレットを利用できるようにしつつ、カスタマイズしたパレットを既定で表示することができます。

Expand All @@ -247,21 +247,7 @@ l10n:
### メーターとプログレスバー

メーターやプログレスバーは、数値を視覚的に表現するものです。

#### progress

プログレスバーは、 [`max`](/ja/docs/Web/HTML/Element/progress#max) 属性を用いて指定した最大値まで時間と共に変化する値を表します。このようなバーは、 {{ HTMLElement("progress")}} 要素を使用して作成されます。

```html
<progress max="100" value="75">75/100</progress>
```

{{EmbedLiveSample("Progress", 120, 120)}}

これは、ダウンロードされたファイルの総数の割合や、アンケートで記入された質問の数など、進捗状況の報告が必要なものを実装するためにあります。

{{HTMLElement("progress")}} 要素の内側の内容は、この要素に対応していないブラウザーや、スクリーンリーダーが発声するための代替となります。
メーターとプログレスバーは数値の視覚表現です。{{HTMLElement("progress")}} と {{HTMLElement("meter")}} の対応はすべての現行ブラウザーで利用できます。

#### meter

Expand All @@ -288,18 +274,30 @@ l10n:
このようなバーは {{HTMLElement("meter")}} 要素を使用して作成されます。これは、例えば、ディスク上で使用されている総容量を示すバーで、それがいっぱいになりそうなときには赤色に変わるような、あらゆる種類のメーターを実装するためのものです。

```html
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
<meter min="0" max="100" value="75" low="33" high="66" optimum="0">75</meter>
```

{{EmbedLiveSample("Meter", 120, 120)}}

{{HTMLElement("meter")}} 要素の中の内容は、その要素に対応していないブラウザーと支援技術が発声するための代替です。
{{HTMLElement("meter")}} 要素内のコンテンツは、その要素に対応していないブラウザーと支援技術が発声するための代替です。

HTMLElement("progress")}} と {{HTMLElement("meter")}} の対応はかなり良好です - Internet Explorer は対応していませんが、他のブラウザーは十分に対応しています。
#### progress

## スキルをテストしよう!
プログレスバーは、 [`max`](/ja/docs/Web/HTML/Element/progress#max) 属性を用いて指定した最大値まで時間と共に変化する値を表します。このようなバーは、 {{ HTMLElement("progress")}} 要素を使用して作成されます。

この記事の終わりまで到達しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — [Test your skills: Other controls](/ja/docs/Learn/Forms/Test_your_skills:_Other_controls) を見てください。
```html
<progress max="100" value="75">75/100</progress>
```

{{EmbedLiveSample("Progress", 120, 120)}}

これは、ダウンロードされたファイルの総数の割合や、アンケートで記入された質問の数など、進捗状況の報告が必要なものを実装するためにあります。

{{HTMLElement("progress")}} 要素内のコンテンツは、この要素に対応していないブラウザーや、スクリーンリーダーが発声するための代替となります。

## スキルテスト

この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: その他のコントロール](/ja/docs/Learn/Forms/Test_your_skills:_Other_controls) を見てください。

## まとめ

Expand All @@ -308,3 +306,9 @@ HTMLElement("progress")}} と {{HTMLElement("meter")}} の対応はかなり良
いろいろなフォームコントロールの背後にある HTML をざっと理解したので、[それらのスタイル設定](/ja/docs/Learn/Forms/Styling_web_forms)について見ていきましょう。

{{PreviousMenuNext("Learn/Forms/HTML5_input_types","Learn/Forms/Styling_web_forms", "Learn/Forms")}}

### 高度なトピック

- [カスタムフォームコントロールの作成方法](/ja/docs/Learn/Forms/How_to_build_custom_form_controls)
- [JavaScript によるフォームの送信](/ja/docs/Learn/Forms/Sending_forms_through_JavaScript)
- [フォームウィジェット向けのプロパティの互換性一覧表](/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls)

0 comments on commit e36e679

Please sign in to comment.