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