Skip to the main content


Forms

Forms allow users to interact with the interface, set preferences, and enter any necessary personal information. They also form the base of individual exercises within each class. The examples below demonstrate how to use each type of form control and provides any applicable display options. Note the markup in each case to get a sense of semantics and structure.

Forms Preview

Text inputs

Personal Details

Example: Jane Doe

Example: jane@email.com

Your email address will never be shared. We promise.

You must provide a valid, properly-formed email address.

Your email address will never be shared. We promise.

Example: Jane Doe

You must provide your real name.

Search

Search examples

(This field has a label that's hidden yet still accessible.)

Telephone number

Telephone number examples

Example: 800-555-1515

Select Menus

Examples of various select menus
You must select your favorite color.
You must select your favorite color.

Radios

How would you prefer to be contacted? (default radio buttons)
Rates apply. Please consult your plan.
We will never spam you. Pinky swear.
How would you prefer to be contacted? (enhanced radio buttons)
Rates apply. Pelase consult your plan.
We will never spam you. Pinky swear.

Checkboxes

Select your favorite pizza toppings (default checkboxes)
What is your favorite cereal? (enhanced checkboxes)

Textareas

Examples of textareas
You must provide your real name.

Sliders

Progress bars

Example form

Create an account

Before you can continue with ACME learning, you'll need to create an account with us. They're free and we don't spam you with ACMESpam.

Required information

This allows us to personalize your experience.

Example: username@domain.com

Example: 800-555-1515

You'll log in with this for future visits.

Additional and optional information

Where you'll be receiving your ACME packages.