Trying to create a 'tricky' input label and I need some input

HTML & CSS
1

Hey all, long time no speak.

I’ve been working on something over that past few days that I really like but I am stuck on one final thing that is keeping it from being perfect.

Basically I HATE form input labels, trying to position them before the input and make them line up, or after the input and the text dropping on page resize and putting the text into the input (which works fine and you can fade it and all that but when you go back to a form that is pre-filled you can’t see what the field is supposed to be).

So anyway, I sat down last week and started tinkering with an idea I had, putting the input label across the top line of the input border, similar to a fieldset / legend. Getting it to work is a snap really, I just create an input with a certain class and put the label text into the title attribute of the element like this:

<p><input type='text' name='first_name' id='first_name' maxlength='256' size='50' value='' class='required input' title='First Name *' /></p>

Then what I do is use a Javascript loop to add a span that ‘floats’ above the input like this:

	$('.input').each(function()	{
			$(this).before("<span style='position: absolute; z-index: 1000; margin-top: -12px; font-size: .75em; margin-left: 10px; background-color: #FFF; padding: 0 2px; color:#4a1486;'>" + $(this).attr('title') + "</span>");
			});

And yes I plan to move all the CSS to the style sheet once I have it working right and just give the span that class.

So it works and looks great with one exception, if you have two inputs sitting next to each other and you re-size the page down the second input drops to the next line while the label span stays where it originally was. I have tried setting the parent paragraph position to relative but then realized I had two inputs within one parent so that didn’t work.

I also tried adding a span around the input (so the new span would be added to that span via the JS) and setting it to position: relative - again nothing.

Here’s an example of a client I am testing it on (site not live at this point) http://aoops.com/client-application but I don’t have any public example with two fields next to each other.

Can anyone think of a non-obtrusive way to make the added span label ‘stay’ with the input when the page is resized? I really don’t want to get into ‘listening’ for windows resizes with Javascript if at all possible.

Really hoping I missed something I could do with CSS to make this work.

2

well… this is kinda neat…

And yes I plan to move all the CSS to the style sheet once I have it working right and just give the span that class.

One piece of advice : inline CSS is NOT equivalent to style sheet CSS. The cascade affects your style sheet CSS; so in the end it’s not as headache saving as you may think. Also sytlesheet is easier to read, so it’s just good courteous practice. :slight_smile:

ok, that said I think you NEED to use an extra HTML element for this tech. :


<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">
		.inputWrap {outline:1px solid red;margin: 1em 1em 0 0; position: relative; display:inline-block;  width: 15em;}
        .inputWrap input { border:none; padding:0; width:100%; padding:.5em; margin:0;}
        .inputWrap input:focus { outline: none;  }
		.inputWrap label { background: #fff;  padding: 0 7px; position: absolute; top: -.6em; left:.6em;
		     color: purple;  font-size: 80%; font-family: sans-serif
		}
		</style>
	</head>
	<body>
<div>
    <span class="inputWrap"> <label for="nomme">Name:</label> </label><input type="text" id="nomme"></span>
    <span class="inputWrap"> <label for="log">Log:</label> </label><input type="text" id="log"></span>
    <span class="inputWrap"> <label for="etc">Etcetera:</label> </label><input type="text" id="etc"></span>
<div>
	</body>
</html>

hope that helps

3

Thanks, I thought it was neat as the devil myself. I’ll give your idea a shot tomorrow and see what happens.

4

I agree that inline-styles are problematic. But for testing purposes I don’t use a separate stylesheet. I always use a style-block in the <head>: that is embedded in the html-version of the development fase. That makes it easy to go back to an earlier css-version (just take the earlier html-version). See [U]Golden Rules of CSS #4 and #5[/U].

Despite you hate labels, I think they are needed for accessibility (*), and I think that it’s possible to style them in almost the same way as the javascript-span’s.

  • See this test: [U]form-label.htm[/U]
  • The visitor can scale the font-size as desired, without losing the layout.
  • Tested in Firefox, Chrome, Opera, Safari and IE7.
  • To get them inline, you’ll need an extra wrapper-span instead of the <p>'s (or give the <p>'s an inline-style), as dresden_phoenix said.

(*) You are aware that the javascript-method is not unobtrusive at all? A visitor with javascript disabled or with a non-script browser is confronted with [U]this[/U]. :wink:

5

Is your site down Francky? Can’t get to your links

6

HI DC,

I’m with Francky on this and inputs must have labels and even if they are not visible on screen they should still be in the html for screen readers etc.

I would do your effect more simply like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
input, select, textarea {
	border: 1px solid #DD6D00;
	color: #4A138A;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: bold;
	padding: 10px 5px;
	width:150px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	display:block;
	margin:0;
	clear:both;
}
.form1 div {
	display:inline-block;
	margin:0 10px 10px 0;
}
.form1 label {
	float:left;
	background:#fff;
	padding:0 5px;
	font-size:80%;
	margin:0 0 -.5em .5em;
	line-height:1.0;
}
</style>
</head>

