Create Amazing Forms

フォームをモバイルに記入するのは困難です。 最高のフォームは入力の数が最も少ないものです。 良いフォームは意味のある入力タイプを提供します。 キーはユーザーの入力タイプと一致するように変更する必要があります。ユーザーはカレンダー上の日付を選択します。 ユーザーに通知してください。 検証ツールは、フォームを送信する前に必要なことをユーザーに伝える必要があります。

見栄えの良いフォームの作成について説明したこれらのガイドの概要については、下のビデオをチェックしてください。

Design efficient forms

繰り返しのアクションを回避し、必要な情報のみを要求し、どこまでマルチ パート フォームに沿うかを示すことによってユーザーをガイドすることにより、効率的なフォームを設計します。

TL;DR

  • 既存のデータを使用して、フィールドに事前設定し、オートフィルを有効にします。
  • ユーザーがマルチ パート フォームを活用できるよう、明確にラベル付けされたプログレス バーを使用します。
  • 視覚的なカレンダーを提供し、ユーザーがサイトから離れてスマートフォンのカレンダー アプリにジャンプする必要をなくします。

繰り返しアクションとフィールドを最小限に抑える

フォームに繰り返しのアクションがないことを確認してください。 必要なだけのフィールドに留め、 autofillを活用するようにしてください。 これによって、ユーザーは事前設定されたデータで簡単にフォームを完了できます。

マルチ パート フォームに進捗を表示
Progressive.com のウェブサイトで、ユーザーは最初に郵便番号の入力を要求されます。その後、事前設定されたフォームの次の部分に進みます。

既に知っている情報を事前入力する機会を探したり、ユーザーが提供する 情報を保存することができます。 たとえば、 ユーザーによって供給された最新の配送先住所を 事前設定します。

ユーザーに進捗状況を示す

マルチ ステップ フォームとプロセスを介して、プログレス バーとメニューで 正確に全体的な進捗状況を伝える必要があります。

マルチ パート フォームに進捗を表示
- ユーザーがマルチ パート フォームを活用できるよう、明確にラベル付けされたプログレス バーを使用します。

前のステップで不相応に複雑なフォームを配置した場合、 ユーザーは全体のプロセスを終える前に、サイトを離れる可能性が高くなります。

日付を選択するための視覚的カレンダーを提供

旅行の予定や日程をスケジュールするときに、ユーザーは多くの場合、 より多くのコンテキストを必要とします。ユーザーがカレンダーをチェックするためにサイトを離れることを防止し 、手続きを容易にするために、開始日と終了日を選択するための明確な標識との 視覚的なカレンダーを提供します。

使いやすいカレンダーを使用するホテル予約サイト
ホテル予約サイトは、日付を簡単に選ぶためのカレンダー·ウィジェットを使用しています。

Choose the best input type

正しい入力タイプを使用して情報の入力を効率化します。 ユーザーは、電話番号を入力する際に自動的にナンバー パッドが表示されるか、入力するにつれて自動的に現在のフィールドを進めるウェブサイトを評価します。 フォーム上でで無駄なタップを排除するようにしてください。

TL;DR

  • データ入力を簡単にするための最も適切な入力タイプを選択します。
  • datalist 要素でユーザーが入力できる提案をします。

HTML5 入力タイプ

HTML5 は多くの新しい入力タイプを導入しました。 これらの新しい入力タイプは、 画面上のキーボードに表示するキーボード レイアウトの 種類について、ブラウザにヒントを与えます。 ユーザーはキーボードを変更せず、 入力タイプの適切なキーを見るだけで、 必要な情報をより簡単に入力することができます。

