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