Skip Navigation

Input attributes

The input field has many attributes that we might not neccesarily know. It's important to get to know them and the impact that they have on your multiple devices. Some of them are called Global Attributes (apply to any HTML element) others are specific to <input> element. Here's a list of the most common ones I use when implementing a Search component.

I have created a playground area to test the impact of most common options for each one of the attributes. Read the instructions carefully and if you have any question / comment, please let me know at Twitter @HecOsborneRod



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

Standard attribute: placeholder

More information about placeholders


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" />


<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:


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"... />


Global non-standard attribute: autocorrect


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"  />


Global non-standard attribute: spellcheck


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

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


Global non-standard attribute: autocapitalize


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" />