必須項目マーク付きラベル
入力ラベルの右に赤い「必須」バッジを添えた、フォームの必須項目表示です。ラベルを display:flex と align-items:center で横並びにし、 span のバッジに背景色・白文字・角丸・ letter-spacing を与えてはっきり目立たせています。
解説
入力ラベルの右に赤い「必須」バッジを添えた、フォームの必須項目表示です。ラベルを display:flex と align-items:center で横並びにし、span のバッジに背景色・白文字・角丸・letter-spacing を与えてはっきり目立たせています。入力欄は :focus でボーダー色が変わり、操作中の項目が分かるようにしています。CSS のみで JS は不要です。
使いどころ
- お問い合わせ・資料請求フォームの必須欄
- 会員登録や申込みの入力項目
- 予約フォームで未入力を防ぎたい欄
バッジの文言は「必須」でも「*」でも自由に変えられ、色は background で調整します。注意点として、色だけに頼らず「必須」という文字も併記しているのは、色覚特性のある人にも伝えるための配慮です。さらに丁寧にするなら、入力欄に required 属性や aria-required="true" を付け、ラベルと for／id を関連付けると、スクリーンリーダーにも必須であることが正しく伝わります。必須・任意のどちらを明示するかはフォーム全体で統一しましょう。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
「必須」の代わりに「*」を使えますか
使えます。span の中身を * に変えるだけです。記号のみだと意味が伝わりにくい場合があるため、フォーム冒頭に注記を添えると親切です。
アクセシビリティ上の注意はありますか
色だけでなく文字でも必須を示すこと、入力欄に required や aria-required を付けること、ラベルと入力欄を for と id で関連付けることをおすすめします。