この翻訳は不完全です。英語から この記事を翻訳 してください。

ここでは色々なウィジェットを詳しく見ていきます。色々なデータ型を集めるのにどんなオプションが使うるのかを見ていきます。このガイドはいくらか疲れるもので、利用できるネイティブフォームウィジェットをすべて網羅しています。

前提条件: 基本的なコンピューターリテラシーと、基本的な HTML の理解
目的:

ブラウザーがデータを集めるためのどんなネイティブフォームウィジェットの種類があるのかを理解し、それを理解HTML でどう実装かるかを理解する。

ここではブラウザーに組み込まれたフォームウィジェットに焦点を当てますが、HTML フォームはとても制限されていてブラウザーごとに実装がまったく異なるため、ウェブ開発者はときどき自身のフォームウィジェットを作ります — これについてのアイデアは後のモジュールの カスタムフォームウィジェットを作る方法を見ます。

: この記事で扱う機能の大半は、ブラウザーを横断して広くサポートされています。つまりその例外を述べます。正確な詳細は、HTML フォーム要素リファレンスを調べて、特に克明な <input> types リファレンスを見てください。

共通属性

要素の多くはフォームウィジェットが自身の属性を持つことを定義するのに使われます。しかし、すべてのフォーム要素に共通の属性でこうしたウィジェットを制御するものがあります。下記に共通属性のリストがあります:

属性名 既定値 説明
autofocus (false) ページが読み込まれたときに(例えば別のコントロールに入力することで、ユーザーが上書きしていなければ)、要素が自動的に入力フォーカスされるべきかを指定する真偽値。フォームに関連した 1 つの要素だけがこの属性を指定できます。
disabled (false) This Boolean attribute indicates that the user cannot interact with the element. If this attribute is not specified, the element inherits its setting from the containing element, $1例えば、<fieldset>; if there is no containing element with the disabled attribute set, then the element is enabled.
form   The form element that the widget is associated with. The value of the attribute must be the id attribute of a <form> element in the same document. In theory, it lets you set a form widget outside of a <form> element. In practice, however, there is no browser which supports that feature.
name   The name of the element; this is submitted with the form data.
value   The element's initial value.

テキスト入力フィールド

テキスト 入力 フィールドは、もっとも基本的なウィジェットです。これらはユーザーが何らかのデータを入力できるようにするために、とても便利な方法です。一方で、特定の目的のために特化できるテキストフィールドもあります。

: HTML フォームのテキストフィールドは単純なプレーンテキスト入力のコントロールであることは注目に値します。これは、テキストフィールドでは リッチエディット (太字、斜体 など) ができないということです。実在するリッチテキストエディタは、すべてカスタムウィジェットです。

すべてのテキストフィールドに共通する動作があります:

  • readonly (ユーザーは入力値を変更できません) や disabled (入力値はフォームの他のデータとともに送られません) にすることが可能です。
  • placeholder を持つことができます。これは、テキスト入力ボックスの目的を簡単に説明するため、ボックス内に表示されるテキストです。
  • size (ボックスの物理的なサイズ) や length (ボックスに入力できる最大文字数) による制限が可能です。
  • ブラウザーがサポートしていれば、スペルチェックの恩恵を受けられます。

: The <input> element is special because it can be almost anything. By simply setting its type attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like <textarea> for multi-line inputs. Take careful note of these as you read the article.

 

単一行のテキストフィールド

