Form Patterns

Indicates a required field

Field that is edited elsewhere

12345

Benjamin GrahamChange Name

Code

HTML

<fieldset>
    <legend>Field that is edited elsewhere</legend>
    <div class="form-group">
        <label class="control-label">CFA Institute ID</label>
        <p>12345</p>
        <label class="control-label">Full Name</label>
        <div>
            <p class="form-control-static">
                Benjamin Graham<span class="edit"><a href="#">Change Name</a></span>
            </p>
        </div>
    </div>
</fieldset>
                

Documentation

Problem Being Solved

Not all fields can be edited within a given form.

When To Use

This pattern should be used to display information that must be edited elsewhere (name), or cannot be changed at all (CFA Institute ID).

When Not To use

If the data can reasonably be made editable within the form, it should be.

Checklists and Multiselect Descriptive text can display here
Descriptive text can display here

Code

HTML

<fieldset>
<legend>Checklists and Multiselect</legend>
<label class="control-label required" for="checkbox" aria-required="true">Simple checkbox</label>
<span class="help-block">Descriptive text can display here</span>
<div id="checkbox" class="form-group">
    <div class="checkbox">
        <label>
            <input type="checkbox" value="" />
            <span class="checkbox-label">Red</span>
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="" checked />
            <span class="checkbox-label">Green</span>
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="" />
            <span class="checkbox-label">Blue</span>
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="" checked/>
            <span class="checkbox-label">Orange</span>
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="" disabled/>
            <span class="checkbox-label">Disabled</span>
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="" disabled checked/>
            <span class="checkbox-label">Checked Disabled</span>
        </label>
    </div>
</div>
<label class="control-label required" aria-required="true">Multiselect list</label>
<span class="help-block">Descriptive text can display here</span>
<div class="form-group">
    <select multiple="multiple" name="ProfessionalDesignations.SelectedDesignations">
        <option value="ACA - Associate Chartered Accountant">ACA - Associate Chartered Accountant</option>
        <option value="ACCA Qualification">ACCA Qualification</option>
        [...]
        <option value="Other (please specify)">Other (please specify)</option>
    </select>
</div>
</fieldset>
                

Documentation

Problem Being Solved

The user needs to select multiple values from a list.

When To Use

The simple checklist pattern should be used for short lists of 1-4 options.

The multiselect pattern should be used for longer lists of 5+ options.

When Not To use

If the user is required to select a single value, see the radio button patterns.

Formatting

Set ViewBag.multiselect = true to load the script for multiselect lists.

Date Patterns
Day
Month
Year
Date range help text.
to

Code

HTML

<fieldset>
    <legend>Date Patterns</legend>
    <div class="form-group">
        <label class="control-label required" for="Date_Entry">Date entry field</label>
        <div id="Date_Entry" class="form-group form-inline row validation-input-container">
            <div class="col-sm-4 col-md-2">
                <span class="help-block">Day</span>
                <input value="13" aria-describedby="text-help-block" class="form-control" data-msg-number="The field Day must be a number." data-msg-range="Please enter a valid Day." data-msg-required="Day is a required field." data-rule-number="true" data-rule-range="[1,31]" data-rule-required="true" id="Day" name="Day" type="text" aria-required="true">
            </div>
            <div class="col-sm-4 col-md-3">
                <span class="help-block">Month</span>
                <select role="combobox" aria-describedby="select-list-help-block" class="form-control" data-msg-number="The field Month must be a number." data-msg-range="Please enter a valid Month." data-msg-required="Month is a required field." data-rule-number="true" data-rule-range="[1,12]" data-rule-required="true" id="Month" name="Month" aria-required="true">
                    <option value=""></option>
                    <option value="1">January</option>
                    [...]
                    <option value="12">December</option>
                </select>
            </div>
            <div class="col-sm-4 col-md-2">
                <span class="help-block">Year</span>
                <input value="1987" aria-describedby="text-help-block" class="form-control" data-msg-max="Please enter a valid Year." data-msg-min="Please enter a valid Year." data-msg-number="The field Year must be a number." data-msg-required="Year is a required field." data-rule-max="2017" data-rule-min="1900" data-rule-number="true" data-rule-required="true" id="Year" name="Year" type="text" aria-required="true">
            </div>
        </div>
        <label class="control-label required">Date Picker</label>
        <span class="help-block"></span>
        <div class="col-xs-3 input-group date validation-input-container form-group" data-provide="datepicker">
            <input id="dp" data-rule-required="true" placeholder="dd/mm/yyyy" data-date-format="dd/mm/yyyy" data-rule-date="true" type="text" class="form-control">
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </div>
        </div>
	<label for="start-date" class="control-label form-group">Select a date range</label>
	 <div class="help-block text-danger" >Date range help text.</div>									 
	   <div class="input-daterange input-group form-group validation-input-container" id="datepicker" >
	   <div><input class="form-control" data-msg-date="The field StartDate must be a date." data-msg-required="Start Date is required." data-rule-date="true" data-rule-required="true" id="start-date" name="StartDate" placeholder="mm/dd/yyyy" value="" aria-required="true" type="text" ></div>
	   <div class="input-group-addon"><span>to</span></div>
	   <div><input class="form-control" data-msg-comparedates="End Date must occur on or after Start Date." data-msg-date="The field EndDate must be a date." data-msg-required="End Date is required." data-rule-comparedates="#start-date" data-rule-date="true" data-rule-required="true" id="end-date" name="EndDate" placeholder="mm/dd/yyyy" value="" aria-required="true" type="text" ></div></div>
	 </div>
