フローティングラベル入力フォーム
これは入力するとラベルが枠の上へすっと移動するフローティングラベル付きフォームです。JavaScript は使わず、CSS だけで実現しています。仕組みの肝は input に半角スペースの placeholder を置き、 :not(:placeholder-shown) でユーザーが何か入力した状態を判定する点で…
解説
これは入力するとラベルが枠の上へすっと移動するフローティングラベル付きフォームです。JavaScript は使わず、CSS だけで実現しています。仕組みの肝は input に半角スペースの placeholder を置き、:not(:placeholder-shown) でユーザーが何か入力した状態を判定する点です。フォーカス時、または値が入っている時にラベルの top と font-size を縮めて上に上げ、transition で滑らかに動かします。フォーカスすると枠線とラベルの色が #0066cc に変わり、入力中の場所が一目で分かります。
使う場面
- 会員登録やお問い合わせなど項目数を抑えたいフォーム
- 限られた余白で見出しと入力欄を兼ねたいモーダル内のフォーム
- すっきりした見た目を保ちつつ各欄の意味を伝えたいとき
カスタマイズはアクセントの #0066cc をブランド色に変えるところから。label は for 属性で input と結ばれており、クリックで欄に移れて読み上げにも項目名が伝わります。注意点として、placeholder は判定の仕掛けに使っているので案内文を入れず空白のままにし、補足が必要なら別途ヒント文を添えてください。JavaScript なしで動く分、軽量で導入も簡単です。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
このフォームは JavaScript なしで動きますか？
はい、ラベルの移動はすべて CSS で完結しています。placeholder を空白にして :not(:placeholder-shown) で入力有無を判定しているため、スクリプトは不要です。
placeholder に案内文を入れてはいけないのですか？
このサンプルでは placeholder の空白がラベル制御の仕掛けになっています。文字を入れると常に入力済みと判定されラベルが下りなくなるので、案内はヒント文として別に添えてください。