Pattern Library (ver. 1.9)

Enhanced form controls

Enhanced form controls, like clear and show password buttons can be generated dynamically for supported input types.

Demo

Type something into the input below and an '×' or clear button will appear on the right-hand side. Clicking this button will clear the input.


Type something into the input below and an eye icon or show password button will appear on the right-hand side. Clicking this button will toggle displaying the password in plain text or as asterisks.

How to use

1. Load the JavaScript files to your page and call one of the initialization lines:


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.validate.min.js"></script><!-- Optional: This file handles form validation. -->
<script src="js/coc.forms.js"></script>
<script>
	$( document ).ready( function() {
		// Use the following line to initialize the validation AND to generate the enhanced form controls.
		COC.Form.init();

		// OR use the following line to initialize ONLY the enhanced form controls.
		COC.Form.initFormControls();
	});
</script>

2. Add this data attribute to any forms you wish to generate the enhanced form controls for: data-pl-frm-ctrl="true".


<!-- Example form with the data-attributes to trigger the validation AND the enhanced form controls. -->
<form data-pl-frm-vld="true" data-pl-frm-ctrl="true">
	...
</form>

<!-- Example form with the data-attribute to trigger the enhanced form controls ONLY. -->
<form data-pl-frm-ctrl="true">
	...
</form>

Supported input types

The following input types are supported:

Input type Type of form control button generated
type="text" Clear input
type="email" Clear input
type="search" Clear input
type="url" Clear input
type="password" Show password