任意項目タグ付きラベル

解説

入力ラベルの右に控えめな「任意」タグを添えて、入力が必須でない項目を示すフォーム表示です。必須マークが背景色のベタ塗りで強く見せるのに対し、こちらは background:transparent と細い border、グレー文字で目立たせず、必須項目との優先度差を視覚的に表現しています。ラベルは flex で横並び、入力欄は :focus でボーダー色が変わります。CSS のみで JS は不要です。

向いている場面

• 電話番号や会社名など、任意で入れてもらう欄
• 必須項目が多いフォームで負担感を減らしたいとき
• アンケートの自由記述など埋めなくてよい項目

タグの文言や枠線色は自由に変えられます。運用のコツとして、必須が多いフォームでは「必須」を全項目に付けるより、少数の任意項目だけに「任意」を付けるほうがすっきり見えます。逆に任意が多ければ必須側を明示します。どちらの方式でもフォーム内で統一することが大切です。色の薄いタグは背景とのコントラストが下がりやすいので、グレーが薄すぎて読みにくくならないか確認してください。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録