HTML5 の入力型

このフィールド型は type属性の email の値でセットされます:

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

この type が使われたとき、ユーザーは有効なメールアドレスをフィールドに入力することが必須です。その他のコンテンツでは、ブラウザーによってフォーム送信時にエラーが表示されます。この動作は下記のスクリーンショットで見ることができます。

email 入力型と multiple 属性を組み合わせて、複数のメールアドレスが同じ入力に（カンマ区切りで）入力させることもできます。

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

いくつかの端末 — 特にスマートフォンのような動的キーボードつきのタッチ端末 — では、 @ キーを含むメールアドレス入力に適した別の仮想キーパッドが現れることもあります。Android 版 Firefox のキーボードの例として下記のスクリーンショットを見てください:

これは新しい入力型を使う良い理由であり、こうした端末のユーザーの使い勝手を向上させます。

上で見てきたように、他の新しい input 型と同様に、email は組み込みのクライアント側のエラー検証 — データがサーバーに送られる前にブラウザーで実行されるもの — があります。これはユーザーが正確に入力するのに役立ち、時間を短縮できます — データが正しくないことをサーバーとのラウンドトリップを待つことなくすぐに知ることは便利です。

しかしこれは完全なセキュリティ対策と考えるべきではありません! アプリは送信データのセキュリティ確認をクライアント側と同様にサーバー側でも行うべきで、なぜならクライアント側の検証は簡単にオフにできるため悪意のあるユーザーは簡単にサーバーに不正なデータを送信できるためです。起こりうることについてはウェブサイトセキュリティを読んで下さい。サーバー側の検証を実装するのはこのモジュールの範囲を超えていますが、記憶しておくべきです。

既定の制約では a@b は有効なメールアドレスです。これは既定では email 入力型はイントラネットのメールアドレスを許可しているためです。異なる検証動作を実装するには、pattern 属性を用いたり、エラーメッセージをカスタムできます。この機能の使い方は後の クライアントサイド検証の記事で話します。

検索フィールドは、ページやアプリの検索ボックス作成に使われるものです。このフィールド型は search の値を type 属性のに使用することで設定されます。

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

text フィールドと search フィールドの主な違いは、ブラウザーの見た目のスタイル設定方法です。よく、search フィールドは角丸で描画されます。また時折、値がクリックされたときに値をクリアする "Ⓧ" も表示されます。その他、動的キーボードのある端末では、キーボードの Enter キーが "検索"、あるいは虫眼鏡アイコンで表示されることもあります。

下記のスクリーンショットでは macOS での Firefox 71, Safari 13, Chrome 79 と Windoes10 での Edge 18 と Chrome 79 での文字が入った検索フィールドを表示しています。注意として、クリアのアイコンはフィールドに値が入った場合のみ表示され、Safari を除いてフィールドにフォーカスが当たった場合のみ表示されます。

もう 1 つの注目すべき機能として、search フィールドの値は同一サイトの複数ページにまたがって、自動保存してオートコンプリートすることができます。これはたいていのモダンブラウザーでは自動的に起こる傾向があります

電話番号を入力するための特殊なフィールドは、 tel の値を type 属性に使うと作成することができます。

<input type="tel" id="tel" name="tel" />

動的キーボードつきのタッチ端末でアクセスしたとき、たいていの端末では type="tel" が出てくると数字のキーパッドを表示します。つまりこの型は、テンキーが役立つときはいつでも有用であり、電話番号だけに使用する必要はありません。

下記は Android 用 Firefox キーボードの例です。

世界中にはいろいろな電話番号の書式があるため、このフィールドはユーザーが入力した値に制約を一切つけません（つまり、文字が入っていることもありえます）。

前に触れた通り、 pattern 属性が制約を強化するのに使われます。これはクライアントサイド検証で学びます。

URL を入力するための特殊な型のフィールドは、 url の値をtype 属性に使うと作成することができます。

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

これはフィールドに特別な検証制約を追加します。ブラウザーは (http:のような) プロトコルがない場合や、URL の形式が良くない場合にエラーを報告します。動的キーボードのある端末ではよく、コロン、ピリオド、スラッシュの複数やすべてをデフォルトキーとして表示します。

例は下記のものを見てください（Android 用 Firefox の例）。

数値入力用のコントロールは、 <input> type に number を指定して作成することができます。このコントロールはテキストフィールドのような見た目ですが、浮動小数値のみを許可し、通常は数値を増減するためのスピナー形式のボタンがあります。動的キーボードつきの端末では、一般的に数値キーボードが表示されます。

下記のスクリーンショット (Android 用 Firefox より) に例があります。

number の入力型では、min と max 属性をセットすることで最小値と最大値の制約をつけることができます。

スピナーボタンを押すことで増減させる増分を接とするのに step 属性を使うこともできます。既定では、 number 入力型は数値が整数値の場合のみ検証します。浮動小数を許可するには、 step="any" を指定します。省略された場合、step 値は既定で 1 となり、つまりすべての数値が有効です。

いくつか例を見てみましょう。次の最初の例では値が 1 と 10 の間に制限され、増減ボタンで値が 2 ずつ変更される数値コントロールを作成しています。

<input type="number" name="age" id="age" min="1" max="10" step="2" />

