fill HTML forms without JavaScript

#html #forms #autocomplete #payment

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
email	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"/>