Using a stylish form fieldset
One of the coolest form elements built into HTML is the fieldset. It relies on the browser to create a look that can't be replicated using ordinary HTML commands. It has the sophistication of images without the development effort, server load or extra client bandwidth.
A fieldset must be contained in a form. If you want to use one elsewhere, just surround it with form tags, provided that you're not interrupting another form, of course. One form can contain as many fieldsets as you wish.
Using Labels to Create Checkboxes and Radio Buttons With Clickable Descriptions
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. To do this, each 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 a natural thing for people to do at your Web site. It's difficult to navigate a mouse to select a small checkbox or radio button in comparison to simply clicking the description. Clickable descriptions make Web designs more efficient, and the the user experience more satisfying and enjoyable. Yet it's surprising how many HTML developers don't write their forms this way.
Using List-Style-Image to Make Beautiful Bulleted Lists
In HTML, an unordered list (the
li elements) is one of the easiest ways to organize information. It looks like this.
Lists like this are a best friend to anyone who wants to organize their Web page and make the best use of both white space and text. But did you know that through stylesheets there can be much more to a simple bulleted list?
One can spice up their lists by using any bullet of their choice, and a stylesheet which replaces the default black circular bullet with a nice-looking image. This is done by selecting the
li elements contained in the unordered lists and specifing a URL corresponding to the list-style-image attribute.
The best thing about list-style-image is that stylesheets already provide this new design tool, making complicated graphic design work unnecessary.
Here's how it works:
Original: July 11, 2008