Making web forms easier to fill out

Hi, Habr! Today, more and more mobile devices are used to surf the Internet, not computers. At the same time, many sites have data entry forms that allow you to make a purchase or subscribe to a newsletter. As a result, users have to repeatedly enter information about themselves on different sites, such as name, phone number and address. Convenience of web forms is of great importance, because when working with them errors are always likely, with the result that many users refuse to fill out at all. Three years ago, we introduced the autocomplete feature in the Chrome browser, which simplifies data entry into forms . Chrome now fully supports the autocomplete attribute in forms in accordance with the current WHATWG HTML standard . Thanks to this, webmasters and developers can tag fields with attributes, such as name and street-address (name and address), without changing the interface or other site code. Those who realized these opportunities, note that their forms began to fill more often.



For example, if you tick the box for entering an email address, the code will look like this:
')

<input type="text" name="customerEmail" autocomplete="email"/> 

Here is a complete form markup example :

 <form method="post" id="usrForm"> <fieldset> <legend>Contact Info</legend> <label for="frmNameA">Name</label> <input name="name" id="frmNameA" placeholder="Full name" required autocomplete="name"> <label for="frmEmailA">Email</label> <input type="email" name="email" id="frmEmailA" placeholder="name@example.com" required autocomplete="email"> <label for="frmEmailC">Confirm Email</label> <input type="email" name="emailC" id="frmEmailC" placeholder="name@example.com" required autocomplete="email"> <label for="frmPhoneNumA">Phone</label> <input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-555-555-1212" required autocomplete="tel"> <label for="frmShoeSize">Shoe Size</label> <input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5"> <label for="frmFavChocolate">Favorite Type of Chocolate</label> <input name="fav-choc" id="frmFavChocolate" list="chocType"> <datalist id="chocType"> <option value="white"> <option value="milk"> <option value="dark"> </datalist> </fieldset> <fieldset> <legend>Shipping</legend> <label for="frmAddressS">Address</label> <input name="ship-address" required id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address"> <label for="frmCityS">City</label><input name="ship-city" required id="frmCityS" placeholder="New York" autocomplete="shipping locality"><label for="frmStateS">State</label> <input name="ship-state" required id="frmStateS" placeholder="NY" autocomplete="shipping region"> <label for="frmZipS">Zip</label> <input name="ship-zip" required id="frmZipS" placeholder="10011" autocomplete="shipping postal-code"> <label for="frmCountryS">Country</label> <input name="ship-country" required id="frmCountryS" placeholder="USA" autocomplete="shipping country"> <label><input type="checkbox" name="billAndShip" id="cbBillAndShip"> Bill to this address.</label> </fieldset> <fieldset> <legend>Billing</legend> <label for="frmAddressB">Address</label> <input name="bill-address" id="frmAddressB" required placeholder="123 Any Street" autocomplete="billing street-address"><label for="frmCityB">City</label> <input name="bill-city" id="frmCityB" required placeholder="New York" autocomplete="billing locality"> <label for="frmStateB">State</label> <input name="bill-state" id="frmStateB" required placeholder="NY" autocomplete="billing region"> <label for="frmZipB">Zip</label> <input name="bill-zip" id="frmZipB" required placeholder="10011" autocomplete="billing postal-code"> <label for="frmCountryB">Country</label> <input name="bill-country" id="frmCountryB" required placeholder="USA" autocomplete="billing country"> </fieldset> <fieldset> <legend>Payment</legend> <p>Do <b>NOT</b> provide real credit card information in this field.</p> <label for="frmNameCC">Name on card</label> <input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name"> <label for="frmCCNum">Card Number</label> <input name="cardnumber" id="frmCCNum" required autocomplete="cc-number"> <label for="frmCCCVC">CVC</label> <input name="cvc" id="frmCCCVC" required autocomplete="cc-csc"><label for="frmCCExp">Expiry</label> <input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp"> </fieldset> <div> <button class="btn" id="butCheckout">Check Out</button> </div> </form> 

Optimizing sites for viewing on mobile devices is very important. We hope that in the future there will be more resources on which the autocomplete attribute is implemented. More information can be found in the “Web Design Basics” guide on this page . If you have any questions, ask them on our forum .

Our previous posts on mobile optimization:

>> Reveal Blocked Resources Using Google Webmaster Tools
>> Improving search results on mobile devices
>> Google will mark mobile sites in search results
>> Indexing applications: now in Russian
>> Improving the understanding of web pages
>> New Googlebot Smartphone User Agent
>> How to improve the mobile version of the site. Recommendations and video tips