Semantic Forms

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

Table of Contents

High flow (JavaScript enabled) styling

Password should be at least 8 characters long.

Password should be at least 8 characters long.

Password should be at least 8 characters long.

Inputs
Selects
Checkboxes
Radios
Other inputs
Alignment classes
Keyboard shortcuts
Tables

Table with inputs and buttons

Table Title
Column 1Column 2Column 3
1
  • Link button 1
  • 2
  • Link button 2
  • 3
  • Link button 3
  • Table using colgroups to define column width

    Table Title
    Column 1Column 2Column 3
    20%50%30%
    Nested fieldsets
    Fieldset 1

    Here is some subtext.

    Here's some small subtext.

    Here's some bold subtext.

    Here is some subtext.

    Here is some more subtext.

    Fieldset 2A
    Fieldset 3A
    Fieldset 3
    Fieldset 2B
    Detail elements
    Detail element
    Another detail element with a nested fieldset
    Nested fieldset
    Buttons
    Button link

    Flexbox button layout pattern with two submit buttons:

  • Flexbox button layout pattern with three submit buttons:

  • Colspan classes
    colspan-1
    colspan-2
    colspan-3
    colspan-full
    P tag elements

    Some regular text with other elements inside of it


    Semantic form tables

    Table with semanticForms class

    Table Title
    Column 1Column 2Column 3
    1
  • Link button 1
  • 2
  • Link button 2
  • 3
  • Link button 3
  • Table with a form in a cell

    Table Title
    Column 1Column 2
    Some text
  • Unstyled table

    Table Title
    Column 1Column 2Column 3
    1Aa
    2Bb
    3Cc

    Low flow (JavaScript disabled) styling

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

    Password should be at least 8 characters long.

    Password should be at least 8 characters long.

    Password should be at least 8 characters long.

    Inputs
    Selects
    Checkboxes
    Radios
    Other inputs
    Alignment classes
    Keyboard shortcuts
    Tables

    Table with inputs and buttons

    Table Title
    Column 1Column 2Column 3
    1
  • Link button 1
  • 2
  • Link button 2
  • 3
  • Link button 3
  • Table using colgroups to define column width

    Table Title
    Column 1Column 2Column 3
    20%50%30%
    Nested fieldsets
    Fieldset 1

    Here is some subtext.

    Here's some small subtext.

    Here's some bold subtext.

    Here is some subtext.

    Here is some more subtext.

    Fieldset 2A
    Fieldset 3A
    Fieldset 3
    Fieldset 2B
    Detail elements
    Detail element
    Another detail element with a nested fieldset
    Nested fieldset
    Buttons
    Button link

    Flexbox button layout pattern with two submit buttons:

  • Flexbox button layout pattern with three submit buttons:

  • Colspan classes
    colspan-1
    colspan-2
    colspan-3
    colspan-full
    P tag elements

    Some regular text with other elements inside of it

    This is some regular HTML that should not be affected by any semantic forms styles

    This is a div
    This is a block quote
    A link to the semantic forms repo
    • unordered list 1
    • unordered list 2
    • unordered list 3
    1. ordered list 1
    2. ordered list 2
    3. ordered list 3
  • menu list 1
  • menu list 2
  • menu list 3
  • description list title
    description list value