Form inputs with helper text

form-inputs-with-helper-text.markdown

Form inputs with helper text

Playing around with a few methods of using helper/placeholder text in a text input element. For elements like email, phone, ssn, and other types of user data, there's often a need for clarification on which format to enter your information. These experiments keep the input labels in place, and shift the helper text out of the way so that the user still is able to receive that contextual information.

A Pen by Darin on CodePen.

License.

index.html

<form>
	<div class="field1">
		<label for="email1">Email</label>
		<input type="email" id="email1" class="email" />
		<p class="helper helper1">email@domain.com</p>
		<p class="helper helper2">email@domain.com</p>
	</div>
	<div class="field2">
		<label for="email2">Email</label>
		<input type="email" id="email2" class="email" />
		<p class="helper helper1">email@domain.com</p>
		<p class="helper helper2">email@domain.com</p>
	</div>
	<div class="field3">
		<label for="email3">Email</label>
		<input type="email" id="email3" class="email" />
		<p class="helper helper1">email@domain.com</p>
	</div>	
	<div class="field4">
		<label for="email4">Email</label>
		<input type="email" id="email4" class="email" />
		<p class="helper helper1">email@domain.com</p>
	</div>
</form>

script.js

$("#email1, #email2").each(function (type) {
	
	$(this).keypress(function () {
		$(this).parent().addClass("focusWithText");
	});
 
	$(this).blur(function () {
		if ($(this).val() == "") {
			$(this).parent().removeClass("focusWithText");
		}
	});
	
});

$("#email3, #email4").each(function (type) {
	
	$(this).focus(function () {
		$(this).parent().addClass("focusWithText");
	});
 
	$(this).blur(function () {
		if ($(this).val() == "") {
			$(this).parent().removeClass("focusWithText");
		}
	});
	
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

body {
	background-color: #33a7e3; position: relative; width: 100%; height: 100%;
	font-size: 16px; font-family: 'Source Sans Pro', sans-serif; font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
form {
	position: relative; display: block; height: auto; margin: 0; padding: 2.75em;
	width: 100%; box-sizing: border-box; 
	font-family: 'Source Sans Pro', sans-serif;
	label {
		margin: 0 0 12px; display: block;
		font-size: 1.25em; color: #FFF; font-weight: 700; font-family: inherit;
	}
	input[type='email'] {
		display: block; margin: 0; padding: 1.125em 1.125em 1.25em;
		background-color: #FFF; border: solid 2px #FFF; border-radius: 4px; -webkit-appearance: none;
		box-sizing: border-box;
		width: 100%; height: 3.5em;
		font-size: 1.25em; color: #353538; font-weight: 600; font-family: inherit;
		transition: box-shadow .2s linear, border-color .25s ease-out;
	}
	input[type='email']:focus {
		outline: none;
		box-shadow: 0px 2px 10px rgba(0,0,0,.2);
		border: solid 2px #98dcff;
	}
	
	.field1 {
		border: solid 1px black; border: none;
		margin: 0 0 1.5em; padding: 0 0 1.5em; position: relative;
		input[type='email'] {
			padding: 1.125em 1.125em 1.25em;
		}
		.helper {
			position: absolute; z-index: 1;
			font-family: inherit;
		}
		.helper1 {
			left: 1.25em; top: 2.75em;
			color: #b8b8c1; font-size: 1.25em; font-weight: 600; opacity: 1;
			pointer-events: none;
			transition: opacity .1s linear;
		}
		.helper2 {
			bottom: 0em; left: 1.5em;
			font-size: .95em; color: #FFF; font-weight: 600; opacity: 0; 
			transition: opacity .2s linear;
		}
		&.focusWithText {
			.helper1 {
				opacity: 0;
			}
			.helper2 {
				opacity: .75;
			}
		}
	}
	.field2 {
		border: solid 1px black; border: none;
		margin: 0 0 1.5em; padding: 0 0 1.5em; position: relative;
		.helper {
			position: absolute; z-index: 1;
			font-family: inherit;
		}
		.helper1 {
			left: 1.25em; top: 2.75em;
			color: #b8b8c1; font-size: 1.25em; font-weight: 600; opacity: 1;
			pointer-events: none;
			transition: opacity .1s linear;
		}
		.helper2 {
			top: 0.3em; right: 0;
			font-size: .95em; color: #FFF; font-weight: 600; opacity: 0; 
			transition: opacity .2s linear;
		}
		&.focusWithText {
			.helper1 {
				opacity: 0;
			}
			.helper2 {
				opacity: .75;
			}
		}
	}
	.field3 {
		border: solid 1px black; border: none;
		margin: 0 0 1.5em; padding: 0 0 1.5em; position: relative;
		input[type='email'] {
			display: block; margin: 0; padding: 0em 1.125em 1.25em;
			height: 3.5em;
		}
		.helper {
			position: absolute; z-index: 1;
			font-family: inherit;
		}
		.helper1 {
			top: 0; left: 0;
			transform: translate(1.25em, 2.75em) scale(1); transform-origin: 0 0;
			color: #b8b8c1; font-size: 1.25em; font-weight: 600; opacity: 1;
			pointer-events: none;
			transition: transform .2s ease-out;
		}

		&.focusWithText {
			.helper1 {
				transform: translate(1.25em, 3.75em) scale(.7);
			}
		}
	}
	.field4 {
		border: solid 1px black; border: none;
		margin: 0 0 0; padding: 0 0 1.5em; position: relative;
		input[type='email'] {
			display: block; margin: 0; padding: 1.125em 1.125em 0em;
			height: 3.5em;
		}
		.helper {
			position: absolute; z-index: 1;
			font-family: inherit;
		}
		.helper1 {
			top: 0; left: 0;
			transform: translate(1.25em, 2.75em) scale(1); transform-origin: 0 0;
			color: #b8b8c1; font-size: 1.25em; font-weight: 600; opacity: 1;
			pointer-events: none;
			transition: transform .2s ease-out;
		}

		&.focusWithText {
			.helper1 {
				transform: translate(1.25em, 2.25em) scale(.7);
			}
		}
	}
}