Hiding form labels

dabblet.css

/**
 * Hiding form labels
 */

html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
}

form {
	max-width: 500px;
	margin: 60px auto;
}
form p {
	margin: 5px 0;
	position: relative;
}
form p label {
	display: inline-block;
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 1;
	font-size: 13px;
	line-height: 2.2em;
	min-width: 60px;
	background: #eee;
	padding: 4px 10px;
	transition: z-index 0s  1s ease-in-out;
}
textarea {
	resize: vertical;
}
form input[type="text"],
form textarea {
	display: block;
	width: 100%;
	position: relative;
	text-indent: 80px;
	padding:13px;
	line-height: 1.4;
	border: 4px solid #eee;
	transition: text-indent .3s ease-in-out;
}
form input[type="text"]:focus,
form textarea:focus {
	z-index: 1;
	text-indent: 0;
	outline: 0;
	border-color: #333;
}

dabblet.html

<!--
	The for value and matching input id are 
	necessary for hiding the label on click.
 -->

<form>
	<p>
		<label for="name">Name</label>
		<input id="name" type="text" value="Michael Awesomestad">
	</p>
	<p>	
		<label for="email">Email</label>
		<input id="email" type="text" value="[email protected]">
	</p>
	<p>
		<label for="comments">Comments</label>
		<textarea id="comments">All your comments are belong to us.</textarea>
	</p>
</form>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}