14 replies [Last post]
Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 9 years 39 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

//mod edit: Pruned from http://csscreator.com/node/33533 --gt

I'm struggling a bit to understand a good way to layout tableless forms. I'm a coder and have done a bit of CSS, but I seem to have a mental block on this subject for some reason. All the examples I have seen tend to use either consistently sized input fields, or to specify arbitrary widths for the divs across the page.

Now please correct me if I'm wrong (and I'm sure you will, hehe), but in many forms the fields aren't all the same width, or there may be multiple fields on one line. Specifying a width (I have seen many in px) seems to not be right either, a 100px wide div can be vastly different on 2 different screen resolutions, plus you don't necessarily know the base font-size of the browser. Also, I might not know the size of my "column" width, for example with dynamically created forms certain elements may, or may not, appear, and if some are a bit wider than others and you specify a width to cover them all, if they don't appear you will end up with empty space in the middle of the form.

Tables (puts on flame-retardant suit....) seem to sort this out, they will flow the columns to a max width for how each column appears at the time of rendering, for example:-

<table border="0">
<tr><td>A</td><td><input type="text" size="5" /><td><input type="text" size="8" /></td></tr>
<tr><td>ABC</td><td colspan="2"><input type="text" size="20" /></td></tr>
</table>

and then, this is sometimes

<table border="0">
<tr><td>A</td><td><input type="text" size="5" /><td><input type="text" size="8" /></td></tr>
<tr><td>Emergency No/Ext</td><td><input type="text" size="15" /></td><td><input type="text" size="4" /></td></tr>
<tr><td>ABC</td><td colspan="2"><input type="text" size="20" /></td></tr>
</table>

this displays naturally flowing with the content (one of the things I hear mentioned a lot when talking about CSS). I know this isn't a good way of doing it as it adds bloat to the content, and it doesn't separate the content from the style, but how would you do this with CSS and still maintain the natural document flow? If you add in divs and spans to separate the content, like this example
http://realworldstyle.com/forms.html
(_is_ it a good example or tableless form layout?) you add as much bloat to the code as if you used a table - pretty much what you are doing is replacing and with

and . Can you see what I am getting at?

Are there any good tutorials ppl can post please, that don't use width values and allow the form to naturally flow (I have also seen centre used to flow the 2nd column of the form, but this seems to add more space between the columns, especially if the user had a high screen resolution).

I want to get away from using tables to lay out forms - I'm sure there's something basic that I am missing on this subject, and I am waiting for an epiphany.....

Cheers

MH

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 9 years 39 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

For Argument's sake....

Quote:

It is far more difficult and labor intensive to layout and tweak a tables-based form than it is for a properly marked up form.

The more complex the form the harder it becomes to make changes using tables.

Mark this up in tables and get back to me: http://imaginekitty.com/formXHTML.html

