Contao Form Autocomplete Bundle

This bundle offers functionality for adding the HTML5 attribute autocomplete to form fields in the Contao CMS.

The autocomplete attribute is used in the following cases:

1. Browsers use it for presenting different autocompletion options for fields wth different autocomplete value set.
2. Screen readers verbalize it, hence it's a good practice to have them set.

Features

• adds the HTML5 autocomplete attribute to form fields
• supports:
  • Contao Formgenerator
  • all form fields generated by using Widget::parse() (the hook getAttributesFromDca is used)

Installation

1. Install via composer: composer require heimrichhannot/contao-form-autocomplete-bundle.

How does it work?

Form generator

The form generator is supported by default. The autocomplete value is guessed based on the field name. The value is guessed based on the mapping defined in the bundle config. You can extend this mapping in your project (see chapter below).

Dca fields

There are the following supported ways to add the autocomplete value to a field (the priority is descending):

1. The DCA definition has it set in its eval section:

   // tl_my_table.php
   'myFirstnameField' => [
      'label' => &$GLOBALS['TL_LANG']['tl_my_table']['myFirstnameField'],
      // ...
      'eval' => [
          'autocomplete' => 'given-name'
      ]
   ]
   

2. If no DCA definition is found or relevant in the given context (e.g. in form generator there is no DCA context), the bundle tries to guess based on the mapping of field name to autocomplete value defined in this bundle. You can extend this mapping in your project (see chapter below).

Technical details

Extend the given mapping

Simply add the following code according to your needs to your app/config/config.yml (Contao 4.4) or config/config.yml:

huh_form_autocomplete:
  mapping:
    given-name:
      synonyms:
        - my-new-value
    new-autocomplete-name:
      synonyms:
        - brand-new-autocomplete-name

How does the matching of a field name and an autocomplete value work?

The algorithm is currently very simple. Basically it works the following way:

1. If an autocomplete value is set in the field's DCA, it's used.
2. The mapping in src/Resources/config/config.yml contains all the currently possible values of the HTML5 autocomplete field. If the field name equals one of these, it's used.
3. If the step before isn't met, the algorithm iterates the defined synonyms of the autocomplete values. If there's a match, the corresponding autocomplete value is used.
4. If none of the steps above is met, false is returned.

The comparison only takes into account characters. Special characters and separation characters like - or _ are ignored. Hence a synonym some-name equals someName in this comparison.