ryndel/.float-label.md

## .float-label.md

      
    Raw
  

              .float-label.md
            
          
    Float label

A web component that create a CSS-only floating label for input tags
Usage

The syntax for generating a float-label input is as follows:
<field is="float-label" label="Your name" type="text" id="name" name="name" 
placeholder="Your name" tabindex="1"></field> 

-The field tag and the is="float-label" are essential to creating the markup.
-You can customise the label and placeholder attributes as required.
-The type, id and name attributes should be included as best practice.
-Optionally add regular input attributes such as tabindex.
The above syntax will generate the following markup:
<field class="float-label">
  <input type="text" id="name" name="name" placeholder="Your name" tabindex="1">
	<label for="name">Your name</label>
</field>

Benefits

The float label pattern can be used for either desktop or mobile applications.
However it is most useful in mobile apps, where screen real estate becomes a premium. Recently designers have begun to omit the traditional form label in favor of using the placeholder text. This works fine, until the user clicks inside the field and the placeholder disappears and context is lost. The label tag is also an important feature for usability reasons.
The float label pattern gives the best of both worlds: removing the space taken up by labels whilst still providing important information and context for the user. As an added benefit, the lightweight CSS only animation gives further feedback to the user, helping the indicate the active field and improving UX, again especially for mobile where filling in fields can be tricky.
Credits

Initiated by and HTML/CSS by: Lyndel Thomas @ryndel
Converted to a web component by: Makis Tracend @tracend
The component extends the float-label pattern by Brad Frost, which was based off a Dribble by Matt Smith

  
## bower.json
{
	"name": "float-label",
	"version": "0.1.0",
	"description": "A web component that create a CSS-only floating label for ```input``` tags",
	"authors": [
		"Makis Tracend <makis@makesit.es>"
	],
	"license": "MIT",
	"keywords": [
		"common",
		"component",
		"float",
		"label",
		"polymer",
		"web-components"
	],
	"repository": {
		"type": "git",
		"url": "http://gist.github.com/11206510"
	},
	"ignore": [
		"node_modules"
	],
	"dependencies": {
		"platform": "Polymer/platform#~0.2.3",
		"polymer": "Polymer/polymer#~0.2.3"
	}
}

## component.html
<polymer-element name="float-label" extends="field" attributes="label type name placeholder autocomplete tabindex">
<link type="text/css" rel="stylesheet" href="./float-label.css">

<template>
	<input type="{{type}}" id="{{id}}" name="{{name}}" placeholder="{{placeholder}}" tabindex="{{tabindex}}" autocomplete="{{autocomplete}}">
	<label for="{{id}}">{{label}}</label>
</template>

<script>
	Polymer('float-label', {
		created: function() {
			// this is executed when the tag is inserted
			var field = this;

			// add class
			this.classList.add("float-label");

		}

	});

</script>

</polymer-element>

## example-component.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Float-label: Component example</title>

	<!-- Importing Web Component's Polyfill -->
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/platform.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/polymer.js"></script>

	<!-- Importing Custom Elements -->
	<link rel="import" href="component.html">

	<!-- Example styles -->
	<style>
	body {
		font-family: Helvetica, Arial, sans-serif;
	}

	input {
		margin-bottom: 10px;
		width: 300px;
		color: #5f5f5f;
		border: 1px solid #ccc;
		padding: 0;
		text-indent: 1rem;
		font-size: 1.25rem;
		text-align: left;
		background: #fff;
	}
	</style>
</head>
<body>

	<!-- Using Custom Elements -->
	<field is="float-label" label="Your name" type="text" id="name" name="name" placeholder="Your name" tabindex="1"></field>

	<field is="float-label" label="City or town" type="text" id="city" name="city" placeholder="City" tabindex="2"></field>

	<field is="float-label" label="Phone" type="tel" id="phone" name="phone" placeholder="Phone" tabindex="3"></field>

</body>
</html>

## example.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Float label</title>
<link type="text/css" href="float-label.css" rel="stylesheet">
	<style>
	body {
		font-family: Helvetica, Arial, sans-serif;
	}

	input {
		margin-bottom: 10px;
		width: 300px;
		color: #5f5f5f;
		border: 1px solid #ccc;
		padding: 0;
		text-indent: 1rem;
		font-size: 1.25rem;
		text-align: left;
		background: #fff;
	}
	</style>
