A Collection of Unique Password Field & Form Utility Code Snippets

If your website enables users to have their own accounts, then passwords are an important part of both security and the UI. You’ll certainly want users to adopt strong passwords to make things more difficult on hackers. But there are also some little touches you can add to a password field that improve usability. Plus, you wouldn’t want to treat your login area as an afterthought.

Perusing the archives of CodePen, there are a number of password-related snippets worth checking out. Below, you’ll find a combination of attractive, unique and useful items that range from simple password fields to utilities that will generate secure passwords for your users.

Checking Password Requirements

One of the most frustrating situations for a user is when a password isn’t strong enough, but it isn’t clear what they need to do in order to meet the requirement. Here we have a field that uses JavaScript in conjunction with a listing of requirements to automatically “check off” each item as you type. This pen is actually a few years old, but still a great example of providing users with the information they need.

Show Me

When we’re creating complicated passwords, it can be quite useful to see what it is we’re typing. So often, fields that offer this feature do so with an eyeball icon or some other non-verbal method. What’s nice about this particular login form is that it actually says “Show Password” on the password field toggle. It’s never a bad idea to make things as obvious as possible.

The Password Genie

There are plenty of choices out there if you want to randomly generate a password. But what makes this Vue.js example so cool is that you have a user-friendly options panel for selecting length, number of digits and symbols. There’s also a real-time strength meter, the ability to generate password after password and click-to-copy functionality. What else could you possibly need?

Wrong Password? Get Outta Here

Micro-interactions are sort of a big deal these days, and this password field uses them in a creative manner. Enter in the wrong password and the lock icon swings, pendulum-like, and “kicks” the invalid entry away. It’s mainly for fun, but interesting nonetheless.

Create Passwords in Bulk

If you’re in a situation where you need to generate several passwords, you will love the functionality of this example. Set the number of passwords you want to generate, how many characters they should be and even list the characters you want the generator to use. And, oh yeah, you can even save your password list as a text file or print it out. What a time saver!

Confirm and Validate

In scenarios where a user is either registering or changing their password, adding a second confirmation field is pretty standard practice. This form takes it a step further by adding several features, including the ability to show/hide the input text, a strength meter and a check to make sure the password in both fields match. The only suggestion here would be to also display the requirements for a “strong” password.

Super-Secret

When you combine interesting design and solid functionality, you’re on to something good. This password generator offers up a great mix. It can be configured by clicking the various icons at the bottom of the form (the features do work in the example) – that’s the functionality portion. The UI is also very slick, using animation to make the whole experience feel more interactive.

Just Like the Movies

This last selection is purely for entertainment purposes. This pen is a tribute to all of those movies and television shows that have made password cracking look like a futuristic endeavor. To use it, just click as the random characters pass by – once for each spot in the password. The result is a fully “cracked” password!

Password: Protected

There you have it, a mix of password fields that can enhance the usability and maybe even the security of your next project. Not to mention some interesting password generation tools that can help you create better passwords and do so in short order. Now, just don’t share them with anyone ;)

The post A Collection of Unique Password Field & Form Utility Code Snippets appeared first on Speckyboy Web Design Magazine.