Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Input masks

From: Web Form Design Best Practices

Video: Input masks

There are a number of situations where we need a specific format or structure for the questions we ask people. When we do so, we want to try and prevent the errors that they can make. A technology that helps us along is Input Masks. To talk about Input Masks let me first illustrate the different ways we can ask people for an input. We can: One (1) give them a blank text input and ask them to specify the information in a particular way, so at the top when we ask for Phone Number here, you can see there is a single input field and then the structure of format that we need in help text to the right.

Input masks

There are a number of situations where we need a specific format or structure for the questions we ask people. When we do so, we want to try and prevent the errors that they can make. A technology that helps us along is Input Masks. To talk about Input Masks let me first illustrate the different ways we can ask people for an input. We can: One (1) give them a blank text input and ask them to specify the information in a particular way, so at the top when we ask for Phone Number here, you can see there is a single input field and then the structure of format that we need in help text to the right.

We can also enforce a very strict structure by dividing the phone number into a number of input fields The first one will only take three characters, the second one three and the last one four, or we can provide a single input field and accept any of the valid ways the Phone Number can be answered. Now this requires a little bit of work on our end to determine if the answer that they enter is actually valid or not, but it gives people the flexibility of providing an answer in the format they see fit. One of the questions that come up there when we apply this Flexible Style to an input field is, how will I know what the right format is, and can we help people with some tips to let them know they're moving in the right direction? Input Masks can do that and more.

Here's an example of a simple Input Mask at play. You'll see that there is a label e-mail address and a little bit of help text inside the field telling people the format that they need to respond with. In this case an e-mail address that ends in @me.com. Now when I start to enter an Email Address into this field, the Input Mask will actually keep the format intact as I provide my answer. So note, I enter an S the @me sticks around, I enter a T the @me sticks around, and so on, as I go through entering my e-mail address If I were to type an @, the Mask can simply ignore that field and move me on.

So no harm done if I type @me.com, it's not going to be duplicated into input field, because the Input Mask ignores it. This again maintains a consistent structure and helps to cut down on errors. In fact, I can't really make much of an error here at least with the @me.com part. I can still provide a wrong Email Address, but, hey, we can only do so much, right? Now input masks are used in a lot of native applications on mobile. So we can see here an Input Mask doing the exact same thing inside the iPhone address book.

I type in an l, luke and the @me sticks around. Google's Android system also uses Input Masks, but it uses a little bit of a different technique to enforce the formatting required. Here after I enter my Username in the Username field and move onto the next input of Password, an @gmail.com format is appended at the end. This sort of formatting after the fact isn't as effective as keeping that formatting upfront, but it's different enough that it begs the question" What's the right way to do Input Masks, should we be doing it the way iOS is, or the way Android is? Since in the Web browser we actually need to implement these Input Masks ourselves using JavaScript, there really isn't native support yet.

We need to know the details that make an Input Mask work. So let's look at that and we'll start by looking at a counter example. In this case entering the Phone Number fields. You'll see that again there's a little bit of help and tips inside the input field indicating what the format of the Phone Number could be. Now let's start actually entering the Phone Number in here. Wow, that's a pretty big difference when the format that was promised. In fact, as I go along entering this Phone Number, you'll see that the formatting gradually starts to reveal itself from parentheses to dashes (--) to , all of this format just sort of shows up as I go along.

I call this approach the gradual reveal. We're not going to tell you what kind of format you actually need to use, we're just going to have it pop up as you go along. This can be pretty disconcerting, kind of like somebody grading or changing your answer to a test, as you're providing the answer. The other problem with this approach is that the expectations that are set with the Input Mask are quite different from what happens in the actual result. The format promise at the bottom is not the one that you end up with above. So instead, as a good example, let's look at providing a Tax ID.

Here, the format that we see upfront is the one that sticks with us throughout the process of answering this question. So as I start entering numbers, the dashes (--) and the format stays in place. It's important to also now that this Input Mask can do a lot more than just enforce a format It can strictly require me to use numbers, and if I use an alpha character such as A, B or C, it can ignore that, knowing that only numbers constitute a valid tax ID. Again, if I insert a dash (-) or slash (/) or a space , it can assume I meant dash and just use that character, thereby preventing me from making errors.

So maintaining a consistent format is a really good way to start with the right expectations and keep them as you go through the form The other interesting factor here is not making that input field to look like an answer upfront. So you'll see that what we were using is underscores (_) and dashes (--) that indicate what the format is going to be, without actually providing values that look like an answer Having fields look like they have an answer within them, is a good way to get people to ignore them, assuming that that answer has already been provided for them. So the more you can make your Input Mask format look like a question rather an answer, the better you'll be at prompting people to actually provide the answer you need.

Looking at Input Masks in general, I think there are very viable technologies, especially on mobile devices for helping people prevent errors and provide the kinds of formats you need. By being very fault tolerant, allowing characters to be ignored and maintaining a consistent format that you can see throughout the process, Input Masks give people a way to provide strictly formatted inputs with confidence and a bit more precision When you do use Input Masks though, make sure that you provide that structure upfront and not change it people as they go along through a gradual reveal.

Also try to avoid cryptic Input Masks, that give people more information than they actually need. Generally, something that looks like a question is enough with the format that works. There is no need to get into the specifics of whether you support numerical characters, alphanumerical characters, punctuation points and all that, just use what people's expectations are with the type of question you're asking.

Show transcript

This video is part of

Image for Web Form Design Best Practices
Web Form Design Best Practices

30 video lessons · 12773 viewers

Luke Wroblewski
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Form Design Best Practices.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.