表示されているページは、編集用 バージョンの MDN Web Docsです

MDN Web Docs のユーザーとして表示: https://developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls

その他のフォームコントロール

ドロップダウンリストや複数行のテキストフィールドから、<output>要素(前の記事で見ました)やプログレスバーといったその他の役立つ機能まで、非-<input> 型のフォーム要素の機能を詳しく見ていきます。

前提条件: 基本的なコンピューターリテラシーと、HTML の基本的な理解。
目的: 非-<input> 型のフォーム機能と、HTML を用いた実装方法の理解。

複数行のテキストフィールド

複数行のテキストフィールドは、<input>要素ではなく<textarea> 要素で指定されます。

<textarea cols="30" rows="8"></textarea>

これは次のように描画されます:

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

<textarea> は閉じタグを取ることができて、既定のテキストは開始タグと終了タグの間にあるべきです。これに対し、<input> は閉じタグのない空要素です — value 属性の中に既定の値が入ります。

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

視覚的には、入力テキストは改行されて、既定ではフォームコントロールはリサイズ可能です。モダンブラウザーにはテキストエリアのサイズを増減できるドラッグハンドルがあります。

下記のスクリーンショットは macOS での Firefox 71 と Safari 13 、Windows10 での Edge 18, Yandex 14, Firefox 71, Chrome 79 における既定の、フォーカスされた、無効な<textarea> 要素を表示しています。

The default, focused, and disabled <textarea> element in Firefox 71 and Safari 13 on Mac OSX and Edge 18, Yandex 14, Firefox and Chrome on Windows 10.

: 多少は面白いテキストエリアの使用例は、このシリーズの最初の記事の が見つかります (ソースコードも見てください)。

複数行レンダリングの制御

<textarea> では、複数行にまたがってレンダリングするのを制御する 3 つの属性を受け付けます:

cols
テキストコントロールの (カラム) 幅を、平均的なキャラクター幅で指定します。これは <textarea>をリサイズすることで変更でき、また CSS で上書きもできるため、有効な開始時の幅です。何も指定されていない場合、デフォルト値は 20 です。
rows
コントロールの行数を指定します。これは <textarea>をリサイズすることで変更でき、また CSS で上書きもできるため、有効な開始時の高さです。何も指定されていない場合、デフォルト値は 2 です。
wrap
コントロールがどのようにテキストを改行するかを制御します。値は soft (デフォルト値)、この値では送信されるテキストは改行されないが、ブラウザーでレンダリングされるテキストは改行される、hard (この値を使うには cols 属性を指定する必要がある)、この値では送信テキストとレンダリングされるテキストの両方が改行される、off、この値では改行が停止、を取ります。

テキストエリアのリサイズの制御

<textarea> をリサイズできるかは CSSの resize プロパティで制御されます。とりうる値は次の通り:

  • both: デフォルト値 — 水平、垂直ともリサイズ許可
  • horizontal: 水平のみリサイズ許可
  • vertical: 垂直のみリサイズ許可
  • none: リサイズ許可しない
  • blockinline: blockinline 方向のみにリサイズできる実験的な値 (これはテキストの方向性によって変わります。詳しくは Handling different text directions を見てください)

これがどのように動作するのかのデモは、resize リファレンスページの最初にあるインタラクティブな例で遊んでみてください。

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

: すべてのドロップダウンボックスの例は、GitHub の drop-down-content.html にあります (ライブでもご覧ください)。

選択ボックス

単純なセレクトボックスは、1つ以上の <option> 要素を子要素として持つ <select>要素で作成され、それぞれが可能な値のうちの1つを指定します。

<select id="simple" name="simple">
  <option>Banana</option>
  <option selected>Cherry</option>
  <option>Lemon</option>
</select>

必要に応じて、希望する <option>要素のselected属性を用いて、セレクトボックスのデフォルト値を設定することができます。
- このオプションは、ページが読み込まれたときにあらかじめ選択されています。

<option>要素は、<optgroup>要素の中に入れ子にすることができ、視覚的に関連付けられた値のグループを作成することができます。

<select id="groups" name="groups">
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
  </optgroup>
</select>

<optgroup>要素では、label属性の値が入れ子になったオプションの値の前に表示されます。ブラウザは通常、それらをオプションから視覚的に離して(すなわち太字にしたり、入れ子レベルを変えたりして)表示しますので、実際のオプションと混同される可能性は低くなります。

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

例えば、:

<select id="simple" name="simple">
  <option value="banana">Big, beautiful yellow banana</option>
  <option value="cherry">Succulent, juicy cherry</option>
  <option value="lemon">Sharp, powerful lemon</option>
</select>

デフォルトでは、選択ボックスの高さは、単一の値を表示するのに十分です。オプションの size 属性は、セレクトにフォーカスがない場合に表示されるオプションの数を制御します。

複数選択の選択ボックス

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

<select id="multi" name="multi" multiple size="2">
  <optgroup label="fruits">
     <option>Banana</option>
     <option selected>Cherry</option>
     <option>Lemon</option>
   </optgroup>
   <optgroup label="vegetables">
     <option>Carrot</option>
     <option>Eggplant</option>
     <option>Potato</option>
   </optgroup>
