フォームをおしゃれに!CSSだけで実装できるおしゃれフォームのアニメーション

フォームの最適化(EFO)のための施策は色々とありますが、その中でもjQueryができない人でもできる簡単なフォーム最適化の方法を紹介します。

普段のフォームがなんだか味気ないと感じる方はぜひお試しあれ!少しの手間で入力が楽しくなるおしゃれなフォームが作成できますよ。

サンプルとコード

See the Pen GWrBMb by hideaki_fujii (@hideaki_fujii) on CodePen.


フォームを選択してみて下さい。inputの中のテキストがアニメーションしながらツールチップに変化しますね。

親要素のp.surrInputをposition:relativeに設定してlabelをabsoluteでinputの中に表示しています。この時にプレースホルダー属性(デフォルトで書いてあるやつ)をつけるとlabelのテキストとプレースホルダーのテキストが重なって見えてしまうのでかかないよう注意して下さい。

またinputのid属性、labelのfor属性をそれぞれ付与し、同じ名前で紐付けて下さい。

この処理を行わないとユーザーがフォームを選択しようとした際にマウスでlabelのテキスト上を押しても入力することができません。

※codepenで表示する都合上、不要なcssも記述してあります。containerに対するcssは無視してください。

説明は以上です。

これならjqueryでリアルタイムバリデーションを行わずとも入力の段階でユーザーに注意を促せるので、ある程度はユーザーにスムーズにフォームを入力していってもらうことができそうです。

参考記事

NxWorlDさんの記事を参考にしました。こちらの記事はフォーム周りのCSSで便利な技が色々と紹介されていて大変重宝しています。ありがとうございます!

http://www.nxworld.net/tips/15-useful-css-snippets-in-form-style.html

webliker
トップへ戻る