Input attributes

Placeholder

<input type="search"  placeholder="Search"  />

Standard attribute: placeholder

• Is not a a replacement for visible <label>
• Fails color contrast in most browsers
• Information is not always announced by screen readers

More information about placeholders

• Anatomy of Accessible Forms! Placeholder is a Mirage
• Placeholder Research
• The Anatomy of Accessible Forms: The Problem with Placeholders

Playground:

Important: The placeholder label might be hidden if the width of the input box is small. This could happen if your label has too many characters or when resizing the browser to display in mobile devices.

<input type="search" placeholder="What can we help you with today?" size="20" />

Autocomplete

<input type="search" ... autocomplete="off"  />

Standard attribute: autocomplete

The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

If autocomplete is not disabled, your browser might fill the input element with previous search values

Autocomplete is not a boolean!.

More information about autocomplete:

• The HTML autocomplete attribute

Playground:

Instructions: click on the following fields. Notice how the recommendation changes based on the term used in the name attribute.

<input type="search" name="search" ... />

<input type="search" name="q" ... />

<input type="search" name="q" autocomplete="off"... />

Autocorrect

Global non-standard attribute: autocorrect

• A string indicating whether or not autocorrect is on or off. Safari only.

Playground:

Instructions: Type wya in the input boxes below. When using Safari, the word should be autocorrected and replaced with way.

<input type="search" autocorrect="off"  />

<input type="search" autocorrect="on"  />

Spellcheck

Global non-standard attribute: spellcheck

• Defines whether the element may be checked for spelling errors.
• When errors are detected, they are indicated with a red curvy line under the mispelled word.

Playground:

<input type="search" spellcheck="true"  />

<input type="search" spellcheck="false"  />

Autocapitalize

Global non-standard attribute: autocapitalize

• Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
• The autocapitalize attribute doesn’t affect behavior when typing on a physical keyboard. Instead, it affects the behavior of other input mechanisms, such as virtual keyboards on mobile devices and voice input.

Playground:

Instructions: Fill the input fields below using your desktop & mobile device. Compare the result.

<input type="search" autocapitalize="off"  />

<input type="search" autocapitalize="words"  />

What I use today

After many searches and text, this is the most common code I use when implementing a Search Bar

<input type="search" name="query" 
  autocomplete="off" autocrrect="off" autocapitalize="off" 
  spellcheck="false" maxlength="150" aria-haspopup="true" 
  aria-label="Search for products" title="Search for products" 
  role="combobox" />