</select>

: 複数選択可能なセレクトボックスの場合、セレクトボックスはドロップダウンコンテンツとして値を表示しないことに気づくでしょう - 代わりに、すべての値がリストに一度に表示され、オプションの size属性はウィジェットの高さを決定します。

注: <select>要素をサポートするすべてのブラウザは、multiple属性もサポートしています。

入力補完のボックス

You can provide suggested, automatically-completed values for form widgets using the <datalist> element with child <option> elements to specify the values to display. The <datalist> needs to be given an id.

The data list is then bound to an <input> element (e.g. a text or email input type) using the list attribute, the value of which is the id of the data list to bind.

Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.

Let's look at an example.

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
<datalist id="mySuggestion">
  <option>Apple</option>
  <option>Banana</option>
  <option>Blackberry</option>
  <option>Blueberry</option>
  <option>Lemon</option>
  <option>Lychee</option>
  <option>Peach</option>
  <option>Pear</option>
</datalist>

Datalist support and fallbacks

Almost all browsers support datalist, but if you are still supporting older browsers such as IE versions below 10, there is a trick to provide a fallback:

<label for="myFruit">What is your favorite fruit? (With fallback)</label>
<input type="text" id="myFruit" name="fruit" list="fruitList">
    
<datalist id="fruitList">
  <label for="suggestion">or pick a fruit</label>
  <select id="suggestion" name="altFruit">
    <option>Apple</option>
    <option>Banana</option>
    <option>Blackberry</option>
    <option>Blueberry</option>
    <option>Lemon</option>
    <option>Lychee</option>
    <option>Peach</option>
    <option>Pear</option>
  </select>
</datalist>

Browsers that support the <datalist> element will ignore all the elements that are not <option> elements, with the datalist working as expected. Old browsers that don't support the <datalist> element will display the label and the select box.

The following screenshot shows the datalist fallback as rendered in Safari 6:

Screenshot of the datalist element fallback with Safari on Mac OS

If you use this fallback, ensure the data for both the <input> and the <select> are collected server-side.

Less obvious datalist uses

According to the HTML specification, the list attribute and the <datalist> element can be used with any kind of widget requiring a user input. This leads to some uses of it that might seem a little non-obvious.

例えば、in browsers that support <datalist> on range input types, a small tick mark will be displayed above the range for each datalist <option> value. You can see an implementation example of this on the <input type="range"> reference page.

And browsers that support <datalist>s and <input type="color"> should display a customized palette of colors as the default, while still making the full color palette available.

In this case, different browsers behave differently from case to case, so consider such uses as progressive enhancement, and ensure they degrade gracefully.

その他のフォーム機能

There are a few other form features that are not as obvious as the ones we have already mentioned, but still useful in some situations, so we thought it would be worth giving them a brief mention.

: You can find the examples from this section on GitHub as other-examples.html (see it live also).

メーターとプログレスバー

Meters and progress bars are visual representations of numeric values.

Progress

A progress bar represents a value that changes over time up to a maximum value specified by the max attribute. Such a bar is created using a <progress> element.

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

This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.

The content inside the <progress> element is a fallback for browsers that don't support the element and for screen readers to vocalize it.

Meter

A meter bar represents a fixed value in a range delimited by max and min values. This value is visually rendered as a bar, and to know how this bar looks, we compare the value to some other set values:

  • The low and high values divide the range in three parts:
    • The lower part of the range is between the min and low values, inclusive.
    • The medium part of the range is between the low and high values, exclusive.
    • The higher part of the range is between the high and max values, inclusive.
  • The optimum value defines the optimum value for the <meter> element. In conjuction with the low and high value, it defines which part of the range is prefered:
    • If the optimum value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part, and the higher range is considered to be the worst part.
    • If the optimum value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part, and the higher range is considered to be average as well.
    • If the optimum value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part.

All browsers that implement the <meter> element use those values to change the color of the meter bar:

  • If the current value is in the prefered part of the range, the bar is green.
  • If the current value is in the average part of the range, the bar is yellow.
  • If the current value is in the worst part of the range, the bar is red.

Such a bar is created using a <meter> element. This is for implementing any kind of meter, 例えば、a bar showing total space used on a disk, which turns red when it starts to get full.

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

The content inside the <meter> element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.

Support for <progress> and <meter> is fairly good — there is no support in Internet Explorer, but other browsers support it well.

スキルをテストしよう!

この記事の終わりまで到達しましたが、最も重要な情報を覚えていますか?次に移る前に、この情報を保持しているか検証するテストがあります — Test your skills: Other controls を見てください。

まとめ

最も後のいくつかの記事で見てきたように、利用できるフォーム要素にはいろいろな種類がたくさんあります。一見してすべてを詳しく覚えておく必要はなく、詳細について調べたいだけ、記事に戻ることができます。

いろいろなフォームコントロールの背後にある HTML をざっと理解したので、それらのスタイル設定について見ていきましょう。

このモジュール

上級トピック

ドキュメントのタグと貢献者

このページの貢献者: cmplstofB, mfuji09, shuheiy2000, Uemmra3
最終更新者: cmplstofB,