HTML5 の入力型
前の記事では <input> 要素を見てきて、 HTML の初期から利用できる type 属性の値をカバーしてきました。ここでは最近のフォームコントロールの機能、特定のデータを集めるのに HTML5 で追加された、新しい入力型を詳しく見ていきましょう。
| 前提条件: | コンピューターリテラシーの基本と、 HTML の理解。 |
|---|---|
| 目的: | ネイティブフォームコントロールで利用できる新しい入力型の理解と、 HTML を用いた実装方法。 |
メモ: この記事のたいていの機能はブラウザー間で広くを対応されています。例外は注記しておきます。ブラウザーサポートについての詳細は、HTML フォーム要素のリファレンス、特に <input> 型リファレンスを見てください。
HTML フォームコントロールの見た目はデザイナーの仕様により全く異なるため、ウェブ開発者はときどき独自のフォームコントロールを作成します。これは上級のチュートリアル — カスタムフォームウィジェットの作成方法 — で扱います。
メールアドレスフィールド
このフィールド型は type属性の email の値でセットされます:
<input type="email" id="email" name="email">
この type が使われたとき、ユーザーは有効なメールアドレスをフィールドに入力することが必須です。その他のコンテンツでは、ブラウザーによってフォーム送信時にエラーが表示されます。この動作は下記のスクリーンショットで見ることができます。
email 入力型と multiple 属性を組み合わせて、複数のメールアドレスが同じ入力に（カンマ区切りで）入力させることもできます。
<input type="email" id="email" name="email" multiple>
いくつかの端末 — 特にスマートフォンのような動的キーボードつきのタッチ端末 — では、 @ キーを含むメールアドレス入力に適した別の仮想キーパッドが現れることもあります。Android 版 Firefox のキーボードの例として下記のスクリーンショットを見てください:
メモ: 基本的なテキスト入力型の例は basic input examples にあります（ソースコード も見てください）。
これは新しい入力型を使う良い理由であり、こうした端末のユーザーの使い勝手を向上させます。
クライアント側の検証
上で見てきたように、他の新しい input 型と同様に、email は組み込みのクライアント側のエラー検証 — データがサーバーに送られる前にブラウザーで実行されるもの — があります。これはユーザーが正確に入力するのに役立ち、時間を短縮できます — データが正しくないことをサーバーとのラウンドトリップを待つことなくすぐに知ることは便利です。
しかしこれは完全なセキュリティ対策と考えるべきではありません! アプリは送信データのセキュリティ確認をクライアント側と同様にサーバー側でも行うべきで、なぜならクライアント側の検証は簡単にオフにできるため悪意のあるユーザーは簡単にサーバーに不正なデータを送信できるためです。起こりうることについてはウェブサイトセキュリティを読んで下さい。サーバー側の検証を実装するのはこのモジュールの範囲を超えていますが、記憶しておくべきです。
既定の制約では a@b は有効なメールアドレスです。これは既定では email 入力型はイントラネットのメールアドレスを許可しているためです。異なる検証動作を実装するには、pattern 属性を用いたり、エラーメッセージをカスタムできます。この機能の使い方は後の クライアントサイド検証の記事で話します。
メモ: 入力データがメールアドレスでない場合、:invalid 擬似クラスがマッチして、validityState.typeMismatch プロパティは true を返します。
検索フィールド
検索フィールドは、ページやアプリの検索ボックス作成に使われるものです。このフィールド型は 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 を入力するための特殊な型のフィールドは、 url の値をtype 属性に使うと作成することができます。
<input type="url" id="url" name="url">
これはフィールドに特別な検証制約を追加します。ブラウザーは (http:のような) プロトコルがない場合や、URL の形式が良くない場合にエラーを報告します。動的キーボードのある端末ではよく、コロン、ピリオド、スラッシュの複数やすべてをデフォルトキーとして表示します。
例は下記のものを見てください（Android 用 Firefox の例）。
メモ: URL が正しい形式であっても、それが必ずしも実際存在する場所を参照しているとは限りません。
数値フィールド
数値入力用のコントロールは、 <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 を新しい値に更新します。
メモ: CSS Tricks に、このテーマに応じた素晴らしいチュートリアルがあります。 The Output Element です。
日付と時刻ピッカー
日付と時刻の値を収集することは、ウェブ開発者にとってずっと悪夢でした。良い使い勝手を実現するには、カレンダーを選択する UI を提供することが重要です。これにより、ユーザーはネイティブのカレンダーアプリケーションに切り替えることなく日付を選択でき、解釈しにくいさまざまな形式で日付を入力できる可能性があります。前千世紀の最後の 1 分は、例えば 1999/12/31 23:59 や 12/31/99T11:59PM のように、様々な方法で入力される可能性があります。
HTML の日付コントロールは、カレンダーウィジェットを提供して統一されたデータを作成し、この種類のデータを扱うことができます。
日付と時刻コントロールは <input> 要素と、日付か時間かその両方かを集めたいのかにあわせて適当な type 属性を使って作成できます。対応していないブラウザーにおいて、 <select> 要素で代替する場合の実行例は次の通りです。
利用できるいろいろな型を簡単に見ていきましょう。注意としては、この型の使用法はとても複雑で、特にブラウザーの対応考えたに場合そうです（下記を見てください）。完全な詳細情報は、それぞれの型のリファレンスページと、そこにある詳細な例を見てください。
datetime-local
<input type="datetime-local"> は特定のタイムゾーン情報のない日付と時刻を表示して選択するウィジェットを作成します。
<input type="datetime-local" name="datetime" id="datetime">
month
<input type="month"> は年と月を表示して選択するウィジェットを作成します。
<input type="month" name="month" id="month">
time
<input type="time"> は時刻の値を表示して選択するウィジェットを作成します。時刻は 12 時間のフォーマットで表示されますが、返値は 24 時間フォーマットです。
<input type="time" name="time" id="time">
week
<input type="week"> は本年の週の番号を表示して選択するウィジェットを作成します。
週は月曜始まりで日曜日で終わります。それに加えて、その年の最初の週はその年の最初の木曜日を含みます—これはその年の最初の日を含まないことも、前年の最後の数日を含むこともあります。
<input type="week" name="week" id="week">
date/time 値の制限
色選択コントロール
スキルをテストしましょう!
この記事の最後に到着しましたが、最も大事な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: HTML5 controls (en-US) を見てください。