入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス

jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML：基本構造 フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="

[dreamily]

プログレスバーあり。エラー時にぶるぶるするのが可愛い。

[hidehish]

見てる:

[starneon3517]

エラーがあると、ﾌﾞﾙﾌﾞﾙ！

[caraldo_k]

ちょっと使いたいけど、戻れないのはなんとかなるかな？

[nors]

http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/

[hatatyu]

JQuery

[Donca]

✔ [JS]入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル

[hr07jp]

jQuery入力フォームアニメーション機能