前の記事では <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 は組み込みのクライアント側のエラー検証 — データがサーバーに送られる前にブラウザーで実行されるもの — があります。これはユーザーが正確に入力するのに役立ち、時間を短縮できます — データが正しくないことをサーバーとのラウンドトリップを待つことなくすぐに知ることは便利です。
しかしこれは完全なセキュリティ対策と考えるべきではありません! アプリは送信データのセキュリティ確認をクライアント側と同様にサーバー側でも行うべきで、なぜならクライアント側の検証は簡単にオフにできるため悪意のあるユーザーは簡単にサーバーに不正なデータを送信できるためです。起こりうることについては Website security を読んで下さい。サーバー側の検証を実装するのはこのモジュールの範囲を超えていますが、記憶しておくべきです。
既定の制約では a@b は有効なメールアドレスです。これは既定では email 入力タイプはイントラネットのメールアドレスを許可しているためです。異なる検証動作を実装するには、pattern 属性を用いたり、エラーメッセージをカスタムできます。この機能の使い方は後の クライアント側検証の記事で話します。
注: 入力データがメールアドレスでない場合、:invalid 疑似クラスがマッチして、validityState.typeMismatch プロパティは true を返します。
検索フィールド
検索フィールドは、ページやアプリの検索ボックス作成に使われるものです。このフィールドタイプは type属性の search の値でセットされます:
<input type="search" id="search" name="search">
text フィールドと search フィールドの主な違いは、ブラウザーの見た目のスタイル設定方法です。よく、search フィールドは角丸で描画されます。また時折、値がクリックされたときに値をクリアする "Ⓧ"も表示されます。その他、ダイナミックキーボードのある端末では、キーボードの enter キーが "検索"、あるいは虫眼鏡アイコンで表示されることもあります。
下記のスクリーンショットでは macOS での Firefox 71, Safari 13, Chrome 79 と Windoes10 での Edge 18 と Chrome 79 での文字が入った検索フィールドを表示しています。注意として、クリアのアイコンはフィールドに値が入った場合のみ表示され、Safari を除いてフィールドにフォーカスが当たった場合のみ表示されます。
その他の機能として、search フィールドの値は同一サイトの複数ページにまたがって、自動保存してオートコンプリートすることができます。これはたいていのモダンブラウザーでは自動的に起こる傾向があります
電話番号フィールド
type 属性に tel の値を使って作られる電話番号の入力専用フィールド:
<input type="tel" id="tel" name="tel">
ダイナミックキーボードつきのタッチデバイスにアクセルしたとき、たいていの端末では type="tel" が出てくると数字のキーパッドを表示します、つまりこのタイプは数字キーパッドが使えるときに使えて、電話番号に使う必要があるだけではありません。
下記は Android 用 Firefox キーボードの例です:
世界中にはいろいろな電話番号のフォーマットがあるため、このフィールドはユーザーが入力した値に制約を一切つけません (つまり、文字が入っていることなどがありえます)。
前に触れた通り、pattern 属性が制約を強化するのに使われて、これはクライアント側検証で学びます。
URL フィールド
type 属性に url の値を使うことで作成できる URL 入力の専用フィールド:
<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機能に対して、数値キーパッドを提供します。
注: number 入力は Internet Explorer の 10 より前のバージョンではサポートされません。
スライダーコントロール
数字を選ぶもう１つの方法はスライダーです。家造りのようなサイトで資産の価格をフィルターするのによく見ることでしょう。これを示す例をライブで見てみましょう:
使用からすると、スライダーはテキストフィールドより不正確です。このため、正確な値が必ずしも重要でない数値の選択に使われます。
スライダーは <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', function() {
output.textContent = price.value;
});
ここでは range 入力と output を 2 つの変数に保存しています。次に output の textContent を入力の value ですぐにセットします。最後に、イベントリスナーをセットして、range スライダーが移動するといつも、output の textContent を新しい値に更新します。
注: range 入力は Internet Explorer 10以前のバージョンではサポートされません。
日付と時刻ピッカー
日付と時刻の値を集めるのはウェブ開発者にとってずっと悪夢でした。すばらしいユーザー体験のためには、カレンダー選択UIを与えるのが重要であり、それによってユーザーはネイティブのカレンダーアプリへのコンテキストスイッチや、パースするのが難しい違うフォーマットで入力する可能性を避けて日付選択ができます。前の千年紀の最後の分は、次のようにいろいろな表現ができます。例えば: 1999/12/31, 23:59 or 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 値の制限
日付をと時刻のコントロールはすべて、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">
date/time 入力のブラウザーサポート
日付と時刻のウィジェットに最良のブラウザーサポートがないことに注意するべきです。現状では、Chrome, Edge, Opera ではよくサポートしていますが、Internet Explorerではサポートがなく、Safari にはモバイルのサポートがあり(しかしデスクトップサポートはなし)、Firefox では time と date のみサポートします。
上でリンクしているリファレンスページでは非サポートブラウザーでフォールバックするようプログラミングするヒントを提供しています; もう1つのオプションは日付選択を提供する JavaScript ライブラリの利用です。たいていのモダンなフレームワークには機能を利用できるコンポーネントがあり、またスタンドアローンのライブラリもあります (ヒントとなる Top date picker JavaScript plugins and libraries を見てください)。
色選択コントロール
色も扱いが難しいです。色の表現がたくさんあります: RGB 値 (10進数や16進数), HSL 値、キーワードなど。
color コントロールは <input> 要素を、 type 属性に colorをつけて作成できます:
<input type="color" name="color" id="color">
サポートされている場合、色コントロールはOSのデフォルトの色選択機能を呼び出して選択できるようにする傾向があります。下記のスクリーンショットはmacOSの Firefox の例です:
次のライブサンプルも試してみてください:
戻り値は常に小文字で 6桁の16進数の色です。
注: color 入力は Internet Explorerではサポートされていません。
スキルをテストしましょう!
この記事の最後に到着しましたが、最も大事な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: HTML5 controls を見てください。
まとめ
ここで HTML5 フォーム入力タイプの旅が終了です。動作が特殊なため簡単に分類できないその他のコントロールタイプも少しあって、それを知るのも大事です。次の記事で扱います。
このモジュール
- 初めてのフォーム
- フォームの構築方法
- ネイティブフォームウィジェット
- The HTML5 input types
- Other form controls
- フォームへのスタイル設定
- フォームへの高度なスタイル設定
- UI pseudo-classes
- フォームデータの検証
- フォームデータの送信