I know there is a good argument for doing it this way, but this illustrates my point a little - taking that example and tweaking it a little to shorten some of the left labels, and optionally display the explanation text at the bottom of the first column/first section - with your layout you get white space as the whole left "column" could now flow to a narrower width, but as you have to allow room for the paragraph you need to specify a suitable width to contain this. If this layout was made with nested tables - it would flow naturally like this, would it not? Yes, the layout would be more complex, and more difficult to change - I will in no way dispute that, but it will flow more according to the internal content (as I said before, one of the phrases I seem to hear a lot when people are talking about CSS layout).
Please don't get me wrong, I'm not saying that tables would be a better way to lay out that form (and I can certainly more and more benefits of the CSS way, the more I look at it) but I've got these little bugbear issues that I am trying to get to grips with in my own mind (and a lot of these issues stem from things I know am I going to have to deal with in my current project).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>KIBBLES &amp; JIBLETZ >> Search</title>
	<style type="text/css" media="all">
		/* Global reset */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
			font-weight: inherit;
			font-style: inherit;
			font-size: 100%;
			font-family: inherit;
			vertical-align: baseline;
		}
		/* remember to define focus styles! */:focus {
			outline: 0;
		}
		body {
			line-height: 1;
			color: black;
			background: white;
		}
		ol, ul {
			list-style: none;
		}
		/* tables still need 'cellspacing="0"' in the markup */table {
			border-collapse: separate;
			border-spacing: 0;
		}
		caption, th, td {
			text-align: left;
			font-weight: normal;
		}
		blockquote:before, blockquote:after, q:before, q:after {
			content: "";
		}
		blockquote, q {
			quotes: "" "";
		}
		/* end Global reset */body {
			background: white;
			color: #333;
			font: 100% verdana, helvetica, sans-serif;
		}
		p {
			margin: 1em 0; /*IE needs explict values to avoid buggy
                     collapsing margins behavior.*/
			font-size: 1em;
		}
		h1 {
			font-family: georgia, serif;
			text-align: center;
		}
		hr {
			clear: both;
			visibility: hidden;
		}
		form {
			width: 60em;
			border: 3px solid #999;
			padding: 10px;
			margin: 0.5em auto;
			font-size: 0.9em;
		}
		fieldset {
			float: left;
			width: 26em;
			position: relative;
			margin: 0.5em 0.5em 1em 0.5em;
			padding: 1em;
			border-top: 1px solid #555;
			border-left: 1px solid #555;
		}
		* html fieldset {
			float: left;
			width: 26em;
			position: relative;
			margin: 0.5em 0.5em 1em 0.5em;
			padding: 1em;
			border: 1px solid #555;
		}
		input, select {
			cursor: pointer;
		}
		input[type="checkbox"] {
			vertical-align: middle;
		}
		input[type="submit"], input[type="reset"] {
			border: 2px outset gray;
			width: 75px;
		}
		input[type="submit"]:active, input[type="reset"]:active {
			border: 2px inset gray;
			position: relative;
			top: 1px;
			left: 1px;
		}
		p.button {
			text-align: right;
			margin-right: 2em;
			clear: both;
		}
		input[type="text"], select {
			vertical-align: top;
			border: 1px solid #999;
		}
		input[type="text"]:focus {
			background-color: #ffe;
		}
		legend {
			font-size: 0.9em;
			padding: 0.2em 0.5em;
			background-color: #eee;
			border: 1px solid #555;
		}
		label {
			font-size: 0.9em;
			font-variant: small-caps;
			margin: .25em 0;
			cursor: pointer;
		}
		label span.req {
			color: #822;
		}
		label:hover, label:hover input, label:hover span {
			background-color: #eee;
		}
		form table label:hover {
			background-color: transparent;
		}
		label span {
			width: 14em;
			float: left;
			text-align: right;
			margin-right: 1em;
			padding: .2em 0;
		}
		form table label span {
			width: auto;
			float: none;
		}
		input, select, textarea {
			width: 12em;
			border: 1px solid #777;
			font-weight: bold;
			padding: .2em 0;
		}
		form table select {
			width: auto;
		}
		select {
			max-height: 10em;
			padding: .2em 0;
		}
		textarea {
			height: 12em;
		}
		#wrapper {
			width: 80%;
			margin: 0 auto;
		}
		.cbxl {
			width: 48%;
			float: left;
			text-align: left;
			clear: left;
		}
		form table .cbxl {
			float: left;
			width: auto;
			text-align: left;
			margin-right: 1em;
			font-size: 1.2em;
		}
		.cbxl input {
			width: auto;
			border: 0 none;
		}
		.cbxr {
			width: 48%;
			float: right;
			clear: right;
			text-align: left;
		}
		.cbxr input {
			width: auto;
			border: 0 none;
		}
		.fineprint {
			margin: 4px;
			padding: 1px;
			font-size: 9px;
			color: #444;
			text-align: center;
			clear: both;
		}
		.error {
			color: #a22;
			text-align: center;
		}
		/*** see <a href="http://www.positioniseverything.net/easyclearing.html
" rel="nofollow">http://www.positioniseverything.net/easyclearing.html
</a>   for explanation of Tony Aslett's elegant hack ***/.clearing:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		.clearing {
			display: inline-block;
		}
		/* Hides from IE-mac \*/.clearing {
			display: block;
		}
		/* End hide from IE-mac *//*** end clearing hack ***//* table style */table {
			font-size: .8em;
			width: 100%;
			border: 1px solid #000;
			background: #eee;
			margin: 0 auto;
			padding: 10px;
		}
		.alt-tr th {
			background: #ddf;
			font-weight: bold;
			padding: 4px;
		}
		td {
			color: #000;
			background: #fff;
			border: 1px solid #000;
			padding: 3px;
		}
		th {
			color: #000;
			background: #fff;
			border: 1px solid #000;
			padding: 4px;
		}
		.head td, .head th {
		}
		th.top {
			position: relative;
			color: #ddd;
			background: #000;
			font-size: 1.2em;
			font-weight: bold;
			text-align: center;
		}
		.tfoot {
			background: #ddd;
		}
		tr {
			margin: 10px;
		}
	</style>
 
	<script type="text/javascript" src="includes/jquery.js"></script>
 
	<script type="text/javascript">
		$(document).ready(function() {
			$("#groupSelectAll").click(function() {
				var checked_status = this.checked;
				$("input[@name=groupSelect]").each(function() {
					this.checked = checked_status;
				});
			});
		});
	</script>
 
