メールアドレス入力フォーム

ラベルを付ける

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

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

必須項目の場合

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

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

メールアドレス形式の処理

メールアドレスのローカル部とドメイン（つまり、メールアドレス全体で）を一つの input 要素で実現します。また、type属性はemailとします。これにより:

• ブラウザの自動バリデーションが作用します
• スマートフォンなどの仮想キーボードの形状がメールアドレス入力しやすいモードになります

また、ブラウザの自動入力は、ローカル部とドメインで区切って管理されてないので、これを分けてしまうと自動入力の結果が意図しない状態になってしまいます。余談ですが、ブラウザーの自動バリデーションが不要な場合には、<form novalidate>のように、formタグにnovalidate属性を付与します。

説明文や入力のヒント

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

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

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

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

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

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

「フォームの内容」として送信する場合には、サーバ側のプログラムに応じたname属性も設定するようにしましょう。

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

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