Useful HTML input attributes
Tags: html, webdev, tutorial
Published: 2022-02-03 12:31:23

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. 
```html
<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.
```html
<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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode#values). Now, we can use this attribute on the appropriate inputs.
```html
<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](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values), 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"`.
```html
<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.
```html
<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](https://codepen.io/dagropp/pen/dyZXZOY).

**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?