The Blog of Lucien Stals

I’m working on a form. It’s an old form and I’m trying to drag it, kicking and screaming, from the past into the semantic HTML world.

But I’ve come across something that’s bugging me. It’s all about Radio Buttons.

Here’s a little sample…

I’ve got a fieldset with a legend defining part of the form. The label for each form element is on the left, and I’m using the <label for=""> tag to associate the label with it’s form field. In the picture, the “job title” text is the label for the corresponding form field.

The code looks something like…

<fieldset>
	<legend>Duplication Request Details</legend>
	<div>
		*<label for=“jobTitle”>Job title</label>:
		<input name=“jobTitle” type=“text” id=“jobTitle”>
	</div>
</fieldset>

I removed the table code for clarity. (Yes, there are tables involved, just to make things a bit more complicated)

But what happens when I get to the Packaging Type? The left hand column is no longer the label for the radio buttons. A label can only use it’s for attribute to associate itself with the id attribute of another element.

In Packaging Type, the label now conceptually applies to the entire button group. A button group, in HTML, is defined by the buttons name attribute, which we can’t bind a label to.

Therefore the following, which is what I *want* to do, is invalid code…

<div>
	*<label for=“packaging”>Packaging type</label>:
	<input type=“radio” value=“paper” name=“packaging”>Paper sleeve
	<input type=“radio” value=“plastic” name=“packaging”>Plastic sleeve
</div>

(Note the attempt to associate a label with a name.)

So what are my alternatives?

A valid solution would be…

<div>
	*Packaging type:
	<input type=“radio” value=“paper” id=“paper” name=“packaging”><label for=“paper”>Paper sleeve</label>
	<input type=“radio” value=“plastic” id=“plastic” name=“packaging”><label for=“plastic”>Plastic sleeve</label>
</div>

But that doesn’t associate the buttons with their purpose: identifying the packaging type, as defined by the text in the left hand column.

Here is where HTML is letting me down

It would be nice if we could have something like a ButtonGroup tag which could contain other buttons, but which could have it’s own id. Something like…

<div>
	*<label for=“packagingGroup”>Packaging type</label>:
	<buttongroup id=“packagingGroup”>
		<input type=“radio” value=“paper” id=“paper” name=“packaging”><label for=“paper”>Paper sleeve</label>
		<input type=“radio” value=“plastic” id=“plastic” name=“packaging”><label for=“plastic”>Plastic sleeve</label>
	</buttongroup>
</div>

Mmmmm. That would be nice

We would preserve the single label-to-button relationship, but would also have a label-to-group relationship. All the id’s are unique, so we’re not breaking any rules there.

Perhaps I should go check out the HTML5 effort and make a few suggestions…

I’m getting a little tired of web sites that are all about money. I’m not saying that a web site shouldn’t pay it’s way, and if it’s a commerce site then of course it should be making money.

Hell. If it’s got ‘dot com’ in the name, then it should be making money somewhere.

But there’s an awful lot of sites out there which are nothing but blogs or forums trying to squeeze every bit of screen real estate out of the page to whack advertising on it and make money.

A particular example is the sitepoint site. Not content with having a good publishing business, they try to milk the site itself for advertising. On my laptop (at 1024*768) the body of one of their blog posts doesn’t start until just below the half way mark of the screen, and after the post title, I only get 2-3 lines of content before I have to scroll. This screen shot illustrates how the site appears to me. The green shaded part at the bottom is the post. (eg, the content I’m interested in. About %16 of the available screen real estate.)

Yeah, I have a lot of tool bars and I could shut a few of them off, but I’d only save a little space and I do actually use them often enough to justify them.

And sitepoint is by far not the worst offender. But they do have pop up windows to add to the joy

I was just reading a post on the Coding Horror blog, a site characterized by lots of white space on the screen, and it talks about the 2.0 dot com bubble. Perhaps this is what’s bugging me. Just as the original dot com bubble was characterized by greed, this 2.0 bubble might be the same. Sure, everyone learned lessons from the first time around, but peoples memories can be short. And when I see Site Point, a site I otherwise respect for their great technical articles, get bitten by the greed bug as it seems to have been, then I get just a little bit sad.

To me, the perfect example of this kind of mentality is link baiting. I only just discovered the term, and I don’t like it. I don’t like the fact that there are pages and pages online of information about how to link bait more effectively. I don’t like the fact that it appears to be an accepted practice. It’s just another form of viral marketing. It makes me extremely skeptical about a lot of what I read online.

What’s the bottom line?

Web design is *not* sysnonymous with Search Engine Optimisation.
Web design is *not* sysnonymous with Affiliate programs.
Web design is *not* sysnonymous with Google ads.

Design is design. The rest is greed.