Autocomplete Well Done | 2017

autocomplete-form.pug

// As seen in:
// https://medium.com/dev-channel/improving-mobile-web-conversions-just-by-optimizing-web-forms-1d846bed42f

form(action='#')
  fieldset
    legend Address
    label
      | Name: 
      input(type='text', name='name', autocomplete='name')
    br
    label
      | Organization: 
      input(type='text', name='organization', autocomplete='organization')
    br
    label
      | Postal code: 
      input(type='text', name='postal-code', autocomplete='postal-code')
    br
    label
      | State: 
      input(type='text', name='address-level1', autocomplete='address-level1')
    br
    label
      | City: 
      input(type='text', name='address-level2', autocomplete='address-level2')
    br
    label
      | Street Address: 
      input(type='text', name='street-address', autocomplete='street-address')
    br
    label
      | Country: 
      input(type='text', name='country', autocomplete='country-name')
    br
    label
      | E-mail address: 
      input(type='text', name='email', autocomplete='email')
    br
    label
      | Phone number: 
      input(type='text', name='tel', autocomplete='tel')
  fieldset
    legend Credit card
    label
      | Credit card number: 
      input(type='number', name='cc-number', autocomplete='cc-number')
    br
    label
      | Name: 
      input(type='text', name='cc-name', autocomplete='cc-name')
    br
    label
      | Expiration: 
      select(autocomplete='cc-exp-month')
        option(value='1') 01
        option(value='2') 02
        option(value='3') 03
        option(value='4') 04
        option(value='5') 05
        option(value='6') 06
        option(value='7') 07
        option(value='8') 08
        option(value='9') 09
        option(value='10') 10
        option(value='11') 11
        option(value='12') 12
      |  Month
      select(autocomplete='cc-exp-year')
        option(value='2017') 2017
        option(value='2018') 2018
        option(value='2019') 2019
        option(value='2020') 2020
        option(value='2021') 2021
        option(value='2022') 2022
        option(value='2023') 2023
      |  Year
    br
  input(type='submit', value='Submit')
  |  (Information won't be posted anywhere)