Label Float.css HTML Form Plugin

Getting Started

LabelFloat.css is a plugin developed by Dave Berning. This plugin makes creating exciting animated forms quick and easy. It's based off of Chris Coyier's take on stylized floating labels; using labels as placeholders. Installation is simple and creating your webform is just as easy (as long as you follow the proper HTML structure). Let's get started!

LabelFloat.css is compatible with Chrome, Firefox, Safari, Opera, Edge, and Internet Explorer 9 and up.

Dependancies

When using LabelFloat.css, make sure you include it's dependancies. These can be referenced in the or the at end before the closing tag.

<script src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script><!-- jQuery Validate CDN -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script><!-- Modernizr CDN -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script><!-- Selectivir CDN -->

This is optional, but you can reference LabelFloat.js instead of using Modernizr and Selectivizr. If you want to limit load times and request this is ideal.

<script src="js/LabelFloat.js"></script>

Reference LabelFloat.css Stylesheet

<link rel="stylesheet" href="css/LabelFloat.css">

Install with Bower

$ bower install labelfloat-css

Initialize jQuery Validate

<script>

	$("#form-ID").validate({
		errorPlacement: function(error, element) {
			error.appendTo(element.prev());
		}
	});

</script>

Structure your HTML form

<form>

<div><!-- required div to wrap input/label -->

	<input id="input-id" name="input-name" type="text">

	<label class="valid" for="input-name"><span>First Name</span></label><!-- Required class="valid" and span tag -->

</div> 

</form>

Labels must come directly after the input or textarea. If you add a "br" after your input, this will not work. The text inside the "label" tags must be wrapped in "span" tags.

Using radio buttons, checkboxes, or select option dropdowns


<div class="lf-radio"><!-- required class and div wrap. Each radio button in its own div. -->
	<input id="radio-id" name="radio-name" type="radio">
	<label class="valid" for="radio-name">Radio Button 1</label>
</div>

<div class="lf-radio lf-radio-hollow"><!-- radio button with border, hollow center -->

When using with Bootstrap

The same basic HTML structure applies, just make sure you wrap your entire form with .bootstrap.


<div class="bootstrap"><!-- required class and form wrap -->
	<form class="row">

		<div class="col-lg-6">
			<div class="form-group">
				<input id="firstname" class="form-control" name="firstname" type="text">
				<label class="valid" for="firstname"><span>First Name</span></label>
			</div><!-- end form-group -->
		</div><!-- end col -->

	</form>
</div><!-- end bootstrap -->

Structure your Bootstrap form anyway you like. Any column size, any number of div's etc.

Customizations


/* COLOR CODES: FIND AND REPLACE
	----------------------------------------
	    VALID FOCUS STATE: #366b7b; (demo: blue)
	    VALID NOT FOCUS STATE: #ccc; (demo: grey)
	    INVALID FOCUS STATE: #DA5757; (demo: red)

	    SUBMIT BUTTON: #747474;
	    SUBMIT BUTTOB HOVER: #464646;

	    *NOTE: Any color you find and replace
	    will also replace the border color
	    for its respected states;
	--------------------------------------*/

Change the colors to the focus, inactive, and invalid focus states! Just find and replace the above HEX codes with another or other color value.

Create visually appealing HTML forms with full validation, completely in CSS

Try it!