</fieldset>

Documentation

Problem Being Solved

The user needs to enter a single date value.

When To Use

Because the default order for day and month varies globally, separate day and month fields are preferred for user-facing forms. This pattern requires more clicks but reduces the chance of error.

The date picker pattern can be used if speed is more important than accuracy, and the date is likely to be recent.

Note about Date Range Picker

Date range picker is made up of two single datepickers combined into one and mostly used for "from" & "to" dates. A validation method called "comparedates" was created specifically to compare dates from these two inputs. These date range pickers only use "mm/dd/yyyy" format unlike our global datepicker format "dd/mm/yyyy". This was done due to a limitation where only mm/dd/yyyy formats can be converted to JavaScript Date object for comparison.

Usage

Add data-rule-comparedates="#start-date" to the second date input where start-date is the ID for the first date input.

When Not To use

In general, the date entry field pattern should be used.

Formatting

Set ViewBag.datepicker = true to load the script.

Text Fields
Descriptive text can display here
Descriptive text can display here

Code

HTML

<fieldset>
    <legend>Text Fields</legend>
    <label class="control-label required" for="Text_Input" aria-required="true">Text field</label>                
    <div id="Text_Input" class="form-group">
        <span class="help-block">Descriptive text can display here</span>
        <input type="text" class="form-control" aria_describedby="text-help-block" />
    </div>

    <label class="control-label" for="Text_Input">Inline text field</label>
    <div id="Text_Input" class="form-group form-inline">
        <span class="help-block">Descriptive text can display here</span>
        <input type="text" class="form-control" aria_describedby="text-help-block" />
    </div>
</fieldset>
                

Documentation

Problem Being Solved

The user needs to enter text values.

When To Use

This pattern is used to allow the user to enter short strings of text. Inputs should be restricted when appropriate. For example, if the user is entering a year, input should be restricted to integers only.

When Not To use

If a more restrictive pattern (such as radio buttons) prevents user error or increases data quality, then that pattern should be used instead.

Radio Buttons, Select Lists, and Filter Lists Descriptive text can display here
Descriptive text can display here

Code

HTML

