Semantic Forms

A pattern library of forms based on semantic HTML enhanced with a modern UX.

Table of Contents

High flow (JavaScript enabled) styling
Semantic form tables
Low flow (JavaScript disabled) styling
Non-form related HTML elements

High flow (JavaScript enabled) styling

Name
Prefilled field
No placeholder
Password field: Password should be at least 8 characters long.
Don't show password field: Password should be at least 8 characters long.
Customize clear/show buttons: Password should be at least 8 characters long.
Input with button

Single form input

data-max-content text input
data-max-content select

Inputs

Email field
Telephone field
URL field
Search field
No float label
Number
Input with label help text: Some help text
Input with help icon
Required input with help icon
Invalid field
Valid field
Required field
Required field (no asterisk)
Required field (custom title)
Disabled input
Disabled input w/ value
Color field
Date field
Time field
Datetime-local field
Month field
Week field
File field
Input with button: Some help text that should span the entire width of the input/button combo.
Range field
Range value

Selects

Select box: Some help text regarding the select box
Required select box
Required select box (no asterisk)
Select with button
Multiple select

Other inputs

Textarea
Textarea (prefilled): Some prefilled content... Some help text regarding the textarea with some really long text that should overflow and wrap
Textarea: Row 1 Row 2 Row 3 Row 4 This textarea has the data-max-rows set to 3, so the textarea will not expand past 3 rows.
Disabled autosize textarea: Row 1 Row 2 Row 3 Row 4 Row 5 Row 6 This textarea element has the data-disable-autosize attribute applied, and has rows set to 5.
Auto-grow textarea: Start typing to see me grow
Auto-grow input

Alignment classes

align-start
align-center
align-end

align-start
align-center
align-end

Default Input focus
Ctrl Input focus
Alt Input focus
Meta Input focus
Number focus
Textarea focus: Special character keyboard shortcuts also require Shift to be pressed.
Date focus: Hover over these inputs to see the keyboard shortcut
Color focus
Range focus
Select focus

Tables

Table with inputs and buttons

Table Title
Column 1	Column 2	Column 3
1		Link button 1
2		Link button 2
3		Link button 3

Table using `colgroups` to define column width

Table Title
Column 1	Column 2	Column 3
20%	50%	30%

Nested fieldsets

Fieldset 1

Input

Here is some subtext.

Input 2

Here's some small subtext.

Input 3

Here's some bold subtext.

Input 4

Here is some subtext.

Here is some more subtext.

Fieldset 2

Input 1
Input 2
Select

Fieldset 3

Input A
Input B
Input C
Input D

Detail elements

Detail element

Detail input
Detail input
Detail input
Detail input

Another detail element with a nested fieldset

Detail input

Nested fieldset

Nested fieldset input

Buttons

Standard button
Input button
Submit input
Reset input

Button link

Flexbox button layout pattern with two submit buttons:

Flexbox button layout pattern with three submit buttons:

Colspan classes

colspan-1
colspan-1
colspan-2
colspan-4
colspan-3
colspan-1
colspan-full
colspan-5

colspan-1

Input A
Input B
Input C
Input D

colspan-2

Input A
Input B
Input C
Input D

colspan-3

Input A
Input B
Input C
Input D

colspan-full

Input A
Input B
Input C
Input D

P tag elements

Checkbox

Text input

Textarea

Some regular text with other elements inside of it

Semantic form tables

Table with `semanticForms` class

Table Title
Column 1	Column 2	Column 3
1		Link button 1
2		Link button 2
3		Link button 3

Table with a `form` in a cell

Table Title
Column 1	Column 2
Some text

Unstyled table

Table Title
Column 1	Column 2	Column 3
1	A	a
2	B	b
3	C	c

Low flow (JavaScript disabled) styling

Adding the lowFlow class to the form element removes all JS enhancements.

Name
Prefilled field
No placeholder
Password field: Password should be at least 8 characters long.

Single form input

Fieldset legend

Inputs

Email field
Telephone field
URL field
Search field
Number
Input with label help text: Some help text
Invalid field
Valid field
Required field
Select box: Some help text regarding the select box
Checkboxes: One
Two
Three
Single checkbox
Radios: One
Two
Three
Color field
Date field
Time field
Datetime-local field
Month field
Week field
File field
Range field
Textarea
Textarea (prefilled): Some prefilled content... Some help text regarding the textarea with some really long text that should overflow and wrap

Nested fieldsets

Nested fieldset

Input

Here is some subtext.

Input 2

Here's some small subtext.

Input 3

Here's some bold subtext.

Input 4

Here is some subtext.

Here is some more subtext.

Another nested fieldset

Input
Input 2
Select

Detail elements

Details summary

Detail input
Detail input
Detail input
Detail input

Another details element

Detail input

Colspan classes

colspan-1
colspan-1
colspan-2
colspan-4
colspan-3
colspan-1
colspan-full
colspan-5

colspan-1

Input A
Input B
Input C
Input D

colspan-2

Input A
Input B
Input C
Input D

colspan-3

Input A
Input B
Input C
Input D

colspan-full

Input A
Input B
Input C
Input D

P tag elements

Checkbox

Text input

Textarea

Some regular text with other elements inside of it

Buttons

Button link

Flexbox button layout pattern with two submit buttons:

Flexbox button layout pattern with three submit buttons:

Semantic Forms

High flow (JavaScript enabled) styling

Table with inputs and buttons

Table using colgroups to define column width

Semantic form tables

Table with semanticForms class

Table with a form in a cell

Unstyled table

Low flow (JavaScript disabled) styling

Inputs

Nested fieldsets

Detail elements

Colspan classes

P tag elements

Buttons

Non-form related HTML elements

Table using `colgroups` to define column width

Table with `semanticForms` class

Table with a `form` in a cell