Display Options

Standard Display Options

Optgroups / Select Option Groups
This allows select options to be grouped within different headings.
The disadvantage is that you don't know until you click into the dropdown that sections exist. This can also be confusing for less-than-experienced users who might become frustrated trying to select the heading option.
Placeholder text will display before in empty fields. It's generally used to give the user more information about what is expected within the field.
It's not a good idea to totally rely on placeholder text as certain browsers do not support it.
Please enter your full, 10-digit phone number.
Help Text
This text generally displays below the form field to give the user just a tad more information before they fill out the field.

Javascript Display Options

Show, Hide, and Toggle

This special Javascript-powered display will allow certain fields to be shown or hidden depending on the user's selections.

As in the examples, the functionality can be used to display additional data, or show additional form fields (or even sections of fields) depending on the user's selections. These fields can also be validated on the backend as needed.

After submitting, the form can remember the user's previous selections and correctly display or hide the fields as needed if the user needs to resubmit.


What is the etymology for "Mustard"?

Mustard’s name is a contraction of the Latin mustum ardens, meaning “burning wine.”

Clicking the link or the checkbox to the left will toggle (show, then hide) the respective information associated with it.
Radio Buttons
Selecting the last two options of the dropdown will display their respective additional field and choosing "Other" from the radio buttons will display its additional field.
Choosing any of the other options will again hide the unnecessary field(s).

Add Another / Templating

This functionality allows the user to add and remove entire sections of fields. Most common uses of this is employment history, past addresses, and education information.

This can contain as many fields as necessary and each can be validated as needed.

Click "Add Anther Reference" to add another set of fields.
Click the "×" to the right of the fields to remove that set of fields.