入力 タイプ 一般的なキーボード
url
URL を入力します。 これは有効な URI スキームで始まる必要があります。 たとえばhttp://ftp:// または mailto:.
tel
電話番号を入力します。 これは、検証のために特定の構文を強制しません。 したがって、特定の形式を確認したい場合は、 パターンを使用することができます。
email
メールアドレスを入力します。 @ がデフォルトでキーボードに表示されます。 複数のメールアドレスが提供される場合は、 複数の属性を追加することができます。
search
テキスト入力フィールドが、 プラットフォームの検索フィールドと一致するスタイルです。
number
数字を入力します。 有理整数または浮動小数点値です。
range
数字を入力しますが、番号入力とは異なります。 タイプ、値は重要ではありません。 これは、スライダ コントロールとしてユーザーに 表示されます。
datetime-local
日付と時刻の値を入力します。 ここで提供されるタイムゾーンは現地時間です。
date
タイムゾーンなし で日付 (のみ) を入力します。
time
タイムゾーンなし で時間 (のみ) を入力します。
week
タイムゾーンなし で週 (のみ) を入力します。
month
タイムゾーンなし で月 (のみ) を入力します。
color
色を選択します。

データリストで入力中に候補を示す

datalist 要素は入力タイプではなく、入力値の候補のリストであり、 フォーム フィールドに関連付けられています。 これによって、ブラウザがユーザー タイプとして オートコンプリートのオプションを提案することができます。 ユーザーが値を見つけるために長いリストを スキャンしなければならないような選択要素とは異なり、datalist 要素はユーザー タイプに応じてヒントを提要します。

<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
  <option value="white">
  <option value="milk">
  <option value="dark">
</datalist>

Label and name inputs properly

フォームをモバイルに記入するのは困難です。 最高のフォームは入力の数が最も少ないものです。 良いフォームは意味のある入力タイプを提供します。 キーはユーザーの入力タイプと一致するように変更する必要があります。ユーザーはカレンダー上の日付を選択します。 ユーザーに通知してください。 検証ツールは、フォームを送信する前に必要なことをユーザーに伝える必要があります。

ラベルの重要性

label 要素は、フォーム要素で 必要な情報をユーザに提供します。 各 labellabel 要素の内部に配置されることによって、あるいは"for" 属性を使用することによって、 入力要素と関連付けられます。 要素を形成するためにラベルを適用すると、タッチ目標のサイズを 改善するのに役立ちます。 tユーザーは、入力要素にフォーカスを配置するためにラベルまたは入力のいずれかをtタッチすることができます。

<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required id="frmAddressS"
  placeholder="123 Any Street" autocomplete="shipping street-address">

ラベルのサイズと配置

ラベルと入力はにプレスを簡単にできるように十分大きくなければなりません。 縦向きのビューポートでは、 フィールド ラベルは入力要素の上にあり 横向きでは横に配置されます。 フィールド ラベルと対応する入力ボックスが同時に表示されることを 確認してください。 カスタム スクロール ハンドラに注意してください。入力要素をページの 先頭にスクロールしてラベルを隠したり、入力要素の下に 配置されたラベルがが仮想キーボードによって覆われることがあります。

プレースホルダの使用

プレースホルダー属性は、入力に期待されているものについてユーザーにヒントを提供します。 通常、ユーザーが入力を開始するまで、 明るいテキストで値を表示します。

<input type="text" placeholder="MM-YYYY" ...>

オートコンプリートを有効にするためにメタデータを使用

ウェブ サイトで、名前、メールアドレス、その他の頻繁に使用されるフィールドに 自動的に入力することによって、ユーザーの時間を節約します。 これは潜在的な入力ミスを減らすのに役立ち、 特に仮想キーボードや小さな端末で便利です。

ブラウザは、auto-populate based on previously specified data by the user を判断するために多くのヒューリスティックを使用します。 また、属性と各入力要素のオートコンプリート属性の両方を提供することで、 ブラウザにヒントを与えることができます。

たとえば、ユーザー名、電子メールアドレス、電話番号を使用してフォームを オートコンプリートするブラウザにヒントを与えるには、次のように使用します。

<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">

推奨入力name および autocomplete 属性値

autocomplete 属性値は現在の WHATWG HTML Standard の一部です。 一般に使用される autocomplete 属性は以下のとおりです。

autocomplete 属性はshippinggiven-name または billingstreet-addressなどのセクション名を伴うことができます。 ブラウザは、継続的なフォームではなく、異なるセクションを個別にオートコンプリートします。