単一行のテキストフィールドは、type 属性を text に設定した <input> 要素で作成します (また、type 属性を指定しない場合は text がデフォルト値になります)。属性値 text は、type 属性にブラウザーが未知の値を設定した場合にフォールバックする値でもあります。(例えば、if you specify type="date" and the browser doesn't support native date pickers).

: You can find examples of all the single line text field types on GitHub at single-line-text-fields.html (see it live also).

Here is a basic single line text field example:

<input type="text" id="comment" name="comment" value="I'm a text field">

単一行のテキストフィールドは、ひとつだけ厳密な制約があります: 改行を含むテキストを入力した場合、ブラウザーはデータを送信する前に改行を取り除きます。

Screenshots of single line text fields on several platforms.

HTML5 では type 属性に専用の値を追加することで、基本的な単一行のテキストフィールドを拡張しています。これらの値もやはり <input> 要素を単一行のテキストフィールドにしますが、フィールドに対して追加の制約や機能を付加します。

電子メールアドレスフィールド

このタイプのフィールドは、type 属性の値 email で設定します:

<input type="email" id="email" name="email" multiple>

これは、フィールドに以下の特別な検証制約を加えます: ユーザーは正当なメールアドレスを入力しなければなりません。他の内容ではフィールドでエラーが発生します。

これはクライアント側のエラー検証で、ブラウザーによって実行されるのに注意してください:An invalid email input showing the message Please enter an email address.multiple 属性を使用すると、(カンマで区切って)ユーザーに対して複数の電子メールアドレスの入力を可能にします。

On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.

: You can find out more about form validation in the article Form data validation.

パスワードフィールド

このタイプのフィールドは、type 属性の値 password を使用して設定できます:

<input type="password" id="pwd" name="pwd">

入力したテキストに対する特別な制約は付加しませんが、フィールドの値を隠します(例、ドットやアスタリスク)ので読むことができません。

これはユーザーインターフェイスの機能でしかないことに注意してください。テキストは JavaScript を使用してあなた自身でエンコードしなければ、平文で送信されてしまい、セキュリティには良くありません — 悪い組織がデータを遮ってパスワードや、クレジットカードデータや、送信したあらゆるものを盗むことがあります。ユーザーからこれを保護するためにはフォームを含むあらゆるページをセキュア通信でホストし (つまり https:// ... アドレスにて) 、データ送信前に暗号化することです。

Modern browsers recognize the security implications of sending form data over an insecure connection, and have implemented warnings to deter users from using insecure forms. For more information on what Firefox implements, see Insecure passwords.

検索フィールド

このタイプのフィールドは、type 属性の値 search を使用して設定できます:

<input type="search" id="search" name="search">

テキストフィールドと検索フィールドの大きな違いは、ひとつはルックアンドフィールです (検索フィールドは角を丸くレンダリングされたり、入力済みの値を消すのに押す "x" があることがよくあります)。その一方で、検索フィールドには付加機能もあります: フィールドの値は、同じサイトの複数のページにまたがってオートコンプリートで使用するため自動的に保存されることがあります。

Screenshots of search fields on several platforms.

電話番号フィールド

このタイプのフィールドは、type 属性の値 tel を使用して設定できます:

<input type="tel">

世界にある電話番号の形式は多岐にわたるため、このタイプのフィールドではユーザーが入力した値に制約は課されません(文字が入ることなどもあります)。これは主に意味の違いですが一部のデバイス (特にモバイル) では、電話番号の入力に適した別の仮想キーパッドが表示されるかもしれません。

URL フィールド

このタイプのフィールドは、type 属性の値 url を使用して設定できます:

<input type="url" id="url" name="url">

これはフィールドに、正当な URL のみを入力させるという特別な検証制約を加えます。正しい URL ではない値を入力すると、フォームはエラー状態になると考えられます。

注記: URL が正当であるとしても、必ずしも URL が実在する場所を参照しているとは限りません。

: 特別な制約を持つフィールドでエラー状態にあるものがあると、フォームの送信が妨げられます。加えて、エラーを明らかにするためにスタイルを設定できます。これについては、以下の記事で詳しく説明します: データフォームの検証

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

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

<textarea cols="20" rows="10"></textarea>

textarea と通常の単一行のテキストフィールドとの大きな違いは、ユーザーが強制改行を含むテキストを入力できる (すなわち、キャリッジリターン [CR] およびラインフィード [LF] が許容される) ことです。

 

Screenshots of multi-lines text fields on several platforms.

: 複数行のテキストの例は GitHub の multi-line-text-field.html で見ることができます(ライブ版も見てください)。これを見てみると、大半のブラウザーで、ユーザーがテキストエリアを右下のドラッグハンドルでリサイズできます。また CSS でテキストエリアの resize プロパティを none にすることより、リサイズ機能をオフにできます。

<textarea> also accepts a few extra attributes to control its rendering across several lines (in addition to several others):

Attributes for the <textarea> element
Attribute name Default value 説明
cols 20 The visible width of the text control, in average character widths.
rows   The number of visible text lines for the control.
wrap soft Indicates how the control wraps text. Possible values are: hard or soft

Note that the <textarea> element is written a bit differently from the <input> element. The <input> element is an empty element, which means that it cannot contain any child elements. On the other hand, the <textarea> element is a regular element that can contain text content children.

There are two key related points to note here:

  • If you want to define a default value for an <input> element, you have to use the value attribute; for a <textarea> element on the other hand you put the default text between the starting tag and the closing tag of the <textarea>.
  • Because of its nature, the <textarea> element only accepts text content; this means that any HTML content put inside a <textarea> is rendered as if it was plain text content.

ドロップダウンウィジェットは、ユーザーに多くの選択肢からひとつを選択させるためのシンプルな手段です。HTML にはドロップダウンコンテンツが 2 種類あります: セレクトボックスと、オートコンプリートコンテンツです。どちらの場合も、やりとりは同じです。コントロールがアクティブになると、ブラウザーはユーザーが選択できる値のリストを表示します。この値のリストは、ページコンテンツの最前面に表示されます。

Note: You can find examples of all the drop-down box types on GitHub at drop-down-content.html (see it live also).

セレクトボックス

セレクトボックスは 1 つ以上の <option> 要素を子として持つ <select> 要素で作成して、各々の <option> 要素が選択できる値のひとつひとつを指定します。

<select id="simple" name="simple">
  <option>Banana</option>
  <option>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>Potatoe</option>
  </optgroup>
</select>

Screenshots of single line select box on several platforms.

If an <option> element is set with a value attribute, that attribute's value is sent when the form is submitted. If the value attribute is omitted, the content of the <option> element is used as the select box's value.

On the <optgroup> element, the label attribute is displayed before the values, but even if it looks somewhat like an option, it is not selectable.

複数選択型セレクトボックス

デフォルトで、ユーザーはセレクトボックスで値を 1 つだけ選択できます。<select> 要素に multiple 属性を付加すると、ユーザーは複数の値を選択可能になります。その方法は OS から提供されるデフォルトのメカニズムです (例 Cmd/Ctrl を押したままにして複数の値をクリック)。

ただしこの場合、セレクトボックスは値をドロップダウンコンテンツとして表示しません。代わりに、通常のリストボックスとして表示します。

<select multiple>
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>

Screenshots of multi-lines select box on several platforms.

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

オートコンプリートコンテンツ

表示する値を指定するための <option> 要素を子として持つ <datalist> 要素を用いて、フォームウィジェット向けに提案するオートコンプリート値を提供できます。

これを設定すると list 属性を用いて、データリストがテキストフィールド(通常は <input> 要素)に紐付けられます。

フォームウィジェットとデータリストが結びつくと、ユーザーが入力したテキストのオートコンプリートにデータリストの選択肢が使用されます。一般的に、これは候補を一覧化したドロップダウンとして提示されます。

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" 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>
注記: HTML 仕様書によると、list 属性と <datalist> 要素はユーザーの入力を必要とする任意のウィジェットで使用できます。ところがテキスト以外 (例えば色や日付など) のコントロールではどのように動作すべきかがはっきりしておらず、またブラウザーや状況の違いにより動作が異なります。このため、テキストフィールドではないウィジェットでこの機能を使用する際は注意してください。
Screenshots of datalist on several platforms.

Datalist support and fallbacks

The  <datalist> element is a very recent addition to HTML forms, so browser support is a bit more limited than what we saw earlier. Most notably, it isn't supported in IE versions below 10, and Safari still doesn't support it at the time of writing.

To handle this, here is a little trick to provide a nice fallback for those browsers:

<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 and will work as expected. On the other hand, browsers that do not support the <datalist> element will display the label and the select box. Of course, there are other ways to handle the lack of support for the <datalist> element, but this is the simplest (others tend to require JavaScript).

Safari 6 Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18 Screenshot of the datalist element with Firefox on Mac OS

チェック可能アイテム

チェック可能アイテムは、クリックすることで状態を変更できるウィジェットです。チェック可能アイテムは 2 種類あります: チェックボックスとラジオボタンです。どちらもデフォルトでチェックするかを示すために、checked 属性を使用します。

これらのウィジェットは、他のフォームウィジェットと同じようには動作しない点が特筆されます。ほとんどのフォームウィジェットではフォームを送信すると、name 属性を持つすべてのウィジェットは値がなくても送信します。チェック可能アイテムでは、それらがチェックされている場合にのみ値を送信します。チェックされていない場合は、name も何も送信しません。

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

For maximum usability/accessibility, you are advised to surround each list of related items in a <fieldset>, with a <legend> providing an overall description of the list.  Each individual pair of <label>/<input> elements should be contained in its own list item (or similar). This is shown in the examples. 

You also need to provide values for these kinds of inputs inside the value attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of on.

チェックボックス

チェックボックスは、type 属性を checkbox に設定した <input> 要素で作成します。

<input type="checkbox" checked id="carrots" name="carrots" value="carrots">

上記の HTML で作成したチェックボックスは、デフォルトでチェックされています。

Screenshots of check boxes on several platforms.

ラジオボタン

ラジオボタンは、type 属性を radio に設定した <input> 要素で作成します。

<input type="radio" checked id="soup" name="meal">

いくつかのラジオボタンをまとめることができます。name 属性で同じ値を共有すると、それらのラジオボタンは同じボタングループに属するとみなされます。グループ内でボタンは同時に 1 つだけチェックできます。つまり、あるラジオボタンをチェックすると、他のラジオボタンは自動的にチェックが外れます。フォームを送信するときは、チェックしているラジオボタンのみの値を送信します。何もチェックしていない場合はラジオボタンの集まり全体が未知の状態であるとみなし、フォーム送信時は値を送信しません。

<fieldset>
  <legend>What is your favorite meal?</legend>
  <ul>
    <li>
      <label for="soup">Soup</label>
      <input type="radio" checked id="soup" name="meal" value="soup">
    </li>
    <li>
      <label for="curry">Curry</label>
      <input type="radio" id="curry" name="meal" value="curry">
    </li>
    <li>
      <label for="pizza">Pizza</label>
      <input type="radio" id="pizza" name="meal" value="pizza">
    </li>
  </ul>
</fieldset>

Screenshots of radio buttons on several platforms.

ボタン

HTML フォームには、3 種類のボタンがあります:

送信 (Submit)
フォームのデータをサーバーに送信します。
リセット (Reset)
すべてのフォームウィジェットをデフォルト値にリセットします。
無名 (Anonymous)
自動的な効果はないボタンですが、JavaScript を使用してカスタマイズできます。

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

ボタンは <button> 要素か <input> 要素で作成します。どの種類のボタンを表示するかを指定するのは、type 属性の値です:

送信

<button type="submit">
    This a <br><strong>submit button</strong>
</button>

<input type="submit" value="This is a submit button">

リセット

<button type="reset">
    This a <br><strong>reset button</strong>
</button>

<input type="reset" value="This is a reset button">

無名

<button type="button">
    This an <br><strong>anonymous button</strong>
</button>

<input type="button" value="This is an anonymous button">

ボタンは <button> 要素でも <input> 要素でも、常に同じ動作になります。ただし、小さな違いがいくつかあります:

  • 上記のサンプルでわかるように、<button> 要素はラベルとして HTML コンテンツを使用できて、これは開始と終了の<button>タグの間に挿入されます。一方で<input> 要素は空要素です。つまり value 属性の中にラベルが挿入され、このためプレーンテキストのコンテンツのみ使用できます。
  • <button> 要素では、ボタンのラベルとは異なる値を持つことができます (value 属性の中にセットすることにより) 。ただし Internet Explorer 8 より前のバージョンの IE ではあてにできません。

Screenshots of buttons on several platforms.

Technically speaking, there is almost no difference between a button defined with the <button> element or the <input> element. The only noticeable difference is the label of the button itself. Within an <input> element, the label can only be character data, whereas in a <button> element, the label can be HTML, so it can be styled accordingly.

高度なフォームウィジェット

これらのウィジェットは、ユーザーに複雑あるいは高度に構造化されたデータを入力させるフォームコントロールです。これらは正確またはおおよその数値、日付や時間、色を含みます。

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

数値

数値のためのウィジェットは、type 属性の値を number に設定した <input> 要素で作成します。このコントロールはテキストフィールドに似ていますが浮動小数点数値のみを入力でき、また通常はウィジェットの値を増減させるボタンがつきます。

また、次のこともできます:

  • min 属性や max 属性を設定することで値を制限できます。
  • step 属性で、増減ボタンを押した際にウィジェットの値を変える量を指定することもできます。

<input type="number" min="1" max="10" step="2">

これは値が 1 から 10 に制限され、増減ボタンは値を 2 変更する数値ウィジェットを作成します。

number inputs are not supported in versions of Internet Explorer below 10.

スライダー

数値を選択するもうひとつの方法が、スライダーです。視覚的には、スライダーはテキストフィールドより正確さに欠けるため、値の正確さが必ずしも重要ではない数値の選択に使用します。

スライダーは、type 属性を range に設定した <input> 要素で作成します。

スライダーは適切に設定することが重要です。minmax および step の各属性を設定することを強く推奨します。

<input type="range" name="beans" id="beans" min="0" max="500" step="10">

This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.

One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty <span> element, in which we will write the current value of the slider, updating it as it is changed.

<label for="beans">How many beans can you eat?</label>
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
<span class="beancount"></span>

This can be implemented using some simple JavaScript:

var beans = document.querySelector('#beans');
var count = document.querySelector('.beancount');

count.textContent = beans.value;

beans.oninput = function() {
  count.textContent = beans.value;
}

Here we store references to the range input and the span in two variables, then we immediately set the span's textContent to the current value of the input. Finally, we set up an oninput event handler so that every time the range slider is moved, the span textContent is updated to the new input value.

range inputs are not supported in versions of Internet Explorer below 10.

日付と時刻の選択

伝統的に日付や時刻の値の収集は、Web 開発者にとって悪夢のようなものでした。HTML5 は、これら特定の値を扱うための専用コントロールを提供するよう機能強化しています。

日付と時刻のコントロールは、type 属性に適切な値を設定した <input> 要素で作成します。日付、時刻、あるいはそれら両方の収集を望むと思われるため、type 属性で使用できる値はいくつかあります:

datetime-local

これは、日付および特定のタイムゾーンの時刻を表示および選択できるウィジェットを作成します。

<input type="datetime-local">

month

これは、年と月を表示および選択できるウィジェットを表示します。

<input type="month">

time

これは、時刻を表示および選択できるウィジェットを表示します。

<input type="time">

week

これは、年と週番号を表示および選択できるウィジェットを表示します。

<input type="week">

日付と時刻のコントロールはすべて、min 属性や max 属性による制限が可能です。

<label for="myDate">When are you available this summer?</label>
<input type="date" min="2013-06-01" max="2013-08-31" id="myDate">

Warning — The date and time widgets are still poorly supported. At the moment, Chrome, Edge and Opera support them well, but there is no support in Internet Explorer, and Firefox and Safari have very little support for these.

カラーピッカー

色を扱うことは、やや困難です。RGB 値 (10 進数または 16 進数)、HSL 値、キーワード など、色の表現方法はいくつもあります。カラーウィジェットにより、ユーザーは色をテキストによる方法や視覚的な方法で選択できます。

カラーウィジェットは、type 属性を color に設定した <input> 要素で作成します。

<input type="color" name="color" id="color">

Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.

その他のウィジェット

動作がとても限定されているため簡単には分類できない、その他のウィジェットがいくつかあります。とはいえ、これらもとても役に立ちます。

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

ファイルピッカー

HTML フォームで、ファイルをサーバーに送信できます。この特定操作については以下の記事で詳しく説明します: フォームデータの送信と取得。ファイルピッカーウィジェットで、ユーザーは送信するファイルを 1 つ以上選択できます。

ファイルピッカーウィジェットを作成するには、type 属性を file に設定した <input> 要素を使用します。

accept 属性を使用して、受け入れるファイルの種類を制限できます。加えて、ユーザーが複数のファイルを選択できるようにしたい場合は、multiple 属性を付加します。

以下の例では、画像ファイルを要求するファイルピッカーを作成しています。ユーザーは複数のファイルを指定できます。

<input type="file" name="file" id="file" accept="image/*" multiple>

隠しコンテンツ

フォームとともに送信されるがユーザーからは見えないデータを持つことは、技術的な理由で便利な場合があります。これを行うために、フォームに不可視の要素を追加できます。そのためには、type 属性を hidden に設定した <input> 要素を使用します。

このような要素を作成する場合は、name 属性と value 属性の設定が必要です:

<input type="hidden" name="timestamp" value="1286705410">

画像ボタン

画像ボタンコントロールは <img> 要素とまったく同じように表示されますが、ユーザーがクリックすると送信ボタン (前述) のように動作します。

画像ボタンは、type 属性を image に設定した <input> 要素で作成します。

この要素は <img> 要素とまったく同じ属性をサポートして、さらにフォームボタンがサポートする属性もすべてサポートします。

<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

画像ボタンをフォームの送信に使用する際にこのウィジェットは自身の値を送信しませんが、代わりに画像上でクリックした位置の X 座標と Y 座標を送信します (座標は画像に対して相対的、つまり画像の左上隅が座標 0, 0 になります)。座標は 2 つのキーと値の組として送信されます。

  • X 値のキーは name 属性の値の後ろに文字列 ".x" をつけたもの、
  • Y 値のキーは name 属性の値の後ろに文字列 ".y" をつけたものです。

サンプルをご覧ください。フォームの画像上でクリックすると、以下の URL が送信されます:

http://foo.com?pos.x=123&pos.y=456

これは "hot map" を作成するためにとても便利な手段です。これらの値がどのように送信あるいは取得されるかについては、フォームデータの送信と取得の記事で詳しく説明します。

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

メーターとプログレスバーは、数値を視覚的に表現します。

Progress

プログレスバーは、時間とともに max 属性で指定された最大値へ変化する値を表現します。このようなバーは、<progress> 要素で作成します。<progress> 要素の内容物は、この要素をサポートしないブラウザーや読み上げを行う支援技術向けの代替手段になります。

<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 assistive technologies to vocalize it.

Meter

メーターバーは min 属性と max 属性で定められる範囲内の固定値を表現します。この値はバーとして視覚的にレンダリングされ、またバーがどのような状況であるかを知るため、いくつかの他の値と比較します:

  • low および high の値で、範囲を 3 つの部分に分割します:
    • 下位領域は、min の値と low の値の間の範囲です (これらの値を含みます)。
    • 中間領域は、low の値と high の値の間の範囲です (これらの値は除きます)。
    • 上位領域は、high の値と max の値の間の範囲です (これらの値を含みます)。
  • optimum の値は、<meter> 要素の最適値を定義します。lowhigh の値と組み合わせて、どの亜領域が望ましいかを定義します:
    • optimum の値が下位領域の範囲に含まれる場合は、下位領域が最適な範囲、中間領域が普通の範囲、上位領域がもっとも悪い範囲とみなされます。
    • optimum の値が中間領域の範囲に含まれる場合は、下位領域が普通の範囲、中間領域が最適な範囲、上位領域も普通の範囲とみなされます。
    • optimum の値が上位領域の範囲に含まれる場合は、下位領域がもっとも悪い範囲、中間領域が普通の範囲、上位領域が最適な範囲とみなされます。

<meter> 要素を実装するすべてのブラウザーは、これらの値をメーターバーの色を変えるために使用します:

  • 現在の値が最適領域の範囲にある場合は、バーが緑色になります。
  • 現在の値が普通の領域の範囲にある場合は、バーが黄色になります。
  • 現在の値がもっとも悪い領域の範囲にある場合は、バーが赤色になります。

このようなバーは、<meter> 要素で作成します。<meter> 要素の内容物は、この要素をサポートしないブラウザーや読み上げを行う支援技術向けの代替手段になります。

<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.

Conclusion

As you'll have seen above, there are a lot of different types of available form elements — you don't need to remember all of these details at once, and can return to this article as often as you like to check up on details.

関連情報

さまざまなフォームウィジェットについて深く学ぶためにチェックすべき、有用な外部リソースがあります:

このモジュール内

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

このページの貢献者: tomouchi_, Uemmra3, chrisdavidmills, yyss, ethertank
最終更新者: tomouchi_,