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
キーのラベルを変更するには、どの属性を使用しますか。
enterkey
enterkeyhint
enterkeylabel
enterkeytext
value
プロパティと getAttribute('value')
プロパティの違いは何ですか。
value
プロパティは現在の値を返し、getAttribute('value')
は初期値を返します。value
プロパティは初期値を返し、getAttribute('value')
は現在の値を返します。value
プロパティはキーと値を返し、getAttribute('value')
は値のみを返します。