使用できるフォーム フィールド
可能な限り最適なユーザー エクスペリエンスを提供するには、ユーザーが入力するデータに最も適した要素と要素 type を使用してください。
ユーザーがテキストを入力できるようにする
テキストを挿入するためのフォーム フィールドをユーザーに提供するには、<input> 要素を使用します。単語や短いテキストに最適です。長いテキストの場合は、<textarea> 要素を使用します。これにより、複数行のテキストを入力でき、要素をスクロールしてサイズを変更できるため、入力したテキストをユーザーが簡単に確認できます。
ユーザーが正しい形式でデータを入力できるようにする
ユーザーが電話番号を入力できるようにしますか？
<input> の type 属性を type="tel" に変更します。モバイル デバイスのユーザーには、適応型のオンスクリーン キーボードが表示されるため、電話番号をすばやく簡単に入力できます。
メールアドレスには type="email" を使用します。適応された画面キーボードが表示されます。required 属性を使用して、フォーム フィールドを必須にします。フォームが送信されると、ブラウザは入力に値があり、有効であることを確認します。この場合は、適切な形式のメールアドレスであることを確認します。
さまざまな入力タイプの詳細を確認する。また、組み込みの検証機能も提供します。
ユーザーが日付を入力できるようにする
次の旅行の開始日を教えてください。
ユーザーが日付を入力できるようにするには、type="date" を使用します。一部のブラウザでは、日付の入力方法を示すプレースホルダ（yyyy-mm-dd など）として形式が表示されます。
最新のブラウザにはすべて、日付選択ツールの形で日付を選択するためのカスタム インターフェースが用意されています。
ユーザーのオプション選択をサポートする
ユーザーが 1 つのオプションを選択または選択解除できるようにするには、type="checkbox" を使用します。複数のオプションを提供しますか？
ユースケースに応じて、さまざまな方法があります。まず、ユーザーが 1 つのオプションしか選択できない場合の解決策を見てみましょう。
type="radio" と同じ name 値を持つ複数の <input> 要素を使用できます。ユーザーにはすべてのオプションが一度に表示されますが、選択できるのは 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"> など）を選択するのが簡単な場合があります。その他の機能については、状況によって異なります。たとえば、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" に、パスワードを入力するためのカスタム インターフェースが表示されます。