There is a well known thesis saying that “the language we use, shapes the world we live in.” It’s almost common knowledge nowadays, but still every now and then it comes to us as a surprise. Most often it comes from the gap between a very loose way we use some words every day and their precise meaning in science e.g. Information Theory.

Imagine this task: prepare a form for some simple credit card transaction. You think: name, expiration date, CVV and voilá, the coffee is on the way. And then you’re surprised, when in the middle of the night a mysterious bug comes. Logs show that some CVVs come as two digits instead of three. Transactions get canceled, your clients move to another provider. How come?

The answer is simple: digit is not a number. Okay, but what actually happened? Some browsers implemented number type of input element very precisely. Number for them means number e.g. something you can do math on that is represented by digits in decimal system. In this case all zeros at front of the CVVs were trimmed, so user’s input 097 became a decimal number 97. As simple as that.

From the Information Theory point of view, CVV is not a number at all. It’s a string with characters narrowed to only digits. It looks like a number, but it definitely doesn’t quack like a number—you sort it alphabetically, you can’t do math on it and you can’t make it compact. 1 is always 001, because CVV is the “three digits on the back of your credit card.”

This distinction between numbers and digits-only strings is quite common in software industry. Think of all spreadsheet applications. If you want to put some number-looking strings into the cell, you have to prefix it with an apostrophe. Otherwise, some applications will trim all zeros at front, probably color it differently from the rest of the strings in the document and adjust it to the right. That’s how numbers work.

Another common pattern is present in CSV files, where number-looking strings should be quoted (just like other strings). This practice is broken very often and then when you import the file into Excel magic happens. My favorite example is temporal data with ‘Hour’ column coded as four digits. Suddenly ‘half past one’ (i.e. string 0130) becomes a number 130.

Let’s go back to HTML5. You probably wonder, what’s the solution for the CVV problem. Actually, there’s is none. There is only a well known work-around called… text input. It gives you the string as an outcome, nothing is trimmed, all works well. You feel like back to 2006? Sure. And what’s even more frustrating, you can’t force a mobile device to use the numeric keyboard with this solution, so your users will get a bloody QWERTY!

There’s another way, though: use tel input type. It launches the numeric keyboard on mobile and doesn’t trim the string, so it seems like being almost there. Unfortunately, the downside is that it lets users type some additional non-digit characters like asterisk or plus sign. In practice, it means that even though it’s definitely better solution for the mobile first era, you won’t go without a few lines of JavaScript.