HTML5 の入力型

このフィールド型は、 email の値を type 属性に使用することで設定します。

<label for="email">メールアドレスを入力してください:</label><br />

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

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

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

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

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

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

前述の通り、 email （およびその他の新しい input 型）は、サーバーにデータが送信される前にブラウザーによって実行される、クライアント側のエラー検証を組み込みで提供します。これは、ユーザーが正確なフォーム入力を行うための手助けとなり、時間を節約することができます。サーバーへの往復を待つよりも、データが正確ではないことを即座に把握できるのは便利です。

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

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

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

<label for="search">Enter a search term:</label><br />

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

text フィールドと search フィールドの主な違いは、ブラウザーがその外観をどのようにスタイル設定するかです。ブラウザーによっては、検索フィールドは角が丸く表示されます。ブラウザーによっては、 "Ⓧ" のクリアアイコンが表示され、クリックするとフィールド内の値がすべて消去されます。このクリアアイコンは、フィールドに値が示されている場合にのみ現れ、 Safari を除いて、フィールドがフォーカスされている場合にのみ表示されます。さらに、動的なキーボードを持つ端末では、キーボードの Enter キーが "検索"、あるいは虫眼鏡アイコンで表示されることもあります。

もう一つ特筆すべき機能として、 search フィールドの値を自動的に保存し、同じウェブサイトの複数のページで自動補完機能を提供するために再利用できるという点があります。これは、ほとんどの現行ブラウザーでは自動的に現れる傾向があります。

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

<label for="tel">電話番号を入力してください:</label><br />

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

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

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

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

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

<label for="url">URL を入力してください:</label><br />

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

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

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

<label for="number">数値を入力してください:</label><br />

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

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

また、 step 属性を使用して、スピンボタンを押すことによって増減する数値を設定することもできます。既定では、 step 属性の既定値が 1 であるため、数値入力型は数値が整数であるかどうかだけの検証を行います。浮動小数点数を許可するには、 step="any" または特定の値（step="0.01" など）を指定して浮動小数点数を制限します。省略すると、 step の値は既定で 1 となるため、有効なのは整数のみとなります。

いくつか例を見てみましょう。

この例では、有効な値を 1 から 10 の間の奇数に制限する数値コントロールを作成します。 増加ボタンと減少ボタンは、最小値から始めて、値を 2 ずつ変更します。

<label for="number">1 から 10 までの奇数を入力してください:</label><br />

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

この例では、値が 0 から 1 までの間の値に制限され、増減ボタンで値が 0.01 ずつ変化する数値コントロールを作成します。

<label for="number">0 以上 1 以下の数値を入力してください:</label><br />

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

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

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

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

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

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

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

<label for="price">住宅価格の上限を選択してください: </label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="1000"
  value="250000" />
<output class="price-output" for="price"></output>

この例では、値が 50000 と 500000 までの範囲で、1000 ずつ増減するスライダーを作成しています。既定値は 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;
});

body {
  text-align: center;
}
label,
output {
  display: block;
}

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

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

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

日付と時刻のコントロールは、 <input> 要素に適切な値を指定した type 属性を設定したものを使用して作成します。この値は、日付、時刻、またはその両方を収集したいかどうかによって変わります。ライブサンプルを以下に示します。

<label for="party">パーティーの日時を選択してください:</label>
<input type="datetime-local" id="party" name="bday" />
<span class="validity"></span>

input:invalid + span:after {
  content: " ✖";
}

input:valid + span:after {
  content: " ✓";
}

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

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

<label for="month">日付と時刻を入力してください:</label><br />

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

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

<label for="month">月を入力してください:</label><br />

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

<input type="time"> は時刻の値を表示して選択するウィジェットを作成します。時刻は 12 時制で表示されることがありますが、返値は 24 時制です。

<label for="time">時刻を入力してください:</label><br />

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

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

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

<label for="week">週を入力してください:</label><br />

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

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

<label for="myDate">この夏はいつ空いていますか？</label><br />
<input
  type="date"
  name="myDate"
  min="2025-06-01"
  max="2025-08-31"
  step="7"
  id="myDate" />

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

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

<label for="color">色を選択してください:</label><br />

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

通常、色コントロールをクリックすると、選択するためにオペレーティングシステムで既定の色選択機能が表示されます。返値は常に小文字で 6 桁の 16 進数の色です。

この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。スキルテスト: HTML5 のコントロールを見てください。

これで、HTML5 フォーム入力型のツアーは終わりです。他にもいくつかコントロール型があり、その動作がとても特殊なため簡単にまとめることはできませんが、知っておく必要があります。次の記事でそれらに応じて説明します。

• 前のページ
• Overview: ウェブフォーム
• 次のページ

• カスタムフォームコントロールの作成方法
• JavaScript によるフォームの送信