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

Button

Checkbox

Checkbox Label

Color (HTML 5)

Color Label

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.

Date Label pick a date after March 20, 2017 and before February 17, 2019

Data Time Local (HTML5)

Date Time Local Label

Email (HTML 5)

Email Label

File

File Label

Hidden

Image

Month (HTML 5)

Month Label

Number (HTML 5)

Number Label (HTML 5, with max of 10, min of 1, default of 4, and 2 digit steps)

Password

Password Label

Radio

Radios

Radio One Label
Radio Two Label

Range

Range Label (HTML 5, with max of 10, min of 1, default of 4, and 2 digit steps)

Reset

Search (HTML 5)

Search Label

Submit

Tel (HTML 5)

Tel Label

Text

Text Label

Text (marked with required)

Text Label

Text (marked with aria-required)

Text Label

Text (marked with readonly)

Text Label

Text (marked with aria-readonly)

Text Label

Text (marked disabled)

Text Label

Text (marked aria-disabled)

Text Label

Text (marked aria-invalid)

Text Label

Text (inputmode numeric, with pattern preventing punctuation)

Text Label

Text (inputmode tel)

Text Label

Text (inputmode decimal)

Text Label

Text (inputmode email)

Text Label

Text (inputmode URL)

Text Label

Text (inputmode search)

Text Label

Time (HTML 5)

Time Label

URL (HTML 5)

URL Label

Week (HTML 5)

Week Label

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

Readonly Label

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

Readonly Label

Bonus, HTML 5 Autocomplete Using Datalist

Choose a browser from this list:

Single Select

One option disabled and one default selected

Select Label One One Two Three Four

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.

Select Label Two Option One Option Two (disabled) Group One Option Group One Option Two (disabled) Group One Option Three Option Three Group Two Option One Group Two Option Two Group Two Option Three Option Four

Fields in a Disabled Fieldset

Disabling a fieldset should disable children

This fieldset is disabled

First Name
Last Name
check me out!
Submit

Single Checkbox in a Fieldset

Use an aria-describedby association instead of wrapping a single element in a fieldset with a legend. This is an anti-pattern and should not be used. Screen readers will often report the single item as a group, which is misleading.

Legend for single form control

checkbox in fielset