Skip to Content Skip to Navigation

User Experience Toolkit

Forms Overview

Example:
HTML:
	<form class="ux-form">
	</form>

UX-Form Layout starts with the HTML form tag. By applying the class ux-form to the form tag, the form elements will automatically inherit UX form styles.

Deprecated in v.0.4.8, ux-form-top and ux-form-side is now just ux-form.

Form elements should be properly structured with labels for accessibility concerns. Please reference each type of form element for specific implementation.

Form Labels

Example:

HTML:
	<form class="ux-form">
	...
	<p>
		<label for="HTMLinput1">
			<span>Text Box Label</span>
			<input type="text" id="HTMLinput1" />
		</label>
	</p>
	...
	</form>

Form input elements should be wrapped inside of label tags for accessibility reasons. Label tags will require the mandatory use of the for attribute matching with the associated form element ID.

Labels should also contain a span around the actual label text. This is required to provide proper placement and styling.

Thanks for the feedback! It will help us improve your experience.