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