DEV Community

Cover image for fill HTML forms without JavaScript
Łukasz Sarzyński
Łukasz Sarzyński

Posted on

fill HTML forms without JavaScript

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" />
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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:


Top comments (0)