コンテンツの種類 name 属性 autocomplete 属性
名前 name fname mname name
  • name (姓名)
  • given-name (名)
  • additional-name (ミドルネーム)
  • family-name (姓)
メールアドレス email email
住所 address city region province state zip zip2 postal country
  • 1 アドレス入力:
    • street-address
  • 2 アドレス入力:
    • address-line1
    • address-line2
  • address-level1 (州または県)
  • address-level2 (市)
  • postal-code (郵便番号)
  • country
電話番号 phone mobile country-code area-code exchange suffix ext tel
クレジットカード ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • cc-name
  • cc-number
  • cc-csc
  • cc-exp-month
  • cc-exp-year
  • cc-exp
  • cc-type

autofocus 属性

Google のホームページなどのフォームで、ユーザーが特定の フィールドだけを入力する場合など、autofocus 属性を追加できます。 設定した場合、デスクトップ ブラウザはすぐに入力フォールドにフォーカスを移動し、 ユーザーが簡単にすばやくフォームの使用を開始できるようにします。 モバイル ブラウザは autofocus 属性を無視し、キーボードがランダムに 表示されるのを防止します。

オートフォーカス属性を使用する際には注意してください。 キーボード フォーカスを妨げ、ナビゲーションに使用されるのバックスペース文字 を潜在的に防止するためです。

<input type="text" autofocus ...>

リアルタイム検証の実施

これらの属性を使用して、入力を検証します。

pattern 属性

pattern 属性は、 入力フィールドの検証に使用される 正規 表現 を指定します。 たとえば、米国の郵便番号 (5 桁の後に ダッシュと追加の 4 桁が続く場合がある) を検証するには、pattern を 次のように設定します。

<input type="text" pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>
一般的な正規表現パターン
説明 正規表現
住所 [a-zA-Z\d\s\-\,\#\.\+]+
郵便番号 (US) ^\d{5,6}(?:[-\s]\d{4})?$
IP アドレス (IPv4) ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$
IP アドレス (IPv6) ^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
IP アドレス (両方) ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
クレジット カード番号 ^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})$
社会保障番号 ^\d{3}-\d{2}-\d{4}$
北米電話番号 ^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$
required 属性

required 属性が存在する場合は、 フォームを送信する前に、フィールドに値が含まれている必要があります。 たとえば、郵便番号を必須にするには、 単に必須属性を追加します。

<input type="text" required pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>
minmax および step 属性

数値や範囲のような数値入力タイプ、および日付/時刻の入力については、 最小値と最大値を指定できるほか、 スライダまたはスピンボールによって調整されるときの増減刻み値を設定することができます。 たとえば、 靴のサイズの入力については、最小サイズを 1、最大サイズを 13、 刻み値を 0.5 に設定します。

<input type="number" min="1" max="13" step="0.5" ...>
maxlength 属性

maxlength 属性を使用すると、入力または テキストボックスの最大長を指定できます。この属性は、 ユーザが指定できる情報の長さを制限する場合に便利です。 たとえば、ファイル名の長さを 12 文字に制限する場合は、 次のように使用できます。

<input type="text" id="83filename" maxlength="12" ...>
minlength 属性

minlength 属性を使用すると、入力または テキストボックスの最小長を指定できます。この属性は、 ユーザが入力する必要のある最小長を指定する場合に便利です。 たとえば、ファイル名の最小長を 8 文字と指定する場合は、次のように使用できます。

<input type="text" id="83filename" minlength="8" ...>
novalidate 属性

フォームに無効な入力が 含まれている場合でも、フォームの送信をユーザに許可したい場合があります。 そうするには、フォーム 要素、または個々の入力フィールドに novalidate 属性を追加します。 その場合、すべての疑似クラスと JavaScript API では、依然としてフォームが正しいかどうかをチェックできます。

<form role="form" novalidate>
  <label for="inpEmail">Email address</label>
  <input type="email" ...>
</form>

JavaScript を使用した複雑なリアルタイム検証

組み込みの検証機能と正規表現で十分でない場合は、 Constraint Validation API を使用できます。 これは独自の検証を制御するための強力なツールです。 この API を使用すると、 独自のエラーの設定や、要素が有効かどうかのチェックなどの処理を実行でき、 要素が無効である理由を判定できます。