<fieldset>
    <legend>Radio Buttons, Select Lists, and Filter Lists</legend>
    <label class="control-label required" for="Radio" aria-required="true">Simple radio buttons</label>
    <span id="radio-help-block" class="help-block">Descriptive text can display here</span>
    <div id="Radio" class="radio">
        <label for="Yes">
            <input id="Yes" aria-describedby="radio-help-block" name="Yes" required="required" type="radio" value="Yes" aria-required="true">
            <span class="radio-label">Yes</span>
        </label>
        <label for="No">
            <input id="No" aria-describedby="radio-help-block" name="No" required="required" type="radio" value="No" aria-required="true">
            <span class="radio-label">No</span>
        </label>
        <label for="PreferNotToAnswer">
            <input id="PreferNotToAnswer" aria-describedby="radio-help-block" name="PreferNotToAnswer" required="required" type="radio" value="Prefer Not To Answer" aria-required="true">
            <span class="radio-label">Prefer not to answer</span>
        </label>
        <label for="disabledradio">
            <input id="disabledradio" aria-describedby="radio-help-block" name="radiodisabled" required="required" type="radio" value="Disabled" disabled aria-required="true">
            <span class="radio-label">Disabled</span>
        </label>
        <label for="checkedDisabledradio">
            <input id="checkedDisabledradio" aria-describedby="radio-help-block" name="radiodisabled" required="required" type="radio" value="Checked Disabled" disabled checked aria-required="true">
            <span class="radio-label">Checked Disabled</span>
        </label>
    </div>

    <label class="control-label required" for="Radio" aria-required="true">Radio buttons + content</label>
    <div id="radio1" class="radio radio-bordered">
        <label for="Bachelors">
            <input id="Bachelors" aria-describedby="bachelors-help-block" name="qualification" required="required" type="radio" value="Bachelors" aria-required="true">
            <span class="radio-label"><strong>Bachelors Degree</strong><br />I have completed a bachelor’s degree or equivalent program. Most CFA Program applicants have the education to enroll in graduate studies in the country where they earned their degree, so if you’re not sure if your program is comparable, ask your college or university.</span>
        </label>
    </div>
    <div id="radio2" class="radio radio-bordered">
        <label for="Final-Year-Student">
            <input id="Final-Year-Student" aria-describedby="Final-Year-Student-help-block" name="qualification" required="required" type="radio" value="Final-Year Student" aria-required="true">
            <span class="radio-label"><strong>Final-Year Student</strong><br />I am a student in the final year of my bachelor’s degree or equivalent program. I understand that I may register for the Level I Exam, but I must complete my degree program prior to registering for Level II.</span>
        </label>
    </div>

  <div class="form-group">
	<div class="radio">
	  <label for="input_radio">
		<input data-msg-required="Please select a test center location." data-rule-required="true" id="input_radio" name="SelectedLocation" value="Richmond" aria-required="true" type="radio">
		<span class="radio-label">
			Richmond, VA
			<sub>Thursday, 13 June 2019</sub>
		</span>
	  </label>
	</div>
  <div class="radio">
	<label for="input_radio1">
	  <input data-msg-required="Please select a test center location." data-rule-required="true" id="input_radio1" name="SelectedLocation" value="Charlottesville" aria-required="true" type="radio">
		<span class="radio-label">
		  Charlottesville, VA
		  <sub>Friday, 29 June 2019</sub>
	    </span>
	  </label>
    </div>
  </div>

    <label class="control-label required" for="Dropdown_Input" aria-required="true">Select List</label>
    <div id="Dropdown_Input" class="form-group">
        <span class="help-block">Descriptive text can display here</span>
        <select class="form-control" aria-describedby="select-list-help-block" required>
            <option value=""></option>
            <option value="1">
                Employer type 1
            </option>
            [...]
            <option value="5">
                Employer type 5
            </option>
            <option value="Other">
                Other
            </option>
        </select>
    </div>

    <label class="control-label required" for="Text_Input"  aria-required="true">Filter List</label>
    <span class="help-block">Descriptive text can display here</span>
    <div id="filterSelect" class="form-group filter-select">
        <select class="form-control filter-select-default" aria-describedby="select-list-help-block">
            <option></option>
            <option value="1">
                Afghanistan
            </option>
            [...]
            <option value="5">
                American Samoa
            </option>
        </select>
        <div class="filter-select-input hidden">
            <input type="text" />
            <div id="filterSelectResults" class="filter-select-results">
                <span class="filter-select-option" data-val="1">Afghanistan</span>
                [...]
                <span class="filter-select-option" data-val="5">American Samoa</span>
            </div>
        </div>
    </div>
</fieldset>
                

Documentation

Problem Being Solved

The user needs to select only one value from a list.

When To Use

The radio buttons pattern should be used for short lists of 2-4 options.

The select list pattern should be used for medium lists of 5-15 options.

The filter list pattern should be used for long lists of 16+ options only.

When Not To use

Do not use if multiple options need to be selected.

File Upload
If specific file types are required, say that here.

Code

HTML

<fieldset>
    <legend>File Upload</legend>
    <div class="form-group">
        <label class="control-label">Upload a file</label>
        <span class="help-block">If specific file types are required, say that here.</span>
        <input type="file" name="file" id="file" accept="image/png, image/jpeg" />
        <label for="file"><span class="selected-file"></span><span class="button">Browse</span></label>
    </div>
</fieldset>
                

Documentation

Problem Being Solved

We need a way to allow users to upload files.

When To Use

This pattern should be used when a user needs to upload an profile image or documentation regarding registration.

When Not To use

There are limited times when we accept user files, so this control will be used rarely.

Formatting

  • Fully customizing styles for this type of input will require javascript. When the script loads, it will add a class "js" to the <input> element.
  • If no javascript, the default browser control will display.
  • The script is currently included in cfa.global.js
  • Be sure to update the "accept" attribute to only take what is requested.