Improve FORMs with Autocomplete

Tram Ho

Overview

In this article, we will learn how to improve forms to be more user friendly. Web browsers today have a cool feature that is Autofill . Users will appreciate it when websites save them time by automatically filling in common fields like names, email addresses, and more, autocomplete that helps us improve those Basic input error. So let’s learn about autocomplete and improve the user experience on your site.

What will you learn?

✅ How to use autocomplete calculator to take advantage of the autofill feature

✅ Practices to improve the performance of your forms.

What to prepare?
  • Chrome Ediotor or any other editor you like (Atom, VS Code, Sublime, etc …)
  • A little knowledge of GIT and Chrome DevTools

Sample Code

You can download all the sample code to your computer at this link:

⬇️ Download ZIP file

or clone from Github repo using the command line:

Run the sample app

After downloading or cloning the sample code, open it up with your editor.

Here I use VS Code, so I installed another extension, Live Server, to run it.

If you are not using VS Code, you may need to set up a local web server. Can use XAMPP or MAMP. After running, you will get a page like this.

Construction FORM

The complete code for this step is in the completed / step1 directory.

In a basic form we will each input properties as name, id and class. Open your code directory and create a file index.html , add it the following code:

Then open it up, you will see the following: (Of course you have to add more CSS, you can use css in sample code or write it yourself)

Add the autocomplete attribute

In the basic form we will add to each tag the autocomplete attribute. This property will tell the browser what kind of data you want with the corresponding input tag. For example, email, fullname, phone, etc … Add the index.html file you added above the following code:

And we will be:

Add placeholder and required

We will add each placeholder and required tags to the input tag. Add your index.html file as follows:

And the result should look like this:

summary

What have we done

✅ How to use autocomplete calculator to improve form

✅ Practices for improving UX (placeholder, required)

So we have applied attributes like autocomplete, required and placeholder in an input tag. It can be said that these properties are necessary when we use forms. However, depending on the spec of the project, we may not use autocomplete or required. So this is just a basic way to help you improve the quality and interaction of users on the site. If you want to learn more about this, you can learn more here Thank you for reading the article.

Share the news now

Source : Viblo