フォーム項目の詳細

可能な限り最高のユーザーエクスペリエンスを提供するため ユーザーが入力するデータに最も適した 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" のパスワードを入力するためのカスタム インターフェースが表示されています。

リソース