In this codelab, you'll learn how to improve your forms so more users will complete them. In modern browsers there is a cool feature that you can use: Autofill. Users appreciate when websites save them time by automatically filling common fields like names, email addresses and more. Plus autofill helps to reduce potential input errors. Let's learn how to take advantage and put a smile on our users' faces. Cool?

What you'll learn

What you'll need

How will you use this tutorial?

Read it through only Read it and complete the exercises

How would rate your experience with building web apps?

Novice Intermediate Proficient

This is what you will get at the end of the codelab. It's a fully functional form that contains popular fields: name, email, phone, address and payments.

You can either download all the sample code to your computer:

Download Zip file

...or clone the GitHub repository from the command line:

$ git clone https://github.com/greenido/autocomplete-codelab.git

First, let's see what the finished form looks like. With the code downloaded, the following instructions describe how to open the completed web app.

  1. Start up a web server on localhost

    To complete this codelab you will need to run a local web server. You may already have your own setup for this. Otherwise open a terminal window, navigate to the autocomplete-codelab directory you created when you downloaded the code (see above) and run the following Python command to start a server:
$ sudo python -m SimpleHTTPServer 8080


This will start a server on the default HTTP port 8080. Navigate to localhost from your browser to see a listing for the top-level autocomplete-codelab directory.

To view your own work in the app directory, navigate to localhost/app. To view the examples of completed code for each step, navigate to the directories in localhost/completed.

If you don't have Python, you can get it here. If there are problems starting the server, check that there is not another service using port 8080.

Alternatively, you may prefer to use web server stacks such as XAMPP or MAMP.


In this basic form we will give each input tag just the name, id and class attributes. Open your app directory, create the file index.html and add the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Autocomplete codelab</title>
</head>

<body>
  <div role="main">
    <form method="post" id="usrForm">
      <div class="form-group">
        <label for="frmNameA">Name</label>
        <input name="name" id="frmNameA">
      </div>
      
      <div class="form-group">
        <label for="frmEmailA">Email</label>
        <input type="email" name="email" id="frmEmailA">
      </div>

      <div class="form-group">
        <label for="frmEmailC">Confirm Email</label>
        <input type="email" name="emailC" id="frmEmailC">
      </div>

      <div class="form-group">
        <label for="frmPhoneNumA">Phone</label>
        <input type="tel" name="phone" id="frmPhoneNumA">
      </div>
    </form>
  </div>
</body>
</html>


Open index.html locally in Chrome from localhost; the URL should be something like localhost/autocomplete-codelab/app/step1/index.html.

You can see that the result you got is similar to: github.com/greenido/autocomplete-codelab/blob/master/completed/step1/raw.html

Now, in order to make things prettier check the extra code we've written in: github.com/greenido/autocomplete-codelab/blob/master/completed/step1/index.html

You should get:


In this basic form we will add to each input tag the correct autocomplete attribute. Autocomplete types tell the browser what kind of data you're expecting in a given input field e.g. full name, email, phone, credit card etc.

Open your app directory, and add to your index.html the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Autocomplete codelab</title>
</head>
<body>
  <div role="main">
    <form method="post" id="usrForm">
      <div class="form-group">
        <label for="frmNameA">Name</label>
        <input name="name" id="frmNameA" autocomplete="name">
      </div>
      
      <div class="form-group">
        <label for="frmEmailA">Email</label>
        <input type="email" name="email" id="frmEmailA"          
        autocomplete="email">
      </div>

      <div class="form-group">
        <label for="frmEmailC">Confirm Email</label>
        <input type="email" name="emailC" id="frmEmailC"
        autocomplete="email">
      </div>

      <div class="form-group">
        <label for="frmPhoneNumA">Phone</label>
        <input type="tel" name="phone" id="frmPhoneNumA"
        autocomplete="tel">
      </div>
    </form>
  </div>
</body>
</html>


Open index.html locally in Chrome from localhost; the URL should be something like localhost/autocomplete-codelab/app/step2/index.html.

You can see that the result you got is similar to: github.com/greenido/autocomplete-codelab/blob/master/completed/step2/index.html

You should get:


In this basic form we will add to each input tag the correct placeholders and required attribute.

