All of the HTML Input Types and a Couple Selects (for Good Measure)

Note: HTML5-specific types called out in heading. Document also contains basic states of disabled, required, and readonly.

Button

Checkbox

Color (HTML 5)

Date (HTML 5)

Date type allows for min and max range of dates. These values are set for days starting March 20, 2017 and ending February 17, 2019.

Data Time Local (HTML5)

Email (HTML 5)

File

Hidden

Image

Month (HTML 5)

Number (HTML 5)

Password

Radio

Radios

Range

Reset

Search (HTML 5)

Submit

Tel (HTML 5)

Text

Text (marked with required)

Text (marked with aria-required)

Text (marked with readonly)

Text (marked with aria-readonly)

Text (marked disabled)

Text (marked aria-disabled)

Text (marked aria-invalid)

Text (inputmode numeric, with pattern preventing punctuation)

Text (inputmode tel)

Text (inputmode decimal)

Text (inputmode email)

Text (inputmode URL)

Text (inputmode search)

Time (HTML 5)

URL (HTML 5)

Week (HTML 5)

Vanilla Text Input with Readonly Set (Should only be used on textboxes)

Vanilla Text Input with ARIA-Readonly Set (Note: ARIA-Readonly Should Not Be Used On Native Inputs)

Bonus, HTML 5 Autocomplete Using Datalist

Single Select

One option disabled and one default selected

Multi-Select

Multi-selectable with some internal options and an option group disabled. Size is set to display eight options at a time. To select more than one option, use Control + Spacebar.

Fields in a Disabled Fieldset

Disabling a fieldset should disable children

This fieldset is disabled