Forms are an integral part in many web apps - registering a new user, logging into an existing one, collecting payment methods, subscribing to newsletters, and much more.
On both mobile and desktop, we'd like to help the user fill these forms in the easiest and most intuitive manner as possible. On desktop it's mostly by setting the type and autocomplete attributes correctly, as we're using an actual keyboard. On mobile it's even more crucial, as the keyboard is virtual and the screen is smaller.
Let's create an initial form, that collects the user's details and payment method.
<form>
<h2>Details</h2>
<input name="first_name">
<input name="last_name">
<input name="phone">
<input name="email">
<h2>Address</h2>
<input name="street">
<input name="city">
<input name="postal_code">
<input name="country">
<h2>Payment Method</h2>
<input name="cardholder_id">
<input name="credit_card_number">
<input name="exp_month">
<input name="exp_year">
<input name="ccv">
<button type="submit">Submit</button>
</form>
Typing
As some of you may have noticed, the inputs above are not typed. This means, that by default they are of type="text". Now, typing an input can be a bit tricky. Once we change the type of the input we get a few things: We get autocomplete suggestions, a validation that checks if the value is suitable to its type, and an appropriate virtual keyboard on mobile devices.
For instance, if we'd use type="email", it would suggest us emails that are stored in our browser, it would check if we enter a valid email address and it would show a virtual keyboard with @, ., and sometimes .com (depends on the device).
If we'd use type="tel" we would get a numbers only keypad (and also #, + and * characters). Now, this can be very useful, and not only for phone numbers, but if we'd use it for a postal code or credit card number, we'd get a phone number validation and autocomplete suggestions, which is not good.
As a rule of thumb, I would suggest to change the type of an input from the default type="text" only if the input is the type. So let's apply this rule in our form.
<form>
<h2>Details</h2>
<input name="first_name">
<input name="last_name">
<input name="phone" type="tel">
<input name="email" type="email">
<h2>Address</h2>
<input name="street">
<input name="city">
<input name="postal_code">
<input name="country">
<h2>Payment Method</h2>
<input name="cardholder_id">
<input name="credit_card_number">
<input name="exp_month">
<input name="exp_year">
<input name="ccv">
<button type="submit">Submit</button>
</form>
Inputmode
As you can see above, I only changed the types of the phone and email inputs, but we'd still like to see a numbers only keypad for the postal code input, and all the credit card inputs.
We could use the type="number" but this type sucks in so many ways. It shows by default 2 arrows in it, that increases or decreases its values, and the virtual keyboard it shows also shows a lot of non-numeric characters.
For this scenario we can use the inputmode attribute. This is an extremely useful attribute, as it tells our mobile device which virtual keyboard to open. One of its more useful values is inputmode="numeric", which opens a numbers only (no # and *) keyboard. There are other useful values, check them out here. Now, we can use this attribute on the appropriate inputs.
<form>
<h2>Details</h2>
<input name="first_name">
<input name="last_name">
<input name="phone" type="tel">
<input name="email" type="email">
<h2>Address</h2>
<input name="street">
<input name="city">
<input name="postal_code" inputmode="numeric">
<input name="country">
<h2>Payment Method</h2>
<input name="cardholder_id" inputmode="numeric">
<input name="credit_card_number" inputmode="numeric">
<input name="exp_month" inputmode="numeric">
<input name="exp_year" inputmode="numeric">
<input name="ccv" inputmode="numeric">
<button type="submit">Submit</button>
</form>
Autocomplete
Now we show the most appropriate virtual keyboard to all our inputs. But what about helping the users use their stored details. For that we have the autocomplete attribute. This is an insanely useful one (especially for the user) if we use it correctly. Note that for already typed inputs, like tel and email, we don't need to set autocomplete values, as their type already uses it.
There are many values to the autocomplete attribute, and chances are we could find a suitable one to all our inputs. Once we assign the correct values, if our users have stored data in their browser, it could take them a few seconds to fill out this form. Also, if we have stored credit cards in our browser it would fill them out automatically as well.
Some fields, like cardholder id, are better left out of the autocomplete fields for security reasons. This can be easily set, by setting this field with autocomplete="off".
<form>
<h2>Details</h2>
<input name="first_name" autocomplete="given-name">
<input name="last_name" autocomplete="family-name">
<input name="phone" type="tel">
<input name="email" type="email">
<h2>Address</h2>
<input name="street" autocomplete="street-address">
<input name="city" autocomplete="address-level2">
<input name="postal_code" inputmode="numeric"
autocomplete="postal-code">
<input name="country" autocomplete="country-name">
<h2>Payment Method</h2>
<input name="cardholder_id" inputmode="numeric"
autocomplete="off">
<input name="credit_card_number" inputmode="numeric"
autocomplete="cc-number">
<input name="exp_month" inputmode="numeric"
autocomplete="cc-exp-month">
<input name="exp_year" inputmode="numeric"
autocomplete="cc-exp-year">
<input name="ccv" inputmode="numeric"
autocomplete="cc-csc">
<button type="submit">Submit</button>
</form>
Auto-capitalize and Auto-correct
The autocapitalize and autocorrect attributes are mobile-only attributes (autocorrect is only for iOS). The autocapitalize attribute can show us a CAPS only virtual keyboard, or only for each first letter. The autocorrect attribute can enable or disable the iOS auto-correct for this input.
These can be quite useful for name and address inputs, as their values sometimes don't match with auto-correct values.
<form>
<h2>Details</h2>
<input name="first_name" autocomplete="given-name"
autocapitalize="words" autocorrect="off">
<input name="last_name" autocomplete="family-name"
autocapitalize="words" autocorrect="off">
<input name="phone" type="tel">
<input name="email" type="email">
<h2>Address</h2>
<input name="street" autocomplete="street-address"
autocapitalize="words" autocorrect="off">
<input name="city" autocomplete="address-level2"
autocapitalize="words" autocorrect="off">
<input name="postal_code" inputmode="numeric"
autocomplete="postal-code">
<input name="country" autocomplete="country-name"
autocapitalize="words" autocorrect="off">
<h2>Payment Method</h2>
<input name="cardholder_id" inputmode="numeric"
autocomplete="off">
<input name="credit_card_number" inputmode="numeric"
autocomplete="cc-number">
<input name="exp_month" inputmode="numeric"
autocomplete="cc-exp-month">
<input name="exp_year" inputmode="numeric"
autocomplete="cc-exp-year">
<input name="ccv" inputmode="numeric" autocomplete="cc-csc">
<button type="submit">Submit</button>
</form>
Check out a demo for this article on CodePen.
Conclusion
As users, forms can be a pain. As developers we can make the users lives a bit easier by providing them with all the tools to fill these forms as quickly as possible by using the correct input attributes.
Do you think of any other attributes that can assist users with tedious forms?
Top comments (0)