Open your app directory, and add to your index.html the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Autocomplete codelab</title>
</head>
<body>
  <div role="main">
    <form method="post" id="usrForm">
      <div class="form-group">
        <label for="frmNameA">Name</label>
        <input name="name" id="frmNameA"  autocomplete="name"
        placeholder="Full name" required>
      </div>
      
      <div class="form-group">
        <label for="frmEmailA">Email</label>
        <input type="email" name="email" id="frmEmailA"          
        autocomplete="email"
        placeholder="name@example.com" required>
      </div>

      <div class="form-group">
        <label for="frmEmailC">Confirm Email</label>
        <input type="email" name="emailC" id="frmEmailC"
        autocomplete="email"
        placeholder="name@example.com" required>
      </div>

      <div class="form-group">
        <label for="frmPhoneNumA">Phone</label>
        <input type="tel" name="phone" id="frmPhoneNumA"
        autocomplete="tel"
        placeholder="+1-650-450-1212" required>
      </div>
    </form>
  </div>

</body>
</html>


Open index.html locally in Chrome from localhost; the URL should be something like localhost/autocomplete-codelab/app/step3/index.html.

You can see that the result you got is similar to: github.com/greenido/autocomplete-codelab/blob/master/completed/step3/index.html

You should get:


In this stage we will add a very common set of fields that make up the ‘address form':

Open your app directory, and add to your index.html the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Autocomplete codelab</title>
</head>
<body>
  <div role="main">
    <form method="post" id="usrForm">
       . . .
    <h3>Addresss</h3>
     <div class="form-group">
        <label for="frmAddressS">Address</label>
        <div class="col-lg-10">
          <input name="ship-address" required 
          id="frmAddressS" autocomplete="shipping street-address">
        </div>
     </div>

      <div class="form-group">
        <label for="frmCityS">City</label>
        <div class="col-lg-10">
          <input name="ship-city" required 
          id="frmCityS" placeholder="New York" autocomplete="shipping 
          address-level2">
        </div>
      </div>
      <div class="form-group">
        <label for="frmStateS" >State</label>
        <div class="col-lg-10">
          <input name="ship-state" required 
          id="frmStateS" placeholder="NY" autocomplete="shipping 
          address-level3">
        </div>
      </div>

      <div class="form-group">
        <label for="frmZipS">Zip</label>
        <div class="col-lg-10">
          <input name="ship-zip" required 
           id="frmZipS" placeholder="10011" autocomplete="shipping 
           postal-code">
        </div>
      </div>

      <div class="form-group">
        <label for="frmCountryS">Country</label>
        <div class="col-lg-10">
          <input name="ship-country" required 
           id="frmCountryS" placeholder="USA" autocomplete="shipping 
           country">
        </div>
      </div>

    </form>
  </div>

</body>
</html>

Open index.html locally in Chrome from localhost; the URL should be something like

localhost/autocomplete-codelab/app/step4/index.html.

You can see that the result you got is similar to:

github.com/greenido/autocomplete-codelab/blob/master/completed/step4/index.html

You should get:


In this stage we will add a very common set of fields that will allow us to get credit card details:

Open your app directory, and add to your index.html the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Autocomplete codelab</title>
</head>
<body>
  <div role="main">
    <form method="post" id="usrForm">
      . . .
 <h3>Payment</h3>
      <div class="form-group">
        <label for="frmNameCC">Name on card</label>
        <div class="col-lg-10">
          <input name="ccname" id="frmNameCC" required 
          placeholder="Full Name" autocomplete="cc-name">
        </div>
      </div>

      <div class="form-group">
        <label for="frmCCNum">Card Number</label>
        <div class="col-lg-10">
          <input name="cardnumber" id="frmCCNum" required 
           autocomplete="cc-number">
        </div>
      </div>

      <div class="form-group">
        <label for="frmCCCVC">CVC</label>
        <div class="col-lg-10">
          <input name="cvc" id="frmCCCVC" required 
           autocomplete="cc-csc">
        </div>
      </div>

      <div class="form-group">
        <label for="frmCCExp">Expiry</label>
        <div class="col-lg-10">
          <input name="cc-exp" id="frmCCExp" required 
           placeholder="MM-YYYY" autocomplete="cc-exp">
        </div>
      </div>

      <div class="form-group">
        <div class="col-lg-12">
          <button>Cancel</button>
          <button type="submit" id="butCheckout">Check Out</button>
        </div>
      </div>

    </form>
  </div>
</body>
</html>


Open index.html locally in Chrome from localhost; the URL should be something like:
localhost/autocomplete-codelab/app/step5/index.html.

You can see that the result you got is similar to: github.com/greenido/autocomplete-codelab/blob/master/completed/step5/index.html

You should get:

Your form is now ready to rock. If you wish to learn more on designing and implementing efficient forms check out our Udacity course Building Great Forms.

What we've covered

Next Steps

Learn More