Description: Form elements allow the user to interact with the application. The form elements are:
508 Guidelines: When a form is present, providing instructions for the user on how to complete the form should appear before the form. Every form element must:
TIP:
<div class="control form-group">
<label for="fName">First Name</label>
<input class="form-control" type="text" name="name" title="Please enter in your first name only" id="fName" />
</div>
<div class="control form-group">
<label for="email">Email Address</label>
<input class="form-control" type="email" name="email" title="Please enter in your email address" id="email" />
</div>
<div class="control form-group">
<label for="monitors">How many computer monitors do you have?</label>
<select class="form-control" name="monitors" title="Use up and down arrow keys to view options and press
enter to select" id="monitors" required>
<option> </option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="control form-group">
<label for="drop-multi-select">How many computer monitors do you have?</label>
<select multiple class="form-control" name="monitors" title="Use up and down arrow keys to view
options and press enter to select. To select multiple options hold down the shift key
and use arrow keys." id="drop-multi-select" size="5">
<option> </option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group" role="application">
<label for="js-states">Please select a state</label>
<select class="form-control typeahead-select" id="js-states" title="Press enter to browse through select options">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</div>
<script src="js/select2.full.js"></script>
<script>
$(document).ready(function() {
// we assign the width to 100% so that the parent element decides the width of the select such as in bootstrap
// otherwise the width of 100% is not assigned if the select is created when it's not visible
$(".typeahead-select").select2({width: '100%' });
});
</script>
<div class="form-group">
<label for="aoSelect1">Please select a state</label>
<div class="demo-well typeahead-select-fixed-wrapper" role="application" >
<!-- this height is defined in-line so that you know that the height of the always-open typeahead select is defined by it's wrapping element -->
<select class="form-control typeahead-select-fixed" id="aoSelect1">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</div>
</div>
<script src="js/select2.full.js"></script>
<script>
$(document).ready(function() {
// always open
$(".typeahead-select-fixed").each(function(){
var t = $(this);
var targetDiv = t.parent();
t.select2({
width: '100%',
dropdownParent: targetDiv,
closeOnSelect:false,
theme: "always-open",
placeholder: "",
initSelection: function(element, callback) {
}
}).on('select2:open',function(){
// prevents the auto focus of the always open listing
var t = $(this);
t.parent().find('.select2-search input').prop('focus',false).attr('title','Begin typing to search for results. The results are listed below. Press the up and down arrow keys to review the results. Press enter to select.');
$(document.body).off('mousedown.select2.select2-' + t.attr('id'));
}).on('select2:closing',function(){
// prevents the closure of the listing
return false;
}).on('change',function(){
// write the function you'd like to use here.
alert(t.val());
}).select2("open"); // opens the options automatically.
});
});
</script>
<div class="form-group">
<label for="msSelect1">State selection</label>
<div class="typeahead-select-ms-wrapper" role="application" >
<select class="form-control typeahead-select-ms" name="theNameOfYourInput" id="msSelect1" data-selections-name="theNameOfYourInput">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
<div class="typeahead-select-ms-selections">
<span class="placeholder">Please select an item</span>
<button type="button" class="typeahead-select-ms-toggle-button" title="Press enter to browse through select options. To browse through your selections press tab."><i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-up" aria-hidden="true"></i></button>
<li class="typeahead-select-ms-selected media-list"></li>
</div>
</div>
</div>
<script src="js/select2.full.js"></script>
<script>
$(document).ready(function(){
// multiple selection
$(".typeahead-select-ms").each(function(){
var
t = $(this),
targetDiv = t.parent(),
selectionsDiv = targetDiv.find('.typeahead-select-ms-selections'),
toggleButton = selectionsDiv.find('.typeahead-select-ms-toggle-button'),
targetSelected = selectionsDiv.find('.typeahead-select-ms-selected'),
selectionsName = t.data('selections-name'),
messages = {
filterTitle:'Type to filter options, use the up and down arrow keys to brouse through them and press enter to choose an option.',
removal:'<span class="sr-only">Press enter to remove </span>[v]<span class="sr-only"> from the selected items</span> <i class="fa fa-times"></i>',
},
createSelection = function(label, val){
var li = $(document.createElement('li')). //create the selected items
html('<span class="sr-only">'+label+'</span>').
append('<input type="hidden" name="'+selectionsName+'" value="'+val+'" />').
append(
$(document.createElement('button')).attr({
type:'button'
}).
attr({
'data-selected-value':val,
'class':'btn btn-default btn-sm'
}).
html(messages.removal.replace('[v]',label)).
click(function(){
// here you define the click function for selection removal.
var
th = $(this),
list = th.parent().parent(),
sv = th.data('selected-value'),
mainList = th.parent().parent().parent().parent(),
mainSelect = mainList.find('select')
;
th.focus(function(){
selectionsDiv.addClass('active');
}).blur(function(){
selectionsDiv.removeClass('active');
});
selectionsDiv.find('button').not(th).focus();
th.parent().remove();
mainSelect.find('option[value='+sv+']').removeAttr('disabled');
mainSelect.select2(msArgs);
if(list.children().length===0){
list.parent().find('.placeholder').show();
}
})
)
;
targetSelected.append(li);
},
toggleSelect = function(){
if (!t.data('open')){
t.select2('open');
toggleButton.addClass('open');
selectionsDiv.addClass('active');
} else {
t.select2('close');
toggleButton.removeClass('open');
}
},
msArgs = {
width: '100%',
dropdownParent: targetDiv,
theme: "ms",
placeholder: "",
initSelection: function(element, callback) {
}
};
// select it's closed, so let's set it's data flag to closed
t.data('open',false);
// function for the toggling of the options dropdown
// the actual button (needed for 508)
toggleButton.click(function(){
toggleSelect();
}).focus(function(){
selectionsDiv.addClass('active');
}).blur(function(){
selectionsDiv.removeClass('active');
});
// the whole box minus the buttons inside (toggle and selections)
selectionsDiv.click(function(e){
if (e.target.tagName!=='BUTTON'){
toggleSelect();
}
});
// initialize select2
t.select2(msArgs).on('select2:open',function(){
var t = $(this);
// set the open flag
t.data('open',true);
t.parent().find('.select2-search input').attr('title',messages.filterTitle);
// remove mousedown event that closes select.
$(document.body).off('mousedown.select2.select2-' + t.attr('id'));
}).on('select2:close',function(){
toggleButton.focus().removeClass('open');
// set the flag
$(this).data('open',false);
}).on('select2:select',function(){
var
t = $(this),
p = t.parent(),
val = t.val(),
optionSelected = t.find('option[value="'+val+'"]'),
label = optionSelected.text();
// fo create the selection button
createSelection(label,val);
//disable option within list
optionSelected.attr('disabled','disabled');
//reinitialize select2
t.select2('close').select2(msArgs);
//re-focus dropdown toggle button
p.find('.typeahead-select-ms-toggle-button').focus().removeClass('open');
// hide the placeholder (cause you've selected something)
p.find('.placeholder').hide();
});
});
});
</script>
<div class="control form-group">
<div class="checkbox">
<label for="checkGreat">
<input type="checkbox" checked value="option1" name="checkBox" title="Press spacebar to select" id="checkGreat" /> This one is a great option
</label>
</div>
<div class="checkbox">
<label for="checkNotSoGreat">
<input type="checkbox" value="option2" name="checkBox" title="Press spacebar to select" id="checkNotSoGreat" /> This one, meh, not so much
</label>
</div>
<div class="checkbox">
<label class="checkbox-inline" for="checkInline1">
<input type="checkbox" value="option1" name="checkBox1" title="Press spacebar to select" id="checkInline1" /> This check is inline
</label>
<label class="checkbox-inline" for="checkInline2">
<input type="checkbox" value="option2" name="checkBox2" title="Press spacebar to select" id="checkInline2" /> This check is also inline
</label>
</div>
</div>
<div class="control form-group">
<div class="radio">
<label for="radio1">
<input type="radio" checked value="radio1" name="radioButtons" title="Press enter to select, to view next option use arrow keys" id="radio1" /> Pick me
</label>
</div>
<div class="radio">
<label for="radio2">
<input type="radio" value="radio2" name="radioButtons" title="Press enter to select, to view next option use arrow keys" id="radio2" /> No, pick me!
</label>
</div>
<div class="radio">
<label class="radio-inline" for="radioInline1">
<input type="radio" value="radioInline1" name="radioButtons" title="Press enter to select, to view next option use arrow keys" id="radioInline1" /> This radio is inline
</label>
<label class="radio-inline" for="radioInline2">
<input type="radio" value="radioInline2" name="radioButtons" title="Press enter to select, to view next option use arrow keys" id="radioInline2" /> This radio is also inline
</label>
</div>
</div>
<div class="control form-group">
<label for="moreInfo">More Information</label>
<textarea class="form-control" rows="3" name="moreInfo" title="Please enter in more information" id="moreInfo"></textarea>
</div>
<div class="control form-group form-group-validation">
<label for="firstNameValidation">First Name Validation Successful</label>
<div class="input-validation">
<input id="firstNameValidation" class="form-control validation-success" type="text" name="name"
placeholder="First Name" value="Albert" title="Please enter in your first name only" />
<i class="fa fa-check-circle fa-2x text-success"></i>
</div>
</div>
<div class="control form-group form-group-validation">
<label for="firstNameValidationUnsuccessful">First Name Validation Unsuccessful</label>
<div class="input-validation">
<input class="form-control validation-warning" type="text" id="firstNameValidationUnsuccessful"
name="nameValidationUnsuccessful" value="Rog3r" placeholder="First Name" />
<i class="fa fa-exclamation-triangle fa-2x text-danger"></i>
<p class="text-danger">Please enter in a valid first name.</p>
</div>
</div>
<!-- Markup for Input Slider -->
<div class="control form-group form-group-slider">
<div id="range-slider" class="range-slider"></div>
<label for="pain-value-input" class="sr-only">Enter in a value from zero to ten.</label>
<input type="text" id="pain-value-input" class="range-value-input form-control input-sm" maxlength="2" />
</div>
<!-- Javascript for Input Slider -->
$(function() {
$('.range-slider').noUiSlider({
start: 0,
step: 1,
range: {
min: 0,
max: 10
},
format: wNumb({
decimals: 0
})
});
$('.range-slider').noUiSlider_pips({
mode: 'values',
values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
density: 10
});
$('.range-slider').Link('lower').to($('#pain-value-input'));
});
<div class="control form-group">
<label for="loading-input">Loading input</label>
<input class="form-control loading" type="text" name="loadingInput" title="Enter in something amazing" id="loading-input" />
</div>
<div class="control form-group">
<label for="loading-disabled-input">Loading on disabled input</label>
<input disabled class="form-control loading" type="text" name="loadingDisabledInput" title="Enter in something amazing when this is not disabled" id="loading-disabled-input" />
</div>
<div class="control form-group">
<label for="loading-drop-multi-select">Loading select</label>
<select multiple class="form-control loading" name="monitors" title="Select a number of your choosing" id="loading-drop-multi-select" size="5">
<option> </option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="control form-group">
<label for="loading-disabled-drop-multi-select">Loading on disabled select</label>
<select disabled multiple class="form-control loading" name="monitors" title="Select a number of your choosing when this is not disabled" id="loading-disabled-drop-multi-select" size="5">
<option> </option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>