I recently read Trevor Davis‘ post on inline form labels. First off, I have the utmost respect for TD. I read his blog regularly and have learned a lot from his posts. While I respect the work he has done for his plugin, I approach things differently. I am a UX Architect for a government site so I have significant concerns about accessibility, semantics and progressive enhancement.

My approach differs from him in 2 main facets:

1. He is pulling his inline form label value from the title attribute. I am using the actual label. I feel this is more semantic.
2. He is adding and removing a value to the form field. This can cause validation and styling issues. I am going to overlay the label on to the form field therefore not mucking with the value of the field.

That is not to say my technique is not without issue. It relies on good support of the CSS box model.

Markup

	
		<form id="contact">
			<ul>
				<li>
					<label for="name">Name</label>
					<input type="text" id="name" name="name" value="" />
				</li>
				<li>
					<label for="email">Email</label>
					<input type="text" id="email" name="email" value="" />
				</li>
				<li>
					<label for="verbiage">Message…</label>
					<textarea id="verbiage" name="verbiage" rows="5" cols="25"></textarea>
				</li>
			</ul>
		</form>
	

Simple markup, just your basic form. I’m an unordered list guy for forms, but certainly your favorite method of marking up forms should be fine. Except for tables, cause that’s just wrong.

Stylings

	
		form li {
			line-height: 1.5;
			margin-bottom: 1.5em;
			position: relative;
		}

		form label.overlayed {
			position: absolute;
			top: .15em;
			left: .5em;
			white-space: nowrap;
			color: #999;
		}
	

Again, simple stuff, note the position: relative on the li. That’s sets a bounding box for everything inside of it. Then we are free to use position:absolute for the label (when overlayed). That effectively removes it from layout allowing the inputs to slide left (or up, depending on your form layout).

Notice the use of the overlayed class. I could just style the labels this way by default, but the whole technique here needs javascript. As a general rule of thumb, I use the same technology to add something as I use to manipulate it. Since I will need JavaScript to manipulate the label visibility, I will use JavaScript to put it in position to begin with. I could have styled the label in a default manner (left of the input, above the input, etc) but chose not to for simplicity’s sake.

Scripting

	
	var oTxtFields = $('input,textarea');
	$.each(oTxtFields, function(){
		var label = $('label[for=' + $(this).attr('id') + ']');
		label.addClass('overlayed');
		if (!$(this).val() == '') {
			label.hide();
		}
		$(this)
			.focus(function(e){
				$('label[for=' + $(e.target).attr('id') + ']').hide();
			})
			.blur(function(e){
				if ($(e.target).val() == '') {
					$('label[for=' + $(e.target).attr('id') + ']').show();
				}
			})
		;
	});
	

This code is relatively simple as well but let me point out a few things. Obviously this is assuming jQuery is loaded. Setting a native object for the form elements saves a lot of processing time. Doing the jQuery lookup every time you reference the object is very expensive. Do it once and store it to an object.

Moving on, for each form element set a label variable based on the associated label tag then add the class overlayed to the label. This will position the label inside the form field. Since JavaScript is needed for this technique, we want to initialize the whole thing with JavaScript. You don’t want to end up in a situation where the user has stylesheets capabilities but not Javascript leaving them with an overlayed label and no way to hide it.

Finally we add some event listeners for each form field. The first is a focus which does a lookup on the label associated with the field that has focus and hides it using jQuery’s hide method.

The second event listener added is for blur. If, on blur, the form field value attribute is empty we show the associated label using jQuery’s show method.

That’s about it. I hope you found this technique useful. If nothing else, maybe you found this to be an alternative to Trevor’s inline form label technique. If I get enough interest I will look into creating a jQuery plugin for this. Feel free to wholesale reuse this technique. I hardly coined it, I just blogged it.

“And here is your bidet” our butler told us as he gave us a tour of our villa. I had heard of a bidet, but I had never actually seen one. See, down in Texas, we uh… just use paper. And admittedly, even in my time traveling, I have never happened across one. I knew what it was for, and honestly, I was curious. I was determined to figure it out.

I took a gander at it, it had a hot water knob on the left, a cold water knob on the right and a knob in the middle. Ok, not unlike a shower. There’s a bulbous looking water spout in the bottom of the bowl. It’s like an upside down shower head. Ok, I see where this is going. Or so I thought.

After dancing around the idea of trying it out for a day or so, the humidity and just perpetual sweating got the best of me. I was gonna give it a shot (no pun intended). So, turn on the hot water, it starts filling up the bowl from the sides similar to how a toilet does when you flush it. Well, I do know what this device is for, and I’m not about to stick my hands down in that bowl. So I add a little cold to try to get a warm water. I turn the middle knob just a bit, to try to get a water fountain effect. Just high enough for me to feel the water without having to dunk my hand in the bowl. Seemed ok.

Then I really started to consider how to use this apparatus. I mean, how do you mount this thing? I see the knobs are in the back, do you face the knobs so you have control? But it’s shaped like a toilet bowl, so I sit like I would on a toilet bowl? But that means I have to reach behind me to control the temperature and water pressure. That doesn’t seem natural. Then I really notice something that threw me off and ended up being my demise.

There is no seat on this thing. It’s like a toilet without a seat. Just a porcelain bowl. I have visions of what the toilet bowl can look like in my house with the seat up and decide, there is no way I’m sitting directly on that. It looks clean enough, sure. But still, no way. Turns out, that was exactly what I should have done.

So, I decide to do the chick thing and squat over it. Unfortunately, I forgot to take gravity into consideration in all this. I got into what I thought was position and turned up the water pressure. That’s where things got messy.

First off, I initially missed. When I say I missed, I mean I was soaking my inner thigh. Just totally missed the important parts all together. Ok, adjust. But wait, why was my calf wet? Crap, I didn’t squat down far enough, the water is running down my leg. And into my shoes. Yes, at my ankles were my underwear, my pants, socks and shoes, now totally soaked. So now I’m reaching behind me, looking for the water pressure knob to turn it off and that is causing me to move and water is spraying everywhere. Both legs, up my shirt, up my nose, even in my hair (turns out I had the water pressure up way higher than it needed to be). By the time I get it turned off, I am completely soaked from head to toe and there is standing water in the toilet room. It’s leaking out under the door and my wife is asking what the hell I am doing in there. Thankfully I had the door locked so she couldn’t come in and see for herself. I went straight to the shower, did not pass go, did not collect $200.

Since then I have looked up how to use it and if I encounter one again, I may actually try it again, maybe.