From the course: UX for Web Forms

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Input masks

Input masks - Adobe XD Tutorial

From the course: UX for Web Forms

Start my 1-month free trial

Input masks

- [Instructor] It is not good practice to slice fields when asking for phone numbers or data bursts. Sliced fields force the user to unnecessarily make additional clicks to move into the next field. Instead, it's better to have one single field with clear formatting guidelines in the placeholder or as code hinting. The best solution however, is to use an input mask. Let me show you what that looks like. Input field masking is a technique that helps users format inputted text. A mask appears once a user focuses on a field and begins to type. If I go into the phone number field and I start to type the first three characters of the phone number, you'll see that a parentheses appears on the left hand side. As soon as I enter the next three numbers, the closing parentheses appears and if I continue to type in the phone number with the following numbers, you can see that the dash appears between the second and third set…

Contents