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

前提条件: 基本的なコンピュータリテラシーと、基本的な HTML の理解
目的: データを収集するためにブラウザで使用できるネイティブフォームウィジェットの種類と、それらを HTML を使用して実装する方法を理解する。

ここでは、ブラウザに組み込まれているフォームウィジェットに焦点を当てますが、HTML フォームは依然として限られており、実装はブラウザによって大きく異なるため、Web 開発者は独自のフォームウィジェットを作成することがあります。これに関するより多くのアイデアについてはモジュールの後半でカスタムフォームウィジェットの作成方法を見てください。

: この記事で説明されている機能のほとんどは、ブラウザ間で幅広くサポートされています。これに対する例外に注意しましょう。より正確な詳細が必要な場合は、HTML フォーム要素のリファレンス、特に広範囲にわたる <input> 型の参照を参照してください。

共通属性

フォームウィジェットを定義するために使用される要素の多くは、独自の属性をいくつか持っています。ただし、すべてのフォーム要素に共通の一連の属性があり、それによりウィジェットをある程度制御できます。共通属性のリストは以下のとおりです。

属性名 既定値 説明
autofocus (false) この真偽値属性を使用すると、ユーザがページをロードするときに、たとえば別のコントロールを入力して上書きしない限り、要素に自動的に入力フォーカスするように指定できます。この属性を指定できるのは、文書内の1つのフォーム関連要素だけです。
disabled (false) この真偽値属性は、ユーザが要素と対話できないことを示します。この属性が指定されていない場合、要素はそれを含む要素 (例えば <fieldset>) からその設定を継承します。disabled 属性が設定されている包含要素がない場合は、その要素が有効になります。
form   ウィジェットが関連付けられているフォーム要素。属性の値は、同じ文書内の <form> 要素の id 属性でなければなりません。理論的には、フォームウィジェットを <form> 要素の外側に設定できます。しかし実際には、その機能をサポートするブラウザはありません。
name   要素の名前。これはフォームデータとともに送信されます。
value   要素の初期値

テキスト入力フィールド

テキスト 入力 フィールドは最も基本的なフォームウィジェットです。これらはユーザがあらゆる種類のデータを入力できるとても便利な方法です。ただし、一部のテキストフィールドは特定のニーズを満たすために特化することができます。いくつかの簡単な例をすでに見ました。

: HTML フォームのテキストフィールドは単純なプレーンテキストの入力コントロールです。つまり、これらを使ってリッチエディット (太字、斜体など) を実行することはできません。見かけるすべてのリッチテキストエディタは、HTML、CSS、および JavaScript で作成されたカスタムウィジェットです。

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

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

: <input> 要素はほとんど何でもあり得るので特別です。単に type 属性を設定するだけで、劇的に変更することができ、単一行のテキストフィールド、テキスト入力のないコントロール、時間と日付のコントロール、ボタンなど、ほとんどのタイプのフォームウィジェットの作成に使用されます。ただし、複数行の入力に対する <textarea> のようないくつかの例外があります。記事を読むときには、これらに注意してください。

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

単一行のテキストフィールドは、type 属性値が text に設定されている <input> 要素を使用して作成されます (また、type 属性を指定しない場合は text がデフォルト値になります)。 type 属性に指定した値がブラウザに認識されない場合 (たとえば type="date" を指定した場合)、この属性の値のテキストは代替値になります。 ブラウザはネイティブの日付ピッカーをサポートしていません。

: GitHub の single-line-text-fields.html に、すべての単一行テキストフィールドタイプの例があります (こちらも参照してください)。

これは基本的な単一行のテキストフィールドの例です。

<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 属性を使用すると、(カンマで区切って)ユーザに対して複数の電子メールアドレスの入力を可能にします。

一部のデバイス (特にモバイル) では、メールアドレスを入力するのにより適した別の仮想キーパッドが表示される場合があります。

: フォームの検証について詳しくは、記事「フォームデータの検証」を参照してください。

パスワードフィールド

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

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

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

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

最近のブラウザは、安全でない接続を介してフォームデータを送信することによるセキュリティへの影響を認識しており、ユーザが安全でないフォームを使用しないように警告を実装しています。Firefox が実装しているものの詳細については、安全でないパスワードをご覧ください。

検索フィールド

このタイプのフィールドは、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>

テキストエリアと通常の単一行のテキストフィールドの主な違いは、ユーザが、改行を含むテキストを入力する (つまり Return キーを押す) ことができるということです。

Screenshots of multi-lines text fields on several platforms.

: GitHub の multi-line-text-field.html に複数行のテキストフィールドの例があります (こちらもご覧ください)。それを見ると、ほとんどのブラウザではテキスト領域の右下にドラッグハンドルが表示され、ユーザがサイズを変更できるようになっています。このサイズ変更機能は、CSS を使用してテキストエリアの resize プロパティを none に設定することで無効にできます。

<textarea> は、(他のいくつかに加えて) いくつかの行にまたがってそのレンダリングを制御するためのいくつかの追加の属性も受け入れます。

<textarea> 要素の属性
属性名 既定値 説明
cols 20 テキストコントロールの表示幅 (平均文字幅)。
rows   コントロールの表示テキスト行数。
wrap soft コントロールがテキストを折り返す方法を示します。可能な値は hard または soft です。

<textarea> 要素は <input> 要素とは少し異なって書かれていることに注意してください。 <input> 要素は空の要素です。つまり、子要素を含めることはできません。一方、<textarea> 要素は、テキストコンテンツの子を含むことができる通常の要素です。

