DL abuse

html

26 Oct 2009

As I had quit a few laughs over my so called abuse of <dl> tags in forms, I decided that it was time I showed him what real abuse of dl's was.

So I present to you the ultimate dl abuse page and it's not even in a form

What I do, is instead of building a proper form with a fieldset and legend in it, I put it all in a definition list. Not quit semantically correct, but at least it is proper and valid html. So this is being written;

<dl>
	<dt>Form name</dt>
	<dd>
		<label for="name">Name</label>
		<input type="text" id="name" value="Bruce Lawson" />
	</dd>
	<dd>
		<label for="email">Email</label>
		<input type="email" id="email" value="bruce-invalid-email-lawson@foo.bar" />
	</dd>
	<dd>
		<input type="submit" id="go" />
	</dd>
</dl>

I then recognize my mistake and correct it with a small bit of JavaScript;

var abuse = function () {
	var init = function () {
		buildform();
		transform();
		destroy();
	};
	var buildform = function () {
		$('body').append('<form action="index.html"><fieldset><legend></legend></fieldset></form>')
	}
	var transform = function () {
		var leg = $('dt').html();
		$('legend').html(leg)
		$('dd').each( function() {
			var con = $(this).html();
			$('fieldset').append('<p>'+con+'</p>')
		});
	};
	var destroy = function () {
		$('dl').remove();
	}
	return {
		init:init
	};
}();
abuse.init();

Which gave me a proper form, that looks like this:

<form action="index.html">
	<fieldset>
		<legend>Form name</legend>
		<p>
			<label for="name">Name</label>
			<input type="text" value="Bruce Lawson" id="name"/>
		</p><p>
			<label for="email">Email</label>
			<input type="email" value="bruce-invalid-email-lawson@foo.bar" id="email"/>
		</p><p>
			<input type="submit" id="go"/>
		</p>
	</fieldset>
</form>

So my question of the day is this: Is this the ultimate dl abuse, or can you come up with a worse one?

Please not that this is NOT serious and should not be taken as such.

Update

As Molly rightfully noted, this is more JavaScript abuse than dl abuse. So if you have examples of the former, please let me know...

← Home