HTML 要素の属性を使用すると、<form> とフォームのコントロールを強化できます。
フォーム コントロールの入力をサポートする
ユーザーがフォームに入力しやすくするため
<input> 要素に適切な type 属性を使用します。
ブラウザには、type に適したユーザー インターフェースが表示されます。
たとえば、date 型の <input> の日付選択ツールなどです。
モバイル デバイスのブラウザには、適切な画面キーボードが表示されます。
type="tel" の電話番号のキーパッドなど。
一部の <input> 型では、フォームの送信時に要素の検証ルールも変更されます。
たとえば <input type="url"> は、空ではなく、値が URL の場合にのみ有効です。
ユーザーがデータを入力することを確認する
タッチデバイスで適切な画面キーボードを提供するには、さまざまな属性があります。
最初のオプションは、前述のように type 属性を使用することです。
もう 1 つのオプションは、inputmode 属性です。
Android と iOS。
type 属性とは異なり、inputmode 属性は画面キーボードのみを変更します。
要素自体の動作ではありません。次のような場合は inputmode の使用をおすすめします。
<input> のデフォルトのユーザー インターフェースとデフォルトの検証ルールはそのまま維持するが、
最適化された画面キーボード。
enterkeyhint 属性を使用すると、画面キーボードの Enter キーを変更できます。
たとえば、enterkeyhint="next" または enterkeyhint="done" は、ボタンラベルを適切なアイコンに変更します。
これにより、現在のフォームを送信するとどうなるかがわかりやすくなります。
ユーザーがフォームを送信できるようにする
<form> を入力して [Submit] ボタンをクリックしても、何も起こらないとします。
disabled 属性でボタンが無効にされている可能性があります。
フォームが有効になるまで [送信] ボタンを無効にするのが一般的なパターンです。
理論上は理にかなっているように聞こえますが、処理を待っている間は [Submit] ボタンを無効にしないでください。 完全かつ有効なユーザー入力です代わりに、入力時に無効なデータをハイライト表示し、 問題のあるフィールドがユーザーに提示されます。
ただし、フォームが正常に送信されると [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') は値のみを返します。