</head>
<body>
	<div id="wrapper">
		<h1>KIBLETZ</h1>
		<p>Search</p>
		<form method="post" action="kj.html#results">
		<fieldset><legend>Client Search</legend>
			<label for="clientName"><span>Client Name:</span><input type="text" name="clientName"
			id="clientName" value="" /></label>
			<label for="city"><span>If City is:</span>
				<input type="text" name="city" id="city" value="" /></label>
			<label for="state" title="pick your state"><span>If State is:</span>
				<select multiple="multiple" name="state" id="state">
					<option value="AL">Alabama</option>
					<option value="AK">Alaska</option>
					<option value="AZ">Arizona</option>
					<option value="AR">Arkansas</option>
					<option value="CA">California</option>
					<option value="CO">Colorado</option>
					<option value="CT">Connecticut</option>
					<option value="DE">Delaware</option>
					<option value="FL">Florida</option>
					<option value="GA">Georgia</option>
					<option value="HI">Hawaii</option>
					<option value="ID">Idaho</option>
					<option value="IL">Illinois</option>
					<option value="IN">Indiana</option>
					<option value="IA">Iowa</option>
					<option value="KS">Kansas</option>
					<option value="KY">Kentucky</option>
					<option value="LA">Louisiana</option>
					<option value="ME">Maine</option>
					<option value="MD">Maryland</option>
					<option value="MA">Massachusetts</option>
					<option value="MI">Michigan</option>
					<option value="MN">Minnesota</option>
					<option value="MS">Mississippi</option>
					<option value="MO">Missouri</option>
					<option value="MT">Montana</option>
					<option value="NE">Nebraska</option>
					<option value="NV">Nevada</option>
					<option value="NH">New Hampshire</option>
					<option value="NJ">New Jersey</option>
					<option value="NM">New Mexico</option>
					<option value="NY">New York</option>
					<option value="NC">North Carolina</option>
					<option value="ND">North Dakota</option>
					<option value="OH">Ohio</option>
					<option value="OK">Oklahoma</option>
					<option value="OR">Oregon</option>
					<option value="PA">Pennsylvania</option>
					<option value="RI">Rhode Island</option>
					<option value="SC">South Carolina</option>
					<option value="SD">South Dakota</option>
					<option value="TN">Tennessee</option>
					<option value="TX">Texas</option>
					<option value="UT">Utah</option>
					<option value="VT">Vermont</option>
					<option value="VA">Virginia</option>
					<option value="WA">Washington</option>
					<option value="DC">Washington D.C.</option>
					<option value="WV">West Virginia</option>
					<option value="WI">Wisconsin</option>
					<option value="WY">Wyoming</option>
				</select></label>
			<label for="zip"><span>Zip Code:</span>
				<input type="text" name="zip" id="zip" value="" /></label>
			<label for="type"><span>If Type is:</span>
				<select multiple="multiple" name="type" id="type">
					<option value="LEAD">Sales Lead</option>
					<option value="CUST">Customer</option>
				</select></label>
			<label for="display"><span>If Display type is:</span>
				<select multiple="multiple" name="display" id="display">
					<option value="4th">July Fourth</option>
					<option value="b4">Before Fourth</option>
					<option value="a4">After Fourth</option>
					<option value="multi">Multiple Shows</option>
					<option value="">Unknown</option>
				</select></label>
			<label for="category"><span>If Category is:</span>
				<select multiple="multiple" name="category" id="category">
					<option value="CAT">CAT</option>
					<option value="EXP">EXP</option>
					<option value="CAT/EXP">CAT/EXP</option>
					<option value="WHOLESALE">WHOLESALE</option>
				</select></label>
			<label for="sales"><span>If Salesperson is:</span>
				<select multiple="multiple" name="sales" id="sales">
					<option value="KF">Kentucky Fried </option>
					<option value="JS">Jerry Seinfeld</option>
					<option value="EBV">EBV</option>
					<option value="MJF">Michael J Fox</option>
					<option value="RG">Ron Germani</option>
					<option value="VL">Vicc Latoma</option>
					<option value="KEM">Ken Majolic</option>
					<option value="CMM">Chiz M Mick</option>
					<option value="MP">Michael Patuchi</option>
					<option value="RS">Robert Smith</option>
					<option value="DS">David Schumer</option>
					<option value="SJV">Stephen Vinace</option>
					<option value="RV">Rocky Valvoa</option>
					<option value="JW">Jon Wix</option>
					<option value="JF">John Frigz</option>
				</select></label>
		</fieldset>
		<fieldset><legend>Check all Associations that you wish to find</legend>
			<label class="cbxl" for="IZPT">
				<input type="checkbox" name="IZPT" id="IZPT" value="IZPT" />IZPT</label>
			<label class="cbxr" for="LMNO">
				<input type="checkbox" name="LMNO" id="LMNO" value="IAFE" />LMNO</label>
		</fieldset>
		<fieldset><legend>Check all Direct Mail categories you wish to find</legend>
			<label class="cbxl" for="xmas">
				<input type="checkbox" name="xmas" id="xmas" value="xmas" />Xmas Card</label>
			<label class="cbxr" for="indoor">
				<input type="checkbox" name="indoor" id="indoor" value="indoor" />Indoor Promo</label>
			<label class="cbxl" for="newsletter">
				<input type="checkbox" name="newsletter" id="newsletter" value="newsletter" />Newsletter</label>
			<label class="cbxr" for="outdoor">
				<input type="checkbox" name="outdoor" id="outdoor" value="outdoor" />Outdoor Promo</label>
		</fieldset>
		<fieldset><legend>Contact Search</legend>
			<label for="fname"><span>If First Name contains:</span><input type="text" name="fname"
			id="fname" value="" /></label>
			<label for="lname"><span>If Last Name contains:</span><input type="text" name="lname"
			id="lname" value="" /></label>
			<p class="fineprint">This will search through both the primary and alternate contacts.
				It will also search partial names. "Jo" will return John and Jon.</p>
		</fieldset>
		<fieldset><legend>Search by Date</legend>
			<label for="lowDate"><span>From:</span>
				<input type="text" name="lowDate" id="lowDate" value="" /></label>
			<label for="highDate"><span>To:</span>
				<input type="text" name="highDate" id="highDate" value="" /></label>
			<p class="fineprint">Format: MM/DD/YYYY. You may leave one blank for an open ended search.</p>
		</fieldset>
		<hr />
		<fieldset><legend>Search by Group</legend>
			<label for="groupList"><span>Group:</span>
				<select multiple="multiple" name="groupList" id="groupList">
					<option value="1">Test Group</option>
					<option value="2">Group Test 2</option>
					<option value="13">zip code 44515</option>
				</select></label>
		</fieldset>
		<fieldset class="radio"><legend>Search Operator </legend>
			<label for="boolAND" class="cbxl">
				<input id="boolAND" name="searchOp" type="radio" checked="checked" value="boolAND" />
				AND </label>
			<label for="boolOR" class="cbxr">
				<input id="boolOR" name="searchOp" type="radio" value="boolOR" />
				OR </label>
			<input type="hidden" name="actionvar" value="search" />
			<p class="fineprint">To limit the number of search results returned below select more
				than one search parameter and use the 'AND' search operator.</p>
		</fieldset>
		<p class="button">
			<input type="submit" class="button" name="Submit" value="Submit" /><input type="submit"
			class="button" name="Submit" value="Clear" /></p>
		</form>
		<p class="fineprint">&copy;2007 Jibletz, Inc.</p>
		<p class="fineprint"><a href="http://validator.w3.org/check?uri=referer">
			<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional"
			height="31" width="88" /></a> </p>
	</div>
	<!-- end wrapper -->
