JavaScript and HTML Tricks

JavaScript and HTML Tricks [con't]

Senior Consultant/Information Security - permanent position (TX)
Next Step Systems
US-TX-Irving

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.

Result

Please enter your Yahoo! Login Information


User name
Password
Security	Remember my user name and password on this computer Remember my user name only Do not remember my user name or password

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 ul and li elements) is one of the easiest ways to organize information. It looks like this.

Meat
Potatoes
Water

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: