名前入力フォーム

ラベルを付ける

label 要素により、input のラベルを明示することができます。id と for 属性で関連付けることができます。

ラベルテキストと input 要素をまとめて label でくくることで、id 属性を省略することができますが、その場合、IE11ではアクセシビリティAPIにラベルの内容が意図したとおりに伝わりません。面倒でも id と for 属性を使うとより堅牢になります。

必須項目の場合

必須項目の場合、ラベル内には「必須」を明示しておくといいでしょう。「※」や色のみで必須を表現するケースがありますが、それでは情報としては伝わりません。なお、label 要素の子孫には、div などのフロー・コンテンツを含めることができませんので、ラベル内で装飾やレイアウトが必要な場合は span で区切ります。

必要に応じて required 属性を明示すると、フォーム送信前にブラウザーが入力の有無をチェックしてくれます。

名前形式の処理

姓と名を明示的に分ける必要（データベースの都合など）がなければ、名前の入力は、一つの input 要素で実現します。名字と名前を入力するときにそれぞれでフォーカスを移動するのはユーザーにとって負担ですし、ミドルネームがある場合にも対応できます。

説明文や入力のヒント

input 要素には入力例を示す placeholder 属性を追加することもできます。placeholder があるとユーザーが入力時に、入力形式の判断に役立ちますが、以下の理由で利用はおすすめできません。

• placeholder の文字色は背景に対して目立たない色を利用する場合がほとんどですが、それでは色のコントラスト比が小さすぎますし、目立つ色にすると実際の入力値に見えてしまいます。参考: WCAG 1.4.3
• IE11では、アクセシビリティAPIにplaceholderの内容がラベルとして情報が伝わってしまいます。

入力例は、別箇所にテキストで明示しておくといいでしょう。aria-describedby属性でinput要素と紐付けることができます。

オートコンプリートを利用可能にする

autocomplete属性に"name"を指定した場合、ブラウザの自動入力が作用しユーザーの入力負荷を軽減することができます。id属性値またはname属性値に"name"を設定してもブラウザによってはautocomplete属性と同様の挙動を期待できますが、id属性やname属性は要件に応じてname以外を設定する必要があるため、自動入力補助にはautocompleteを利用しましょう。

なお、ここではname属性、id属性、autocomplete属性に同じ値を設定していますが、name属性は送信データのキーとして利用、id属性はaria属性の参照などに利用、autocompleteは自動入力補助に利用されるという違いがあります。

なお、autocomplete属性に指定できる値は、HTML仕様内の4.10.18.7 Autofillで定義されています。

文字サイズを16px以上にする

input 要素に文字サイズを 16px 未満にしてしまうと、iOS でinput要素をフォーカスしたときに自動画面拡大されます。input 要素の文字サイズは 16px 以上にしておくといいでしょう。