Infield form labels

Let me start off by saying you really shouldn’t put form labels—or even placeholder text—inside of form fields

I consider place holder text as an example of what the field should contain, not really a label. But if you must use placeholder text as a ‘faux label’ this article does present a great way to handle it. PLUS IT REMINDS YOU TO ALWAYS HAVE A LABEL in your markup , even if you are using place holder text.

I am partial to ‘Labels slide outside of the fields’ and ‘tool tip’ approach, especially because effects liek these could be achieved with CSS and/or minor markup rearrangements.


<!DOCTYPE HTML>
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
				input:focus + label {visibility: visible}
				input + label {visibility:hidden }
		</style>
	</head>
	<body>
<form>
	<div>
		<input placeholder="label" name='x' id='x'> <label for'x'>Label</label><br>
		<input placeholder="label" name='x' id='x'> <label for'x'>Label</label><br>
	</div>
</form>
	</body>
</html>

Just a proof of concept; I am sure it could be done better.

Cool, but the jQuery example makes the labels vanish from assistive technology, thus making them not accessible. I didnt look at it with Dragon, so it may not work with that.

Also if the inputs are not big, users can click the label to give focus to the input, thus disabiliting this functionality.