使用できるフォーム フィールド
可能な限り最高のユーザーエクスペリエンスを提供するため
ユーザーが入力するデータに最も適した 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="files"> を使用します。<input type="file" multiple> を使用します。<input type="multiple-files"> を使用します。type="text" と type="password" の違いは何ですか？
type="password" のパスワード入力用に調整された画面キーボードが表示されています。type="password" を使用すると、入力したすべての文字がアスタリスク（*）またはドット（•）で隠されます。type="password" のパスワードを入力するためのカスタム インターフェースが表示されています。