使用できるフォーム フィールド
可能な限り最高のユーザーエクスペリエンスを提供するため
ユーザーが入力するデータに最も適した type
要素を使用するようにしてください。
テキスト入力のサポート
テキストを挿入するためのフォーム フィールドをユーザーに提供するには、<input>
要素を使用します。
1 つの単語や短いテキストに適しています。
長いテキストには <textarea>
要素を使用します。
複数行のテキストができ、
要素はスクロールとサイズ変更が可能であるため、入力したテキストが見やすくなります。
ユーザーが正しい形式でデータを入力していることを確認する
ユーザーが電話番号を入力できるようにしたいですか?
<input>
の type
属性を type="tel"
に変更します。
モバイル デバイスでは、画面キーボードが自動的に調整され、
電話番号をすばやく簡単に入力できるようにしました
メールアドレスの場合は、type="email"
を使用します。
これも適切な画面キーボードです。
required
属性を使用して、フォーム フィールドを必須にします。
フォームが送信されると、ブラウザは入力に値が含まれていることと、その値が有効であることを確認します。この場合は、
正しい形式のメールアドレスであることを証明する
必要があります
さまざまな入力タイプの詳細を確認する。 これらには組み込みの検証機能も用意されています。
日付の入力をサポートする
次の旅行の開始はいつ頃をご希望ですか?
ユーザーが日付を入力できるようにするには、type="date"
を使用します。
一部のブラウザでは、形式が yyyy-mm-dd
などのプレースホルダとして表示されます。
日付の入力方法が示されています
最新のブラウザはすべて、日付選択ツールの形式で日付を選択するためのカスタム インターフェースを備えています。
ユーザーがオプションを選択できるようサポートする
ユーザーが選択肢から 1 つを選択または選択解除できるようにするには、type="checkbox"
を使用します。
複数の選択肢を用意しますか?
ユースケースに応じて、さまざまな代替手段があります。
まず、ユーザーが 1 つのオプションしか選択できない場合の解決策を見てみましょう。
type="radio"
と同じ name
値を持つ複数の <input>
要素を使用できます。ユーザーはすべての選択肢を一度に確認できますが、選択できるのは 1 つのみです。
もう 1 つの方法は、<select>
要素を使用することです。
ユーザーは利用可能な選択肢の一覧をスクロールして、いずれかを選択できます。
数値の範囲の選択などのユースケースでは
range
タイプの <input>
が適しています。
複数のオプションを選択できるようにする必要がありますか?
multiple
属性を含む <select>
要素を使用するか、checkbox
型の <input>
要素を複数使用します。
また、<input>
を <datalist>
要素と組み合わせて使用することもできます。
これにより、テキスト フィールドと <option>
要素のリストの組み合わせが得られます。
ユーザーがさまざまな種類のデータを入力できるようにする
特定のユースケースには、他にも入力タイプがあります。
タイプ color
の <input>
があります。これは、サポートされているブラウザでユーザーにカラー選択ツールを提供します。
他にもさまざまなタイプがありますユーザーがパスワードを入力できるようにするには、<input>
を使用します。
type="password"
に置き換えます。入力したすべての文字はアスタリスク(「*」)またはドット(「•」)で囲まれ、
パスワードを読み取れないようにします。
フォームデータに一意のセキュリティ トークンを含めますか?
type="hidden"
で <input>
を使用します。
hidden
型の <input>
の値は、ユーザーが確認または変更することはできません。
ユーザーがファイルをアップロードして送信できるようにするには、<input>
と type="file"
を使用します。
特殊なユースケースの場合は、カスタム要素を定義することもできます。 適切な組み込み要素や型がない場合
フォームの入力をサポートする
多数のフォーム要素と型がありますが、どれを選択すべきでしょうか。
ユースケースによっては、適切な要素とタイプを簡単に選択し、
<input type="date">
など。それ以外の場合、状況によって異なります。
たとえば、複数の <input>
要素を type="checkbox"
要素や <select>
要素とともに使用できます。
詳しくは、リストボックスとプルダウン リストの選択についての記事をご覧ください。
通常は 実際のユーザーでフォームをテストして、最適なフォーム要素とタイプを見つけます。
理解度をチェックする
フォームの各項目に関する知識をテストする
フォーム コントロールで複数のファイルをアップロードすることはできますか?
<input type="multiple-files">
を使用します。<input type="files">
を使用します。<input type="file" multiple>
を使用します。type="text"
と type="password"
の違いは何ですか?
type="password"
を使用すると、入力したすべての文字がアスタリスク(*
)またはドット(•
)で隠されます。type="password"
のパスワード入力用に調整された画面キーボードが表示されています。type="password"
のパスワードを入力するためのカスタム インターフェースが表示されています。