2 つ目の例では値が 0 と 1 の間に制限され、増減ボタンで値が 0.01 ずつ変更される数値コントロールを作成しています。

<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />

number 入力型は有効な値の範囲に制限されているときに意味を持ちます。例えば、ある人の年齢や身長です。範囲が大きすぎて増分が意味をなさない場合 (例えば USA の郵便番号は、00001 から 99999 の範囲です)、tel 型がより良い選択となることもあります。これは数値のスピナー UI 機能に対して、数値キーパッドを提供します。

数字を選ぶもう１つの方法はスライダーです。家造りのようなサイトで資産の価格をフィルターするのによく見ることでしょう。これを示す例をライブで見てみましょう。

使用からすると、スライダーはテキストフィールドより不正確です。このため、正確な値が必ずしも重要でない数値の選択に使われます。

スライダーは <input> に type 属性を range にセットして作成します。スライダーはマウスやタッチや、キーパッドの矢印で移動できます。

スライダーを適切に設定するのは重要です。そのためには、それぞれ最小、最大、増分値を設定する min, max, step 属性を設定するのを強くお奨めします。

上の例の背後にあるコードを見て、どのように実現されるかを見てみましょう。まずは基本となる HTML です。

<label for="price">Choose a maximum house price: </label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000" />
<output class="price-output" for="price"></output>

この例では、値が 50000 と 500000 までの範囲で、100 ずつ増減するスライダーを作成しています。既定の値は value 属性を使って 250000 としています。

スライダーについての問題は、現在の値がいくつなのかのフィードバックが一切ないことです。これは、現在の値を入れている <output> 要素を導入する理由です (この要素は次の記事でも見ていきます)。入力値や、あらゆる要素内の計算結果を表示できますが、<output> は特別です — <label>のように — for 属性を取って要素や出力値の元となる要素と関連付けることができます。

実際に現在の値を表示して、変更時に更新するには、JavaScript を使う必要がありますが、比較的に簡単です。

const price = document.querySelector("#price");
const output = document.querySelector(".price-output");

output.textContent = price.value;

price.addEventListener("input", () => {
  output.textContent = price.value;
});

ここでは range 入力と output を 2 つの変数に保存しています。次に output の textContent を入力の value ですぐにセットします。最後に、イベントリスナーをセットして、range スライダーが移動するといつも、output の textContent を新しい値に更新します。

日付と時刻の値を収集することは、ウェブ開発者にとってずっと悪夢でした。良い使い勝手を実現するには、カレンダーを選択する UI を提供することが重要です。これにより、ユーザーはネイティブのカレンダーアプリケーションに切り替えることなく日付を選択でき、解釈しにくいさまざまな形式で日付を入力できる可能性があります。前千世紀の最後の 1 分は、例えば 1999/12/31 23:59 や 12/31/99T11:59PM のように、様々な方法で入力される可能性があります。

HTML の日付コントロールは、カレンダーウィジェットを提供して統一されたデータを作成し、この種類のデータを扱うことができます。

日付と時刻コントロールは <input> 要素と、日付か時間かその両方かを集めたいのかにあわせて適当な type 属性を使って作成できます。対応していないブラウザーにおいて、 <select> 要素で代替する場合の実行例は次の通りです。

利用できるいろいろな型を簡単に見ていきましょう。注意としては、この型の使用法はとても複雑で、特にブラウザーの対応考えたに場合そうです（下記を見てください）。完全な詳細情報は、それぞれの型のリファレンスページと、そこにある詳細な例を見てください。

<input type="datetime-local"> は特定のタイムゾーン情報のない日付と時刻を表示して選択するウィジェットを作成します。

<input type="datetime-local" name="datetime" id="datetime" />

<input type="month"> は年と月を表示して選択するウィジェットを作成します。

<input type="month" name="month" id="month" />

<input type="time"> は時刻の値を表示して選択するウィジェットを作成します。時刻は 12 時間のフォーマットで表示されますが、返値は 24 時間フォーマットです。

<input type="time" name="time" id="time" />

<input type="week"> は本年の週の番号を表示して選択するウィジェットを作成します。

週は月曜始まりで日曜日で終わります。それに加えて、その年の最初の週はその年の最初の木曜日を含みます—これはその年の最初の日を含まないことも、前年の最後の数日を含むこともあります。

<input type="week" name="week" id="week" />

日付をと時刻のコントロールはすべて、min と max 属性で制約をつけることができて、さらに step 属性 (この値は入力型によって変わります)で追加の制約も可能です。

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

色も扱いが難しいです。色の表現がたくさんあります。 RGB 値（10 進数や 16 進数）、HSL 値、キーワードなどです。

color コントロールは <input> 要素を、 type 属性に colorをつけて作成できます。

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

対応しているいる場合、色コントロールは OS の既定の色選択機能を呼び出して選択できるようにする傾向があります。下記のスクリーンショットは macOS の Firefox の例です。

次のライブサンプルも試してみてください。

返値は常に小文字で 6 桁の 16 進数の色です。

この記事の最後に到着しましたが、最も大事な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: HTML5 controls (en-US) を見てください。

ここで HTML5 フォーム入力型の旅が終了です。動作が特殊なため簡単に分類できないその他のコントロール型も少しあって、それを知るのも大事です。次の記事で扱います。

• 前のページ
• Overview: Forms
• 次のページ