Better Form Inputs for Better Mobile User Experiences

An easy and practical way to improve mobile application performance: Always configure HTML input fields with the correct type , inputmode , and autocomplete properties. While these three attributes are often discussed separately, they are most significant in mobile user experience when you consider them as a whole.

As we all know, filling forms on mobile devices is time-consuming and cumbersome, but by correctly configuring the input fields, we can ensure that the data input process is as smooth as possible for the user. Let's look at some examples and best practices to create a better mobile user experience.

Use the correct input type

This is the easiest thing to do right. Input types such as email , tel , and url are well supported in various browsers. While the benefits of using the tel type on a desktop browser rather than the more general text type may be difficult to detect, it is clear at a glance on mobile devices.

Choosing the right type changes the keyboard that pops up when the user focuses fields on Android and iOS devices. With very little effort, we can display a custom keyboard for email, phone number, URL and even search input with the right type.

It should be noted that both input type="email" and input type="url" have verification functions. When a user submits a form, modern browsers will display an error message when its value does not match the expected format. If you want to turn off this feature, just add the novalidate property to the included form.

A brief introduction to date type

HTML input not only includes special text input—but also radio buttons, check boxes, and more. However, for the purposes of this article, I mainly discuss more text-based input .

There is an input type that lies in the critical space between more free text input and input widgets like radio buttons: date . There are many variations of the date input type and are well supported on mobile devices, including date , time , datetime-local , and month . When they are focused, these pop up custom widgets in iOS and Android. Instead of triggering a dedicated keyboard, they show a selection-like interface in iOS, showing various different types of widgets on Android (where date and time selectors are particularly smooth).

I was excited at first to be able to use native default settings on my mobile device until I looked around and realized that most major apps and mobile sites use custom date pickers instead of native date input types. There may be several reasons for this. First, I found that the native iOS date picker is not as intuitive as the calendar type widget. Second, even beautifully designed Android implementations are quite limited compared to custom components – for example, there is no easy way to enter a date range instead of a single date.

Nevertheless, if the custom date picker you are using is not performing well on your mobile device, the date input type is worth trying. If you want to try native input widgets on iOS and Android, while making sure desktop users see custom widgets instead of the default drop-down menu, this CSS code can hide the calendar drop-down menu of the desktop browser that implements it:

 ::-webkit-calendar-picker-indicator {
  display: none;
}

Finally, it is important to note that the date type cannot be overridden by inputmode property we are going to discuss.

Why should I care about inputmode?

inputmode property allows you to override the mobile keyboard specified by the input type and directly declare the keyboard type displayed to the user. When I first learned about this property, I wasn't impressed - why not use the right type from the beginning? However, while inputmode is usually unnecessary, it can be very useful in some places. The most significant use case for inputmode I found is to build better digital inputs.

While some HTML5 input types, such as url and email , are simple, input type="number" is different. It has some accessibility issues, and a somewhat awkward UI. For example, desktop browsers such as Chrome will display small incremental arrows that are easily triggered unexpectedly when scrolling.

So this is a pattern that needs to be remembered and used later. For most digital inputs, don't use this:

<input type="number">

…You actually want to use this:

<input type="text" inputmode="decimal">

Why not use inputmode="numeric" instead of inputmode="decimal" ?

numeric and decimal attribute values ​​produce the same keyboard on Android. On iOS, however, numeric shows a keyboard that displays both numbers and punctuation, while decimal shows a focused numeric grid that is almost exactly the same as tel input type, except that there are no redundant phone number-related options. That's why it's my first choice for most types of numeric inputs.

Christian Oliff wrote an excellent article specifically introducing inputmode attributes.

Don't forget autocomplete

More important than showing the correct mobile keyboard is to display useful autocomplete suggestions. This goes a long way to creating a faster and smoother user experience on mobile devices.

While browsers have heuristics to display autocomplete fields, you can't rely on them and you should still make sure to add the correct autocomplete attribute. For example, in iOS Safari, I found that input type="tel" option will only show the autocomplete option if I explicitly add autocomplete="tel" attribute.

You might think you are familiar with basic autocomplete options, such as options that help users fill in credit card numbers or address form fields, but I recommend you check them out to make sure you understand all the options. The specification lists more than 50 values! Did you know autocomplete="one-time-code" can make the phone verification user process very smooth?

About autocomplete…

I would like to mention another element that allows you to create your own custom autocomplete function: datalist . While it creates a usable — albeit a little basic — autocomplete experience on desktop Chrome and Safari, it stands out on iOS by showing suggestions in convenient lines directly above the keyboard, which is often located in that location. Additionally, it allows the user to switch between text and selective input.

On the other hand, on Android, datalist creates a more typical autocomplete drop-down menu, with the area above the keyboard retaining the system's own typed functionality. (In iOS, in order to view content other than the top three matches, users must trigger the selection selector by pressing the down arrow icon.)

You can use this demo to try out datalist :

You can use this tool I made to explore all the autocomplete options along with inputtype and inputmode values ​​to help you quickly preview various input configurations on your mobile device.

Summarize

When I build forms, I often tend to focus on perfecting the desktop experience and think of mobile networks as an afterthought. But while it does require some extra work to make sure the form works well on mobile devices, it isn't necessarily difficult. Hopefully, this article has shown that with a few simple steps you can make forms on your mobile device more convenient for users.

The above is the detailed content of Better Form Inputs for Better Mobile User Experiences. For more information, please follow other related articles on the PHP Chinese website!