HTML 要素の属性を使用すると、<form> とフォーム コントロールを強化できます。
ユーザーがフォーム コントロールに入力できるようにする
ユーザーがフォームに入力しやすくするには、<input> 要素に適切な type 属性を使用します。
ブラウザには、date タイプの <input> の日付選択ツールなど、type に適したユーザー インターフェースが表示されます。モバイル デバイスのブラウザには、type="tel" 用の電話番号キーパッドなど、調整された画面キーボードが表示されます。
一部の <input> タイプでは、フォームの送信時に要素の検証ルールも変更されます。たとえば、<input type="url"> は空でなく、値が URL の場合にのみ有効です。
ユーザーがデータを入力できるようにする
タッチデバイスに適切な画面キーボードを提供するには、さまざまな属性があります。最初のオプションは、前述のように type 属性を使用することです。
もう 1 つのオプションは、Android と iOS でサポートされている inputmode 属性です。type 属性とは対照的に、inputmode 属性は、要素自体の動作ではなく、提供される画面キーボードのみを変更します。inputmode は、<input> のデフォルトのユーザー インターフェースとデフォルトの検証ルールを維持しつつ、画面キーボードを最適化したい場合に適しています。
enterkeyhint 属性を使用して、画面キーボードの Enter キーを変更できます。
たとえば、enterkeyhint="next" や enterkeyhint="done" は、ボタンラベルを適切なアイコンに変更します。これにより、ユーザーが現在のフォームを送信するとどうなるかがわかりやすくなります。
ユーザーがフォームを送信できるようにする
たとえば、<form> に記入して [送信] ボタンをクリックしても、何も起こらないとします。
この問題は、disabled 属性でボタンが無効になっていることが原因の可能性があります。フォームが有効になるまで [送信] ボタンを無効にするのは、一般的なパターンです。
理論上は理にかなっているように思えますが、完全で有効なユーザー入力を待機している間は [Submit] ボタンを無効にしないでください。代わりに、入力時に無効なデータをハイライト表示し、フォーム送信時に問題のあるフィールドをハイライト表示します。
ただし、フォームが正常に送信されたものの、まだ処理が完了していない場合は、[送信] ボタンを無効にすることをおすすめします。詳しくは、無効になっているボタンについての記事をご覧ください。
ユーザーが以前に入力したデータを表示することでユーザーをサポートする
複数のステップからなる購入手続きフォームがあるとします。
ユーザーが前のステップに戻ったときに、以前に入力した値が引き続き存在するようにするにはどうすればよいでしょうか。
すでに完了している値を表示するには、value 属性を使用します。
<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">
JavaScript でフォーム コントロールの値を取得するには、複数の方法があります。
value プロパティを使用するか、getAttribute('value') を使用して値にアクセスできます。大きな違いが 1 つあります。value プロパティは常に現在の値を返し、getAttribute() を使用すると常に初期値が返されることです。
ぜひお試しください。
名前フィールドのテキストを変更し、コンソールを確認します。value プロパティは現在表示されているテキストを返し、getAttribute('value') プロパティは常に初期値を返すことに注意してください。
詳しくは、DOM 属性と DOM プロパティの違いをご覧ください。
checkbox 型または radio 型の <input> 要素には checked 属性を使用します。ユーザーがオプションを選択した場合は追加し、それ以外の場合は削除します。
想定される形式をユーザーが理解できるようにする
placeholder 属性の値は、どのような情報が要求されるかのヒントです。
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">
この場合、フォーム コントロールが事前入力されているように見えるのはわかりにくいため、ユーザーを混乱させる可能性があります。さらに、プレースホルダを追加すると、どのフォーム項目にまだ入力が必要かがわかりにくくなる場合があります。 さらに、プレースホルダ テキストのデフォルトのスタイルは読みにくい場合があります。
一般に、placeholder 属性を使用するときは注意してください。また、フォーム コントロールを説明するために placeholder 属性を使用しないでください。代わりに <label> 要素を使用してください。
詳しくは、placeholder 属性の使用を検討すべき理由をご覧ください。
どのような情報が求められるかをユーザーに示すには、フォーム コントロールの下に HTML 要素を追加して、説明や例を追加するのがよいでしょう。
フォーム コントロールの検証の準備ができていることを確認する
組み込み検証を有効にするために使用できるさまざまな HTML 属性があります。空のフィールドが送信されないようにするには、required 属性を使用します。type 属性を使用すると、追加の検証を適用できます。たとえば、必須の <input> の値 type="url" は URL にする必要があります。
ユーザーが最小限の文字数を入力できるようにするには、minlength 属性を使用します。
最大文字数を超える値を禁止するには、maxlength 属性を使用します。
数値入力タイプ（<input type="number"> など）の場合は、代わりに min 属性と max 属性を使用します。
検証の詳細: ユーザーがフォームに正しいデータを入力できるよう支援する
理解度をチェックする
フォーム属性に関する知識をテストする
画面キーボードの Enter キーのラベルを変更するには、どの属性を使用しますか。
enterkeyenterkeyhintenterkeytextenterkeylabelvalue プロパティと getAttribute('value') の違いは何ですか。
value プロパティは現在の値を返し、getAttribute('value') は初期値を返します。value プロパティは初期値を返します。getAttribute('value') は現在の値を返します。value プロパティはキーと値を返し、getAttribute('value') は値のみを返します。