Marusya's School Notes

Form: Fieldset & Legend

The <fieldset> element groups related data in a form, by puting a box around the group of elements that it contains. The <legend> element defines a caption for the <fieldset> element, thereby "labelling" that group box.

HTML file:	Displayed by browser:
<form action="http://www.w3schools.com/html/action_page.php"> <fieldset> <legend>Personal information:</legend> <br /> First name:<br /> <input type="text" name="firstname" value="Mickey"> <br /><br /> Last name:<br /> <input type="text" name="lastname" value="Mouse"> <br /><br /> <input type="submit" value="Submit"> </fieldset> </form>	Personal information: First name: Last name:

Just for fun, I "prettied up" this form with a little bit of CSS styling:

HTML file:	Displayed by browser:
<form action="http://www.w3schools.com/html/action_page.php"> <fieldset style="border:double; color:blue;"> <legend>Personal information:</legend> <p style="color:olive;">First name:<br /> <input type="text" name="firstname" value="Mickey"> <br /><br /> Last name:<br /> <input type="text" name="lastname" value="Mouse"></p> <input type="submit" value="Click to Send" style="color:blue;"> </fieldset> </form>	Personal information: First name: Last name:

HTML file:

Displayed by browser:

<form action="http://www.w3schools.com/html/action_page.php">
<fieldset style="border:double; color:blue;">
    <legend>Personal information:</legend>
    <p style="color:olive;">First name:<br />
    <input type="text" name="firstname" value="Mickey">
    <br /><br />
    Last name:<br />
    <input type="text" name="lastname" value="Mouse"></p>
    <input type="submit" value="Click to Send" style="color:blue;">
</fieldset>
</form>