</body>
</html>

To quote Mr Turner

Quote:

A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.

- this is why I am asking "stupid" questions....

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Scattershooting while

Scattershooting while wondering whatever happened to Ursula Andress:

CSS vs table layout is not about markup bloat, though that's generally in CSS's favor; it's about well structured and semantic markup.

The main reason people have difficulty laying out with CSS is that the form controls are inline replaced elements. We are all well versed in laying out block elements, or we soon get there, but laying out inline elements follows a different set of rules; ones we are not all that comfortable with.

A simple approach is to wrap each label/input etc. combo in a block level element such as

. Then each control and its label are positioned with their parent, and simply treated as the usual inline content.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

When your boss says you're

When your boss says you're going to have the labels on the left and the inputs on the right, you run into trouble right there, every time.

Every single time, unless ALL your labels are the same width.

I've been manually pushing the inputs down with a top margin. This does NOT work for dynamic forms. Absolutely not. If you have the freedom to have the labels above (or even below though that makes less sense except for the "sign here" part at the bottom), then you don't have a problem, but side-by-side does. I'm still looking for an answer to this.

Hafling, that form you linked to is a TERRIBLE example and here's why: they aren't using form controls. The whole point of not using a table (besides that usually you don't need all those tr's and td's and more tr's and td's making a simple form take 50000000 lines of code) is that a form is really just a collection of form controls-- labels and inputs. Not span class="label" but .

Screen readers and whatever other assistive technology out there need to be kept in mind all the time as well. Currently, when they are in Forms Mode (so the user can interact with the form instead of just reading from the buffer like they do when viewing a web page), only form controls are read out (they will be read out if they are inside a

or a

as Gary suggested) but not

Note, answer this question this way

or

label text

cause those aren't form controls.

I made a rather incomplete forms page with some based on Gary's example but again the problem of wrapping labels still appears. That, and really really long super long questions which are followed by a bunch of yes/no sub-questions is also a pain in the butt-- legend is often used, but that sux for many reasons (JAWS reading the whole freaking thing before each sub question, Firefox not wrapping the damned thing, unable to position it in FF...).

So, those are the issues future forms articles will have to address I guess. 99% of the examples of "css forms" I see online do not mention long labels or even address them. Often the examples always always have short one-liner labels.

In which case, a table might have to be a crutch until a solution is found, depending on how dictatorial the designer in your place is. How it looks should never really be as important as how the logical structure of the form itself flows, except of course it needs to be obvious to sighted visitors which input belongs to which label. So, writing a form in a goofy order to satisfy things like side-by-side columns isn't a good idea either-- and that's often what happens if you make a columned form. Question 1 gets followed in source by question 50, then question 2 and then question 51... why using floats and pure form controls with some additional wrappers is a better choice.

I'm no expert, but I fake one on teh Internets

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 6 years 46 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

gary.turner

gary.turner wrote:

Scattershooting while wondering whatever happened to Ursula Andress:

All Hail Blackie.... I wonder if anyone else gets this reference?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I don't know, but he wrote

I don't know, but he wrote for 50 or so years in the DFW market. When I was a paper boy in about 1960, the best way to sell subscriptions on my route was to talk about Dan Jenkins and Blackie Sherrod writing for the Fort Worth Press.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 6 years 46 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

That's a little bit before

That's a little bit before my time, I was born in 1979, but he was definitely a legendary figure. I only remember him writing for the Dallas Morning News. The Fort Worth Press though, was that before the Star Telegram?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Stomme poes wrote:This does

Stomme poes wrote:

This does NOT work for dynamic forms. Absolutely not. If you have the freedom to have the labels above (or even below though that makes less sense except for the "sign here" part at the bottom), then you don't have a problem, but side-by-side does. I'm still looking for an answer to this.

Right-aligning the text of the labels will go some way towards alleviating this, but for really long labels, I make them and the inputs that follow them full width of the available area. This isn't going to look good if you're mixing short and long labels in together, so you need to try and structure the form so the short and long questions are separated.

Stomme poes wrote:

unable to position it in FF

http://www.tyssendesign.com.au/articles/css/legends-of-style-revised/

Stomme poes wrote:

Firefox not wrapping the damned thing

http://www.456bereastreet.com/archive/200905/line_wrapping_text_in_legend_elements/

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

downtap wrote:I only

downtap wrote:

I only remember him writing for the Dallas Morning News. The Fort Worth Press though, was that before the Star Telegram?

We're moving even further off topic, but ….

The Fort Worth Press and the Star-Telegram competed for many years, until the Press folded in the mid seventies. Blackie was at the Press from 1946 to 1975, damned near a career right there. Blackie moved to the Dallas Times-Herald for another ten years or so, when the Dallas Morning News hired him away from the Herald, and the Herald got Skip Bayless from the Morning News. Blackie spent eighteen years there, and retired in about '02, at the age of 83.

Of note, Blackie hired and trained Dan Jenkins, later of Sports Illustrated and novels fame, and Bud Schrake, who also moved on to SI, novels, and biographies.

Bud Shrake's recent death brought Blackie back to mind for me.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Tyssen: Quote:Right-aligning

Tyssen:

Quote:

Right-aligning the text of the labels will go some way towards alleviating this, but for really long labels, I make them and the inputs that follow them full width of the available area. This isn't going to look good if you're mixing short and long labels in together, so you need to try and structure the form so the short and long questions are separated.

I can manually do whatever I need (currently pushing the inputs down works fine) but dynamic forms where random questions and inputs are thrown together (or watch this, international forms in mulitple languages) are the problem. I do already often right-align to fake alignment, but this works better in Engrish than in languages like Dutch where wrapping of very very long words makes a lot of whitespace on the left side. Doesn't look as nice.

I'd love a way to have the inputs always line up with the last line, instead of adding the "onder" class I add (and having "onder2" for when I have 3 lines wrapping and "onder4" for 4 lines wrapping... bleh that stinks)

Your legends of style page is nice but it never quite showed me how to position a legend to look like my left-floated labels. I can push it around a little, always making ugly extra space in FF that I cannot remove, but floating it left like my labels I just can't do (suppose our long oreo question was supposed to look like all the other questions, who are in labels, with the group of radios or checks off to the right in place of the single input?).

This has forced me to replace legends with for-less labels. : (

The trick Roger used is a godsend, THANK YOU!!! I had tried that earlier and must have done something different/wrong because my span still hadn't been wrapping... I had also tried setting it to display: block, setting a width, and still getting something less than desirable in FF as opposed to, say, Opera (when the legend needs to be a 100% wide bar in a flex-width form for instance).

Still, because of JAWS and W-E's default behaviour (I'd love to think everyone knows to turn this off but frankly, lots of people just "use" the computer and leave the defaults on) we still can't truly accept really long legends -- the wrapping thing bugged the hell out of me but this is the other problem:

"On average, approximately how many tasty Oreo cookies do you eat every day?" checkbox none
"On average, approximately how many tasty Oreo cookies do you eat every day" checkbox one or two
"On average, approximately how many tasty Oreo cookies do you eat every day" checkbox a few
"On average, approximately how many tasty Oreo cookies do you eat every day" checkbox quite a lot
"On average, approximately how many tasty Oreo cookies do you eat every day" checkbox a whole box

Arg!!!! What's nice is though if you have a long legend at the beginning of the form, after the first nested fieldset, that seems to go away (the long legend is no longer repeated). I dunno if W-E does that though but it's nice to know.

Currently, I'm putting that long text either in a for-less label OR I'll throw it into a

and then have a shorter title in the first input of the group of questions... which also can't work very well with dynamic or multi-lang forms.

I'm no expert, but I fake one on teh Internets

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Stomme poes wrote:Your

Stomme poes wrote:

Your legends of style page is nice but it never quite showed me how to position a legend to look like my left-floated labels. I can push it around a little, always making ugly extra space in FF that I cannot remove, but floating it left like my labels I just can't do (suppose our long oreo question was supposed to look like all the other questions, who are in labels, with the group of radios or checks off to the right in place of the single input?).

I can't remember if I've done left-aligned legends, but I'm probably more inclined to go for this sort of layout instead. I usually find that the questions that precede a series of checkboxes or radio buttons is quite long, so opt for making the legend full width of the available space instead (as in the example).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

That was a nice form. And

That was a nice form. And I'd even consider having the long legend like that, where there are really only two other label-input pairs afterwards (only yes/no, not none, some, many, all). Bookmarked.

I'm no expert, but I fake one on teh Internets

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 9 years 39 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Slicker way of doing this?

Quote:

I can't remember if I've done left-aligned legends, but I'm probably more inclined to go for this sort of layout instead. I usually find that the questions that precede a series of checkboxes or radio buttons is quite long, so opt for making the legend full width of the available space instead (as in the example).

As I understand your CSS on that form in, for example, the first section, "Personal Details", you are setting a width of 9em for the input fields' legends, correct? If so, is there not a "slicker" way of doing this so that they conform to the widest legend? In your form's case this isn't an issue, but I was wondering about the case of a dynamically generated form where the legends can vary - in this case if you always allowed for the widest legend you would end up with white-space rather than allowing the widths to flow naturally with the displayed content (as far as I have seen, flowing with the document's content seems to be one of the main aims of CSS)?

