Invention: Sequential Text Boxes

Windows does it when you’re entering your serial key right after installation, and online forms do it when you’re typing in your phone number, social security number, or zip code. Sometimes, online forms have multiple text boxes for numbers with multiple sets. Instead of the user manually tabbing or clicking over to the next text box to type, the developer can code up some “auto tabbing” JavaScript to move to the next text box automatically as you type in the numbers (Windows and Microsoft Office do this). Unfortunately, no one actually warns you when the form does this on its own. Many times users fill in the first set of numbers and hit the tab button manually only to find out the form tabbed over an extra time, resulting in them having to go back to the previous text box or accidentally filling in the wrong one.

If for some reason you absolutely MUST force users to enter sets of numbers that you are absolutely sure you know the formating of (like social security numbers, long serial keys to software that can’t be copy-pasted, or codes for the nukes) then go ahead and use one text field per set of numbers with auto tabbing in between. To let the user know that you have auto tabbing on, make the text boxes dashed in between sets of numbers by using simple css.

For the Default Dashed Text Box look (like above) insert the following into your css

/* CSS */
input {
border-bottom:1px solid #D4D0C8; /* needed for bug where buttom of last dashed line sticks out */
#left {
border-right: 1px dashed #929292;
width: 26px;
padding-left: 5px;
#mid {
border-right: 1px dashed #929292;
border-left: 1px dashed #929292;
width: 20px;
padding-left: 5px;
#right {
border-left: 1px dashed #929292;
width: 33px;
padding-left: 5px;

and match up the (left-mid-right) input text boxes with their CSS selectors (#left, #mid, #right) like this…

<input id="left" type="text" /> -
<input id="mid" type="text" /> -
<input id="right" type="text" />

If you want the border of the text boxes black like this…

then change the “input” selector in your CSS to this…

input {
border: 1px solid black;
background-color: #f8f8f8;

I came up with this solution a year ago while typing in my phone number somewhere but haven’t actually implemented it into any of my sites. I’ve never had to collect phone numbers before and even if I did I probably would have used one continuous text box for it, that way people can leave international phone numbers and numbers with lengthy extensions. But it would work great for social security numbers, exact length pin numbers, serial keys, etc…


  1. Mark says:

    Yes! Definitely this! Excellent solution.

  2. zimbatm says:

    Wouldn’t it make more sense to have a single input filed, but that enforces a particular structure inside of it ?

    In that case, the programmer is interested in having the full SSN, but also to be sure that it’s formatted correctly. It’s a bit like the date input fields, you could have separate year, month, day, but at the end you’re interested in the full date.

    • Yes, I think that’s what’s replaced multiple input fields, I’ve seen it and it’s a much more elegant solution. As you type in a single text box the “/” and “-” appear automatically to separate the numbers.

    • zimbatm says:

      Yes, I wonder if there is a good solution for structured text like that. It looks a bit like a placeholder with unmovable bits.

Leave a Reply

Your email address will not be published. Required fields are marked *