<body>
<form>
		<fieldset class="form1">
				<legend>Label test - IE8+</legend>
				<div>
						<label for="first_name">First name *</label>
						<input type="text" class="required input" value="" id="first_name" name="first_name">
				</div>
				<div>
						<label for="last_name">Last name *</label>
						<input type="text" class="required input" value="" id="last_name" name="last_name">
				</div>
				<div>
						<label for="addr1">Address *</label>
						<input type="text" class="required input" value="" id="addr1" name="addr1">
				</div>
		</fieldset>
</form>
</body>
</html>
7

I probably shouldn’t have used the word labels in my OP. What I should have said was the text in them (and trying to make everything line up)

Have meetings all afternoon but will try some of these when I get the chance

Thanks all.

8

I tinkered with Paul’s method on another app I am building and want to use this on, works with one very strange exception.

As you can see in the image select boxes are dropping down below the other elements, I tinkered with the CSS to see what specifically was causing the drop and it appears to be the display: block; that is being applied to inputs, selects and text areas. When I comment that out everything lines up (but of course the labels now come out of the float.)

Here’s a screenshot:

Here’s the HTML for this part of the form:

<form method='post' action='' id='pers_info_form'>
<p><label for='broker_first_name' class='label'>First Name *</label><input type='text' name='broker_first_name' id='broker_first_name' maxlength='100' size='40' value="Dave" class='required input' title='First Name *' /></p>
<p><label for='broker_last_name' class='label'>Last Name *</label><input type='text' name='broker_last_name' id='broker_last_name' maxlength='100' size='40' value="Dalton" class='required input' title='Last Name *' /></p>
<p><label for='broker_address' class='label'>Address *</label><input type='text' name='broker_address' id='broker_address' maxlength='100' size='40' value="" class='required input' title='Address *' /></p>
<p><label for='broker_zipcode' class='label'>Zipcode * &nbsp; Canadensis,PA US</label><input type='text' name='broker_zipcode' id='broker_zipcode' maxlength='100' size='40' value="" class='required input' title='Zipcode * &nbsp; Canadensis,PA US' /></p>
<p><label for='broker_business_phone' class='label'>Business Phone *</label><input type='text' name='broker_business_phone' id='broker_business_phone' maxlength='100' size='40' value="" class='required input' title='Business Phone *' /></p>
<p><label for='broker_toll_free_number' class='label'>Toll Free Number</label><input type='text' name='broker_toll_free_number' id='broker_toll_free_number' maxlength='100' size='40' value="" class='input'  title='Toll Free Number' /></p>
<p><label for='broker_fax_number' class='label'>FAX Number</label><input type='text' name='broker_fax_number' id='broker_fax_number' maxlength='100' size='40' value="" class='input'  title='FAX Number' /></p>
<p><label for='broker_cell_phone' class='label'>Cell Number</label><input type='text' name='broker_cell_phone' id='broker_cell_phone' maxlength='100' size='40' value="" class='input'  title='Cell Number' /></p>
<p><label for='broker_time_zone' class='label'>Time Zone *</label>
<select name='broker_time_zone' id='broker_time_zone' class='required input' title='Time Zone *'>
<option value=''>select</option>
<option value='E' selected='selected'>EST</option>
<option value='C'>CST</option>
<option value='M'>MST</option>
<option value='P'>PST</option>
</select></p>
<p><label for='broker_date_business_established' class='label'>Date Established</label>
<input type='text' name='broker_date_business_established' id='broker_date_business_established' size='15'  class='input'  value='08-01-2013'  title='Date Established' />

And the styles I am using (some altering from Paul’s to match this app), I also had to add a selector for checkboxes and radio buttons to remove the display block but that doesn’t come into play on this form until 4 more inputs happen.

input, select, textarea	 {
	border: 1px solid #000;
	padding: 10px 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	margin: 0;
	}

input[type='checkbox'], input[type='radio']	{
	display: inline;
	}

form p	{
	display: inline-block;
	margin: 0 10px 10px 0;
	}

.label	 {
	float: left;
	background: #fff;
	padding: 0 5px;
	font-size: 80%;
	margin: 0 0 -.5em .5em;
	line-height: 1.0;
	}

I also checked the rest of the style sheet for anything that was being applied to a select box and there is nothing.

Can’t for the life of me figure out why only select boxes are doing this.

9

Hi DC,

When you use inline-block you need to set the vertical alignment as the default varies between browsers.

You need top:


form p	{
	vertical-align:top
	}

I should have added it to my code but as everything was the same size in my example it didn’t matter. :slight_smile:

10

thanks Paul

11

dc dalton, #5
Is your site down Francky? Can’t get to your links

Yes, there seemed to be a break yesterday, I don’t know why. At the moment no problems anyway.