« RE: No Clock and... | Main | iMovie 3.0.1 and... »
20030131 Friday January 31, 2003

[HTML] Fieldset and Legend I was reminded today of the <fieldset> and <legend> tags in HTML (BTW, they also work in XHTML). Basically, they are used to draw and label a box around input elements. Here's an example:

<form action="">
<div>
    <fieldset>
        <legend>Name Information</legend>
        <label for="firstName">First Name:</label>
        <input type="text" name="firstName" id="firstName" value="" /><br />
        <label for="lastName">Last Name:</label>
        <input type="text" name="lastName" id="lastName" value="" /><br />
    </fieldset>
    
    <fieldset>
        <legend>Address Information</legend>
        <label for="address">Address:</label>
        <input type="text" name="address" id="address" value="" /><br />
        <label for="city">City:</label>
        <input type="text" name="city" id="city" value="" /><br />
    </fieldset>
</div>
</form>

I added a little CSS for the fieldset and legend tags, and you end up with this:

Name Information

Address Information

Pretty cool eh? The labels end up in the text boxes (on some browsers) courtesy of the the label.js script. Posted in The Web at Jan 31 2003, 11:47:45 AM MST 1 Comment

Comments:

Raible - Thanks for the tip. I used this on a project just now to spice up and organize the form. Burke

Posted by Brian Burke on January 31, 2003 at 01:30 PM MST #

Post a Comment:
  • HTML Syntax: Allowed
Click me to subscribe
Matt Raible is a Web Architect who enjoys developing applications with open source technologies. Contact me for rates.
« December 2008
SunMonTueWedThuFriSat
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
   
       
Today

Recent Entries

Tag Cloud

abbie acegi appfuse denver flex grails gwt hibernate jack java jsf linkedin maven myfaces oscon rails skiing spring springmvc struts struts2 tapestry travel webframeworks wicket