Monday, May 09, 2011
Checking via Focus Transmission
Blog Entry #214
When you encounter a set of checkboxes or radio buttons on a Web page
do you find it
difficultto check an individual checkbox or radio button, and do you alternatively expect,
from experience with other programs, to be able to check it by clicking on the text to its right? Would it
disappointyou if you couldn't check a checkbox or radio button by clicking on its adjoining text? Conversely, does the ability to check a checkbox or radio button by clicking on its adjoining text make your
user experience more satisfying and enjoyable? Maybe I need to get out more. Alleging that many users answer yes to the above questions, the author of HTML Goodies' "JavaScript and HTML Tricks" tutorial devotes to this matter the tutorial's fourth section, Using Labels to Create Checkboxes and Radio Buttons With Clickable Descriptions.
The clickable description concept is illustrated via the same login form that accompanies the preceding tutorial section and whose embellishment with a fieldset we discussed in detail in the previous post. Control-wise, the login form
(a-b) begins with User name and Password fields,
(c-e) subsequently presents a menu of three Security radio buttons, and
(f) concludes with a submit button.
You'll notice in the form above that one can click on the descriptions of the security options in order to choose the desired option,the Using Labels ... section begins. Actually, I didn't notice that (at first), but upon checking it out I can report that the clickable description effect holds for almost all of the GUI browsers on my computer in both the OS X and SheepShaver environments - pre-Gecko versions of Netscape were the exceptions.
The effect initially seemed fishy to me; more specifically, I thought, "This must be another example of default browser behavior but not default HTML behavior à la the 'Submit the Form Using Enter' effect." But a careful reading of the relevant sections in the HTML 4.01 Specification reveals that this is standard behavior, or can be interpreted as such. To see why this is so, let's take a close look at the radio button/description code:
<input type="radio" name="secure" value="home" id="secure_home" />
<label for="secure_home">Remember my user name and password on this computer</label><br />
<input type="radio" name="secure" value="group" id="secure_group" checked="checked" />
<label for="secure_group">Remember my user name only</label><br />
<input type="radio" name="secure" value="public" id="secure_public" />
<label for="secure_public">Do not remember my user name or password</label>The 'magic ingredient' that enables the effect is the HTML label element, which oddly gets no mention/credit in the Using Labels ... section. Each radio button input element is explicitly associated with a label element holding the button description; this association is achieved by setting the id attribute of the input element and the for attribute of the label element to the same value (secure_home, secure_group, and secure_public, respectively, for the three radio buttons). Clicking on label element text imparts focus to the label element. Towards the end of its label element documentation, the W3C states:
When a LABEL element receives focus, it passes the focus on to its associated control. See the section below on access keys for examples.Moving to the Access keys section, we find:
The action that occurs when an element receives focus depends on the element. ... When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.As Thomas Dolby might say, "Quod erat demonstrandum, baby."
Here's the author's take on the code:
[E]ach radio button must be labeled with an HTML ID. The clickable description has an attribute for="HTML ID" which allows the browser to understand that the radio button should be selected when the user clicks the description.This is fair enough if the input elements and label elements are explicitly associated; subtracting the id attributes and for attributes from the above code will definitely kill the effect (as will subtracting the label markup altogether). However, we have seen previously that an input element and a label element can be associated implicitly via placing the input element in the content of the label element:
<label><input type="radio" name="secure" value="home" />
Remember my user name and password on this computer</label>
<!-- The radio buttons at the top of the post are implicitly labeled, as are the (first seven) controls of the "Dummy Form" cited below. -->The effect also works with this arrangement, which does not require the label elements and input elements to have for attributes and id attributes, respectively.
You can see how the effect works with other types of controls by clicking on the Input #[1-7] labels in the "Dummy Form" of HTML Goodies' "How to Populate Fields from New Windows Using JavaScript" tutorial.
Image bullets
The last tutorial section, Using List-Style-Image to Make Beautiful Bulleted Lists, doesn't deserve its own entry, so let's deal with it here and now. This section briefly discusses the use of the CSS list-style-image property to replace the disc list item markers of unordered lists (disc being the initial value of the CSS list-style-type property) with small images, a topic we previously addressed in Blog Entry #97. Unfortunately, the author's list-style-image demo, which attempts to mark the items of a class="orangearrow" unordered list
<ul class="orangearrow">
<li>Meat</li>
<li>Potatoes</li>
<li>Water</li>
</ul>with a 0067_circular_arrow.png image
ul.orangearrow li {
list-style-image: url(http://0--0.us/0067_circular_arrow.png); }works at neither the HTML Goodies version nor the WebReference version of the tutorial: the orangearrow list items have disc markers as the 0067_circular_arrow.png image is not available.
I would tell you that the http://0--0.us/0067_circular_arrow.png link is dead, but bizarrely there is no trace of the 0--0.us domain on the Web; moreover, an Internet Archive search for http://0--0.us turns up nothing. But a Google search for the image itself - specifically, for "0067_circular_arrow.png", including the quotes - hits pay dirt, returning a number of pages that either (a) feature the image as part of a collection of images offered for download (e.g., here) or (b) use the image in some way (not necessarily as a list item marker), allowing your humble narrator to step into the breach and show you what the orangearrow list should really look like:
- Meat
- Potatoes
- Water
Additional comments
This is done by selecting the li elements contained in the unordered lists and specifying a URL corresponding to the list-style-image attribute.In fact, the style rule's li descendant selector is unnecessary - as shown in the W3C's documentation, list-style-image can be set at the ul level:
ul.orangearrow {
list-style-image: url(image_path/0067_circular_arrow.png); }The best thing about list-style-image is that style sheets already provide this new design tool, making complicated graphic design work unnecessary.The list-style-image property goes back to CSS Level 1 and has indeed been around for a while. As for it
making complicated graphic design work unnecessary, well, this is certainly true if you avail yourself of other people's images.
Next up in the Beyond HTML : JavaScript sector is a codeless "Book Review: Head First JavaScript", which I think we can skip. But the tutorial after that, "How to Develop Web Applications with Ajax: Part 1", offers us something new - an introduction to AJAX - and we'll take it on in the following entry.
reptile7
- posted by A. Peak @ 3:00 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)