ここで注意すべき2つの重要な関連事項があります。

  • <input> 要素のデフォルト値を定義したい場合は、value 属性を使用する必要があります。 一方、<textarea> 要素の場合は、<textarea> の開始タグと終了タグの間にデフォルトのテキストを配置します。
  • その性質上、<textarea> 要素はテキストコンテンツのみを受け入れます。これは、<textarea> の中にある HTML コンテンツは、プレーンテキストのコンテンツであるかのようにレンダリングされることを意味します。

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

メモ: GitHub の drop-down-content.html に、すべてのドロップダウンボックスタイプの例があります (こちらも参照)。

セレクトボックス

セレクトボックスは 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.

 

<option> 要素が value 属性で設定されている場合、その属性の値はフォームの送信時に送信されます。value 属性を省略すると、<option> 要素の内容が選択ボックスの値として使用されます。

<optgroup> 要素では、label 属性が値の前に表示されますが、それがオプションのように見えても選択できません。

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

デフォルトで、ユーザはセレクトボックスで値を 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> 要素は HTML フォームにごく最近追加されたものですそのため、ブラウザのサポートは先ほど見たものより少し制限されています。最も注目すべきは、10より下の IE バージョンではサポートされていません、そして Safari はまだ執筆時点でそれをサポートしていません。

これを処理するために、ブラウザに素晴らしい代替を提供するためのちょっとしたコツがあります。

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

<datalist> 要素をサポートするブラウザは、<option> 要素ではないすべての要素を無視し、期待通りに動作します。一方、<datalist> 要素をサポートしていないブラウザはラベルと選択ボックスを表示します。もちろん、<datalist> 要素のサポートの欠如を処理する方法は他にもありますが、これが最も簡単です (他のものは 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 も何も送信しません。

: このセクションの例は、checkable-items.html としてGitHubにあります (こちらも参照してください)。

最大限のユーザビリティ/アクセシビリティを実現するために、関連項目の各リストを <fieldset> で囲み、リストの全体的な説明を示す <legend> で囲むことをお勧めします。<label>/<input> 要素の個々のペアは、それぞれ独自のリスト項目 (または同様のもの) に含める必要があります。これは例に示されています。

意味を持たせたい場合は、value 属性内でこれらの種類の入力の値も指定する必要があります。値が指定されていない場合、チェックボックスとラジオボタンには 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)
フォームデータをサーバに送信します。<button> 要素の場合、type 属性 (または type の無効な値) を省略すると、送信ボタンが表示されます。
リセット (Reset)
すべてのフォームウィジェットをデフォルト値にリセットします。
無名 (Anonymous)
自動的な効果はないボタンですが、JavaScript を使用してカスタマイズできます。

: このセクションの例は button-examples.html として GitHub にあります (こちらも参照してください)。

ボタンは <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.

厳密に言えば、<button> 要素と <input> 要素で定義されたボタンの間にほとんど違いはありません。 唯一の顕著な違いはボタン自体のラベルです。<input> 要素内では、ラベルは文字データのみにすることができますが、<button> 要素内ではラベルを HTML にすることができるため、それに従ってスタイルを設定できます。

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

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

: このセクションの例は advanced-examples.html として GitHub にあります (こちらも参照してください)。

数値

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

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

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

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

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

number input 属性は、Internet Explorer のバージョン10未満ではサポートされていません。

スライダー

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

スライダーは、type 属性を range に設定した <input> 要素を使用して作成されます。スライダーを適切に設定することが重要です。 そのために minmax および step の各属性を設定することを強く推奨します。

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

この例では、値が 0 から 500 の範囲で、増減ボタンで値が +10 から -10 に変わるスライダーを作成します。

スライダーの問題の1つは、現在の値が何であるかについて視覚的なフィードバックを提供していないことです。JavaScript を使ってこれを自分で追加する必要がありますが、比較的簡単です。この例では、空の <span> 要素を追加します。この要素には、スライダーの現在の値を書き込み、変更に応じて更新します。

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

これは簡単な JavaScript を使って実装することができます。

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

count.textContent = beans.value;

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

ここでは、range input と span への参照を2つの変数に格納してから、すぐに span の textContent を現在の input の value に設定します。最後に、range スライダが移動されるたびに span textContent が新しい入力値に更新されるように oninput イベントハンドラを設定します。

range 入力は、Internet Explorer バージョン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">

警告 — 日付と時刻ウィジェットは最も深いサポートを持っていません。現時点では、Chrome、Edge、Firefox、および Opera はそれらを適切にサポートしていますが、Internet Explorer ではサポートされておらず、Safari にはパッチサポートがあります。

カラーピッカー

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

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

<input type="color" name="color" id="color">
警告 — カラーウィジェットは現在それをサポートしていません。Internet Explorer にはサポートがありません、そして Safari は現在それもサポートしていません。他の主要なブラウザはそれをサポートしています。

その他のウィジェット

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

: このセクションの例は other-examples.html として GitHub にあります (こちらも参照してください)。

ファイルピッカー

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>

これは、ダウンロードされたファイルの総数の割合、または質問表に記入された質問の数など、進捗報告を必要とするものをすべて実装するためのものです。

<progress> 要素内のコンテンツは、その要素をサポートしていないブラウザやそれを発声するための支援技術にとっての代替となるものです。

メーター

メーターバーは 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>

<meter> 要素内のコンテンツは、その要素をサポートしていないブラウザやそれを発声するための支援技術にとっての代替となるものです。

進行状況とメーターのサポートはかなり良いです。Internet Explorer のサポートはありませんが、他のブラウザはそれをよくサポートします。

まとめ

上で見たように、利用可能なフォーム要素には多くの異なるタイプがあります。一度にこれらの詳細の全てを覚えておく必要はありません。詳細について調べるために好きなだけこの記事に戻ることができます 。

関連情報

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

このモジュール

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

最終更新者: silverskyvicto,