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:
or clone from Github repo using the command line:
1 2 | $ git clone https://github.com/greenido/autocomplete-codelab.git |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> title</span> <span class="token punctuation">></span></span> Autocomplete codelab <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> title</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">role</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> main <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> form</span> <span class="token attr-name">method</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> post <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> usrForm <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmNameA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Name <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> name <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmNameA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Email <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailC <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Confirm Email <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> emailC <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailC <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmPhoneNumA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Phone <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> tel <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> phone <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmPhoneNumA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> form</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> title</span> <span class="token punctuation">></span></span> Autocomplete codelab <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> title</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">role</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> main <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> form</span> <span class="token attr-name">method</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> post <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> usrForm <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmNameA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Name <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> name <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmNameA <span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> name <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Email <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailA <span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailC <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Confirm Email <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> emailC <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailC <span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmPhoneNumA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Phone <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> tel <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> phone <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmPhoneNumA <span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> tel <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> form</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> title</span> <span class="token punctuation">></span></span> Autocomplete codelab <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> title</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">role</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> main <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> form</span> <span class="token attr-name">method</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> post <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> usrForm <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmNameA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Name <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> name <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmNameA <span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> name <span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Full name <span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Email <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailA <span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="fa949b979fba9f829b978a969fd4999597">[email protected]</a> <span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailC <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Confirm Email <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> emailC <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmEmailC <span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> email <span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="95fbf4f8f0d5f0edf4f8e5f9f0bbf6faf8">[email protected]</a> <span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> form-group <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> label</span> <span class="token attr-name">for</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmPhoneNumA <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Phone <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> label</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> tel <span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> phone <span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> frmPhoneNumA <span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> tel <span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> +1-650-450-1212 <span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> form</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
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.