Form With Auto-complete Attributes

This is a sample form designed to showcase the use of the autocomplete attribute for each form control. The form includes 53 different autocomplete attributes, aligning with the WCAG 2.1 Success Criterion 1.3.5 for input purposes. Each form field is labeled with its corresponding input purpose, ensuring accessibility and ease of use for users.

To test compliance with the WCAG 2.1 success criterion 1.3.5, consider using a bookmarklet. The bookmarklet can help verify whether the form controls, especially those collecting personal information, are appropriately equipped with the autocomplete attribute. This attribute enhances user experience by providing suggestions or pre-filling information, streamlining the form-filling process.

Feel free to interact with the form and observe how the autocomplete attribute improves the accessibility and usability of the form controls.

Working Example


(URL representing an instant messaging protocol endpoint)

Code

<form>
  <label for="name">Name</label>
  <input id="name" class="autocomplete-input" autocomplete="name" type="text">

  <label for="honorific-prefix">Honorific Prefix</label>
  <input id="honorific-prefix" class="autocomplete-input" autocomplete="honorific-prefix" type="text">

  <label for="given-name">Given Name</label>
  <input id="given-name" class="autocomplete-input" autocomplete="given-name" type="text">

  <label for="additional-name">Additional Name</label>
  <input id="additional-name" class="autocomplete-input" autocomplete="additional-name" type="text">

  <label for="family-name">Family Name</label>
  <input id="family-name" class="autocomplete-input" autocomplete="family-name" type="text">

  <label for="honorific-suffix">Honorific Suffix</label>
  <input id="honorific-suffix" class="autocomplete-input" autocomplete="honorific-suffix" type="text">

  <label for="nickname">Nickname</label>
  <input id="nickname" class="autocomplete-input" autocomplete="nickname" type="text">

  <!-- ... (repeat for the rest of the inputs) -->

  <label for="email">Email</label>
  <input id="email" class="autocomplete-input" autocomplete="email" type="text">

  <label for="impp">IMPP</label>
  <input id="impp" class="autocomplete-input" autocomplete="impp" type="text">
  <br>(URL representing an instant messaging protocol endpoint)<br>

  <input type="submit">
</form>