JavaScript and HTML Tricks - Page 2

JavaScript and HTML Tricks [con't]

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.

<form> <fieldset> <legend>Please enter your Yahoo! Login Information</legend> <table> <tr><th>User name</th> <td><input type="text" name="name" /></td></tr> <tr><th>Password</th> <td><input type="password" name="password" /></td></tr> <tr><th>Security</th> <td colspan="2"><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></td></tr> <tr><th><input type="submit" value="Login to Yahoo!" /></th></tr> </table> </fieldset> </form>

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:

<style type="text/css"> ul.orangearrow li { list-style-image: url(https://0--0.us/0067_circular_arrow.png); } </style> <ul class="orangearrow"> <li>meat</li> <li>potatoes</li> <li>water</li> </ul>

Original: July 11, 2008

Digg This Add to del.icio.us

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both