HTML Forms Best Practice Cheetsheet

Sections

User authentication / signup

Authentication Password duplication (For signup or reset)

Personal Information

Split Name Fields
Split Birthday

Organization / Business Information

Phone Numbers

Split Phone Number
Split National Number
Split Local Number

Contact Information

Addresses

Split Street Address

Credit Card Information

Split Credit Card Name
Combined Month Expiration
Separate Month / Year Expiration

Money / Currency

Date / Time

Buttons

Other Form Elements

Input with Datalist

Note: set display:none on datalist element to hide options from browsers that don't understand the datalist element.

Multiselect without Option Groups
Select w/ Optgroups
Checkboxes

Select your favorite fruit(s)

Output/Display Elements
70 %
65 Degrees
The Output Element

See the MDN article.

* = 32

Anti-Patterns

Deprecated Elements
Multiple Select with Optgroups

Note: Browser support varies. Recommend against for maximum compatibility.