API 説明
setCustomValidity() カスタム検証メッセージ、および ValidityState オブジェクトのcustomError プロパティを trueに設定します。
validationMessage 入力が検証テストに失格した理由を示す文字列を返します。
checkValidity() 要素がすべての制約を満たす場合は true を返し、それ以外の場合は false を返します。 チェックから false が返されたときにページがどのように応答するかを決めるのは、開発者に任されています。
reportValidity() 要素がすべての制約を満たす場合は true を返し、それ以外の場合は false を返します。 ページから false が返される場合は、制約の問題点がユーザに報告されます。
validity 要素の有効性状態を表す ValidityState オブジェクトを返します。
カスタム検証メッセージの設定

フィールドが検証で失格になった場合は、setCustomValidity() を使用してフィールドを無効 とマークし、フィールドがエラーになった理由を説明します。 たとえば、サインアップ フォームでは、 ユーザに電子メール アドレスを 2 回入力させることで、そのアドレスが正しいことを確認させます。 2 回目の入力時に blur イベントを使用して 2 つの入力を検証し、適切な 応答メッセージを設定します。 例:

if (input.value != primaryEmail) {
  // the provided value doesn't match the primary email address
  input.setCustomValidity('The two email addresses must match.');
  console.log("E-mail addresses do not match", primaryEmail, input.value);
} else {
  // input is valid -- reset the error message
  input.setCustomValidity('');
}
無効なフォームの送信の禁止

フォームに 無効なデータが入力されている場合に、すべてのブラウザがユーザによるフォームの送信を禁止するわけではないため、送信イベントを捕捉し、フォーム要素で checkValidity() を使用して、フォームが有効かどうかを判定する必要があります。 例:

form.addEventListener("submit", function(evt) {
  if (form.checkValidity() === false) {
    evt.preventDefault();
    alert("Form is invalid - submission prevented!");
    return false;
  } else {
    // To prevent data from being sent, we've prevented submission
    // here, but normally this code block would not exist.
    evt.preventDefault();
    alert("Form is valid - submission prevented to protect privacy.");
    return false;
  }
});

フィードバックのリアルタイム表示

ユーザがフォームを送信する前に、 フォームが正しく入力されたかどうかを示す視覚的指示を各フィールドで提供するのが有用です。 HTML5 には複数の新しい疑似クラスも用意されています。これらのクラスを使用すると、入力値または属性に基づいて 入力をスタイル化できます。

疑似クラス 使用
:valid 入力値がすべての検証要件を満たすときに、入力のスタイルが使用されるよう明示的に設定します。
:invalid 入力値がすべての検証要件を満たさないときに、入力のスタイルが使用されるよう明示的に設定します。
:required 必須属性が設定された入力要素のスタイルを明示的に設定します。
:optional 必須属性が設定されていない入力要素のスタイルを明示的に設定します。
:in-range 値が範囲内にある数値入力要素のスタイルを明示的に設定します。
:out-of-range 値が範囲外にある数値入力要素のスタイルを明示的に設定します。

検証を即座に実行します。つまり、ページがロードされたとき、 ユーザがフィールドに入力する機会がなくても、 フィールドが無効とマークされる可能性があります。 また、ユーザが入力しているときに、 無効なスタイルが示されることがあります。 これを避けるために、CSS と JavaScript を組み合わせて、ユーザがフィールドを操作したときのみ、無効なスタイルを示すことができます。

input.dirty:not(:focus):invalid {
  background-color: #FFD9D9;
}
input.dirty:not(:focus):valid {
  background-color: #D9FFD9;
}
var inputs = document.getElementsByTagName("input");
var inputs_len = inputs.length;
var addDirtyClass = function(evt) {
  sampleCompleted("Forms-order-dirty");
  evt.srcElement.classList.toggle("dirty", true);
};
for (var i = 0; i < inputs_len; i++) {
  var input = inputs[i];
  input.addEventListener("blur", addDirtyClass);
  input.addEventListener("invalid", addDirtyClass);
  input.addEventListener("valid", addDirtyClass);
}