I also notice that you (and other forms I have seen) also set the input box widths to be the same within individual section of the form, is this necessary to get the display to work, or is it an aesthetic thing - for example, it seems counter-intuitive, to me, to have the Birthday textbox as long as the First/Surname boxes when it's input will be constrained to a much shorter value. I'm not criticising necessarily, but IMHO, it doesn't visually reinforce any input constraints you put on the form's inputs, plus on a longer form section, if all the boxes are uniformly sized it seems to make it a little more difficult to tie up inputs to legends.....?

Sorry to ask what might seem to be contentious questions, but I am trying to get a good understanding of the fundamentals of form layout with CSS as I will have to do some potentially pretty complex layouts in an imminent project and I would like to be as fully armed with tools/methods/ideas as I can be

Cheers

MH.

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 9 years 39 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

another point....

just a quick point to expand on my last comment - regarding things like the 9em width, I was thinking when asking about a "slicker" way of doing that about making the CSS more global, so the same style sheet could also be used to style different forms, with different legend widths, throughout a particular site - as I understand it, another object of CSS is to try to minimise the "page-specificness" of style sheets, yes?

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 9 years 39 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Stomme poes wrote:When your

Stomme poes wrote:

When your boss says you're going to have the labels on the left and the inputs on the right, you run into trouble right there, every time.

Out of interest, how would you, personally, style this set of labels/input fields (and how would anyone else do it)? Note that the field constraints are due to existing database columns and aren't changeable, not that necessarily impacts on the styling but I thought I would include it as it is related information.

"Description" - 2 X 30 character input fields (these need to be 2 distinct input boxes as some things are put in box 1 and some in box 2)
"Reference" - 25 chars
"Supplier Number" - 8 chars with a lookup button
"New Supplier Name" - 30 chars
"Country of Origin" - dropdown list
"Purchase Contact" - dropdown list
"Log Date" - fixed date
"Required Date" - input date with small datepicker button
"Compare Against Item" - 25 char with lookup button
"Return Item" - checkbox
"Number of Items" - 2 chars
"Notes" - wide text area box, about 5 lines high

That's a fairly short form, I have much longer ones and was wondering how better to lay them out, rather than with labels to the left, so that they don't end up taking up too much screen room (height wise) so the users don't have to scroll too much. Also, to maybe pre-empt a question, with the longer forms, splitting them isn't really an option as that then will involve more coding work and there's enough to do as it is =8)

I appreciate you are busy people, but if you have any time to produce any different examples to the classic "labels to the left, inputs to the right" that are still space-efficient, it would be much appreciated and educational.

Cheers

MH