Various things we wrote

BLARG!

My user-friendly, in-field form labels technique

It seems to be a burgeoning trend for web designers to do away with external field labels, and instead put the field label within the field itself. While the input tags 'placeholder' attribute does not yet enjoy total crossbrowser support, there are plenty of other javascript-based solutions that allow you to add placeholder text within an input field.

However, these methods have a serious UI downfall. When a user begins typing in the field, the placeholder disappears, leaving no clues as to what type of input belongs in the field. Try typing into this field, and see as the placeholder text disappears:

In a complex form, with many different input fields, this can get annoying and burdensome. I did a little poking around and found several really cool solutions to this problem. Some move the label to the left of the field, but this method clashed with the design I was working with at the time, as the label then covered up some other field or content. Another method I found added a neat tooltip over the field, but I wanted something a bit simpler, visually, and their tooltip disappeared when you left the field, and you were only left with the value you entered.

In the end, I decided to roll my own, instead! Here is what I came up with.

So, this has several features:

  1. As soon as the field gets focus, the label moves up out of the way.
  2. When you leave the field, the label stays out of the way if you left a value in the field, or moves back down if you left it empty.
  3. The text of the label is surrounded by a 2px white stroke, so it's easier to read over the top of the form element.

You can see this JSFiddle for a working example: http://jsfiddle.net/paleosun/v0523qyj/

I used jQuery to provide 'progressive enhancement', so if the visitor does not have javascript enabled, they will just see the form field with the placeholder text. But if they have javascript enabled, it converts the simple field to my fancy pants, user-friendly field. 

Currently, the CSS is hardcoded to place the field label in the right spot in the field, and then at the right spot above the field. However, you could take this a step further, and add jquery that calculates the field height, etc,, and sets the correct "top" and "left" values for the label.

And here's how it works:

Markup

1
<input type="text" id="example-field-1" class="infield-label" value="" placeholder="Example Label" />

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.infield-label-wrap{
	position: relative;
}
.infield-label-wrap input{
	height: 24px;
	display: block;
}
.infield-label-wrap label{
	position: absolute;
	display: block;
	top: 8px;
	left: 10px;
	color: #333;
	font-weight: 300;
	margin: 0px;
	font-size: 12px;
	z-index:10;
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}
.infield-label-wrap label.focused{
	top: -8px;
	color: #a7152a;
	font-weight: 700;
	margin: 0px;
	letter-spacing: 1px;
	text-shadow:
		-1px -1px 0 #fff,  
		 1px -1px 0 #fff,
		-1px 1px 0 #fff,
		 1px 1px 0 #fff,
		 -2px -2px 0 #fff,  
		 2px -2px 0 #fff,
		-2px 2px 0 #fff,
		 2px 2px 0 #fff;
}

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(document).ready(function() { //when the document is ready...
	$("input.infield-label").each(function(){
		/* wrap field with a container that has position:relative */
		$(this).wrap('<div class="infield-label-wrap"></div>');
 
		/* Create a label element with correct 'for' and label text from 
		    id and placeholder, respectively*/
		$(this).before('<label for="'+$(this).attr('id')+'">'+$(this).attr('placeholder')+'</label>');
 
		/* remove the placeholder attribute */
		$(this).attr('placeholder','');
 
		/* When input changes, add 'focused' class */
		$(this).on('change',function(){
			$(this).siblings('label').addClass('focused');
		});
 
		/* When field gets focus, add 'focused' class */
		$(this).focus(function(){
			$(this).siblings('label').addClass('focused');
		});
 
		/* When field loses focus, remove 'focused' class,
		   butt only if the field is empty */
		$(this).blur(function(){
			if($(this).val() == ""){
				$(this).siblings('label').removeClass('focused');
			}
		});
	});
});

Comments (0) Write a comment

Leave a Comment

828 582 4975

info@paleosun.com

70 Woodfin Place Suite 312
Asheville, NC, 28801