If you want take easy life for your WEB users, you can tell browser what exactly form value it shudl be populate automatically. And you don't need JavaScript for it!
What make sens fill sedond or third time, what is my name in each page?
- none sens ;)
Autocomplete user data
Let's image that I must gaterign phone number nad first user name i my app. Usuall in HTMl we can write that:
<label for="form_name" >First Name: </label>
<input id="form_name" name="app_name" />
<label for="form_phone" >Phone: </label>
<input id="form_phone" name="app_phone" />
And this is time for super helper autocomplet="" form attribute. List of neede option is bellow
the autocomplete attribute | info |
---|---|
given-name | first name |
family-name | last name (Surname) |
street-address | adress |
postal-code | zip code |
address-level2 | city |
user email | |
tel | phone |
So, let's tuning this form.
<label for="form_name" >First Name: </label>
<input id="form_name" name="app_user_name" autocomplet="given-name"/>
<label for="form_phone" >Phone: </label>
<input id="form_phone" name="app_user_phone" autocomplet="tel"/>
At now if user filled this data in another page, on your page this values will be filled automatically too, please check. Simple form attribute but very helped !
Bonus, Credit Card autocomplete
don't lose money, have this knowledge !
I usually resignation of payment, when I must fill all information about my credit card, this is boring, additionally on mobile phone for me it give me flustation.
If you see that users resigns in buy
You can help him, please use this special form attribute intended for credit cards
Credit Card autocomplete attribute | info |
---|---|
cc-name | name on card |
cc-number | card Number |
cc-csc | card security code |
cc-exp | expiry day |
<label for="fCardName" >Name on card: </label>
<input id="fCardName" name="app_card_name" autocomplet="given-name"/>
<label for="fCardNumber" >Card Number: </label>
<input id="fCardNumber" name="app_card_number" autocomplet="cc-number"/>
<label for="fCardSecrect" >CVC: </label>
<input id="fCardSecrect" name="app_card_csc" autocomplet="cc-csc"/>
<label for="fCardEnd" >Expiry: </label>
<input id="fCardEnd" name="app_card_expiry" autocomplet="cc-exp"/>
Summary
save time your user, and they come back to you.
if you are still hungry for knowledge, you will find more HTML forms attributes:
- all list of autocomplete you can find on WHATWG community
- o read next, good article about autocapitalize, autocorrect and spellcheck
Top comments (0)