Is there a solution to
the problem illustrated in
the code below? Start by opening
the code in a browser to
get straight to
the point and not have to look through all that code before knowing what you're looking for.
<html>
<head>
<title>Input ID creates problems</title>
<style type="text/css">
#prologue, #summary { margin: 5em; }
</style>
</head>
<body>
<h1>Input ID creates a bug</h1>
<p id="prologue">
In this example, I make a list of checkboxes representing things which could appear in a book. If you want some in your book, you check them:
</p>
<form>
<ul>
<li>
<input type="checkbox" id="prologue" />
<label for="prologue">prologue</label>
</li>
<li>
<input type="checkbox" id="chapter" />
<label for="chapter">chapter</label>
</li>
<li>
<input type="checkbox" id="summary" />
<label for="summary">summary</label>
</li>
<li>
<input type="checkbox" id="etc" />
<label for="etc">etc</label>
<label>
</li>
</ul>
</form>
<p id="summary">
For each checkbox, I want to assign an ID so that clicking a label checks
the corresponding checkbox.
The problems occur when other elements in
the page already use those IDs. In this case, a CSS declaration was made to add margins to
the two paragraphs which IDs are "prologue" and "summary", but because of
the IDs given to
the checkboxes,
the checkboxes named "prologue" and "summary" are also affected by this declaration.
The following links simply call a javascript function which writes out
the element whose id is <a href="javascript:alert(document.getElementById('prologue'));">prologue</a> and <a href="javascript:alert(document.getElementById('summary'));">summary</a>, respectively. In
the first case (prologue),
the script writes out [object HTMLParagraphElement], because
the first element found with id "prologue" is a paragraph. But in
the second case (summary),
the script writes out [object HTMLInputElement] because
the first element found with id "summary" is an input. In
the case of another script,
the consequences of this mix up could have been much more dramatic. Now try clicking on
the label prologue in
the list above. It does not check
the checkbox as clicking on any other label. This is because it finds
the paragraph whose ID is also "prologue" and tries to check that instead. By
the way, if there were another checkbox whose id was "prologue", then clicking on
the label would check
the one which appears first in
the code.
</p>
<p>
An easy fix for this would be to chose other IDs for
the checkboxes, but this doesn't apply if these IDs are given dynamically, by a php script for example.
Another easy fix for this would be to write labels like this:
<pre>
<label><input type="checkbox" />prologue</label>
</pre>
and not need to give an ID to
the checkboxes. But this only works if
the label and checkbox are next to each other.
</p>
<p>
Well, that's
the problem. I guess
the ideal solution would be to link a label to a checkboxe using another mechanism (not using ID). I think
the perfect way to do this would be to match a label to
the input element whose NAME (not ID) is
the same as
the label's FOR attribute. What do you think?
</p>
</body>
</html>
