[UIデザイン] HTML/CSS/Javascriptで作成するおしゃれなパスワード入力フォーム5選

今回は、HTMLやCSS、Javascriptで作成するおしゃれなパスワード入力フォーム（input要素）を紹介します。

パスワード入力は、アカウント作成を行うWebサービスでは欠かせないアイテムとなっています。

この要素をおしゃれに見せることで、ユーザへの印象が変わってきます。特にセキュリティの観点からパスワードが画面に表示されないようにシークレット化するのはデフォルトとなっています。

おすすめパスワード入力フォーム5選

全体的に紺色ベースのサインインフォームとなります。基本的にパスワードの文字は非表示にしており、右側の目のアイコンをクリックするとパスワードを表示します。

アカウント登録時のパスワード入力制限をおしゃれに表現しています。小文字/大文字/数字/8文字以上を満たしているかどうかをここではチェックしています。

Vue.jsを利用して作成したパスワードジェネレータです。
長さや記号の有無だけでなく、含める数などを指定できるほか、セキュリティの強弱まで表現されています。

パスワードの強さを資格的に表現したシンプルなパスワードフォームとなります。javascriptでボーダーの色などは制御されており、コードも難易度が低いので、取り入れやすいと思います。

かなりシンプルなパスワードフォームです。
Simple is the best!! とはこのことと言えるほど、シンプルでかつおしゃれなフォームです。

今回はパスワードフォームに関する紹介でした。
アカウント登録などの画面を作成する際など、参考にしてみてください。