</head>
<form>
	<field class="float-label">
		<input type="text" id="name" name="name" placeholder="Your name" tabindex="1">
		<label for="name">Your name</label>
	</field>
	<field class="float-label">
		<input type="text" id="city" name="city" placeholder="City" tabindex="2">
		<label for="city">City or town</label>
	</field>
	<field class="float-label">
		<input type="tel" id="phone" name="phone" placeholder="Phone" tabindex="3">
		<label for="phone">Phone</label>
	</field>
</form>
</html>

## float-label.css
.float-label {
	position: relative;
	display: block;
}
.float-label label {
	position: absolute;
	top: 5px;
	left: 1em;
	font-size: .8rem;
	opacity: 0;
}
.float-label input[type='text'], .float-label input[type='email'], .float-label input[type='tel'], .float-label input[type='password'] {
	height: 2.5rem;
	vertical-align: baseline;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
}
.float-label input, .float-label label {
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
.float-label input:focus + label {
	opacity: 1;
	display: inline-block;
	height: 10px;
	padding-bottom: 5px;
	color: #ccc;
}
.float-label input:focus {
	padding-top: 20px;
}
 .float-label input:focus::-webkit-input-placeholder {
	opacity: 0;
}
.float-label input:focus:-moz-placeholder {
	opacity: 0;
}
.float-label input:focus::-moz-placeholder {
	opacity: 0;
}
.float-label input:focus:-ms-input-placeholder {
	opacity: 0;
}
	{
	"name": "float-label",
	"version": "0.1.0",
	"description": "A web component that create a CSS-only floating label for ```input``` tags",
	"authors": [
	"Makis Tracend <makis@makesit.es>"
	],
	"license": "MIT",
	"keywords": [
	"common",
	"component",
	"float",
	"label",
	"polymer",
	"web-components"
	],
	"repository": {
	"type": "git",
	"url": "http://gist.github.com/11206510"
	},
	"ignore": [
	"node_modules"
	],
	"dependencies": {
	"platform": "Polymer/platform#~0.2.3",
	"polymer": "Polymer/polymer#~0.2.3"
	}
	}
	<polymer-element name="float-label" extends="field" attributes="label type name placeholder autocomplete tabindex">
	<link type="text/css" rel="stylesheet" href="./float-label.css">

	<template>
	<input type="{{type}}" id="{{id}}" name="{{name}}" placeholder="{{placeholder}}" tabindex="{{tabindex}}" autocomplete="{{autocomplete}}">
	<label for="{{id}}">{{label}}</label>
	</template>

	<script>
	Polymer('float-label', {
	created: function() {
	// this is executed when the tag is inserted
	var field = this;

	// add class
	this.classList.add("float-label");

	}

	});

	</script>

	</polymer-element>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Float-label: Component example</title>

	<!-- Importing Web Component's Polyfill -->
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/platform.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.2.3/polymer.js"></script>

	<!-- Importing Custom Elements -->
	<link rel="import" href="component.html">

	<!-- Example styles -->
	<style>
	body {
	font-family: Helvetica, Arial, sans-serif;
	}

	input {
	margin-bottom: 10px;
	width: 300px;
	color: #5f5f5f;
	border: 1px solid #ccc;
	padding: 0;
	text-indent: 1rem;
	font-size: 1.25rem;
	text-align: left;
	background: #fff;
	}
	</style>
	</head>
	<body>

	<!-- Using Custom Elements -->
	<field is="float-label" label="Your name" type="text" id="name" name="name" placeholder="Your name" tabindex="1"></field>

	<field is="float-label" label="City or town" type="text" id="city" name="city" placeholder="City" tabindex="2"></field>

	<field is="float-label" label="Phone" type="tel" id="phone" name="phone" placeholder="Phone" tabindex="3"></field>

	</body>
	</html>
	.float-label {
	position: relative;
	display: block;
	}
	.float-label label {
	position: absolute;
	top: 5px;
	left: 1em;
	font-size: .8rem;
	opacity: 0;
	}
	.float-label input[type='text'], .float-label input[type='email'], .float-label input[type='tel'], .float-label input[type='password'] {
	height: 2.5rem;
	vertical-align: baseline;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	}
	.float-label input, .float-label label {
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	}
	.float-label input:focus + label {
	opacity: 1;
	display: inline-block;
	height: 10px;
	padding-bottom: 5px;
	color: #ccc;
	}
	.float-label input:focus {
	padding-top: 20px;
	}
	.float-label input:focus::-webkit-input-placeholder {
	opacity: 0;
	}
	.float-label input:focus:-moz-placeholder {
	opacity: 0;
	}
	.float-label input:focus::-moz-placeholder {
	opacity: 0;
	}
	.float-label input:focus:-ms-input-placeholder {
	opacity: 0;
	}