Form Fields
Forms Namespace
To take advantage of forms styling available in the style guide, the cx-form
class must be present on a parent element of all applicable form elements. The <form>
element is typically a good place to add this namespace class.
Form Elements as List Items
It is a good practice to wrap individual form items in list elements (<li>).
This practice is especially beneficial to users of assistive technologies (e.g. screen readers),
as the number of items in the form are announced (e.g. "Contact form with 5 items" and "Item 3 of 5 selected").
Labels
All form fields must have labels defined to provide context to users of assistive technologies. The label is what will be spoken by screen readers when a user navigates to a form field via keyboard.
Label Styling
In order for labels and other form elements to have the proper typographic styling, the
cx-copy class needs to be present. While you could certainly apply the class to
each individual label/form element, it is much easier to apply that class to the same element
that has the cx-form class. That way, the styling will be inherited by all children
of the form.
Inputs
Input elements & superCuteForms
The superCuteForms plugin used on crocs.com finds all <input> elements present on a page
and applies custom markup, styling, and browser events. Adding the
noSuperCute class to <input> elements will prevent this from happening.
The type of keyboard displayed to mobile users for form input can be specified with the "type" attribute. When the type is set to "tel", for example, mobile users will see a keyboard similar to the telephone keypad.
iOS keyboard for type="tel"
For iPhone users, the keyboard presented for inputs of type "tel" will allow number entry only. This can cause problems when users need to enter numeric zip codes with spaces or dashes (e.g. "555 5555" or "80503-1234").
These types are also used to validate the data entered into the field. For example, an input of type "email" will not validate unless the value entered is in a format such as "[email protected]". The examples shown below will be outlined in red when the value entered is invalid. In some cases, the "pattern" attribute is used to define valid characters (regex format).
For interactive examples of how type affects form validation and mobile keyboard display, check out inputtypes.com.
Required Fields
Mandatory form fields must be marked as such. This can be accomplished by adding the aria-required
attribute with a value of true.
HTML5 "required" attribute
The "required" attribute, introduced in HTML5, is effectively the same thing as aria-required,
but it is not supported in Internet Explorer 9 and below. This attribute does not require a value.
Inline Text with Buttons
Add the cx-button-row-align class to any element when it is in the same row as a
cx-button element and the line heights need to match.
Inline Fields with Buttons
Add the input-align class to any cx-button button when it is in the same row as an
<input> element and the heights need to match.