Structural form elements (<fieldset>, <legend>)

The fieldset element allows us to group different form elements (controls) into thematically similar groups. That usually helps users understand better the larger forms as well as it makes a form more accessible via improved tabbing navigation.

The legend element is actually a caption of a fieldset.

By applying a proper styling (via a style sheet) to fieldsets and legends, we ensure that a user ends up with a much better experience upon finishing using the form.

Syntax:

<fieldset><legend></legend><input type="" name="" /><input type="" name="" /></fieldset>

Attributes:

id, class (document-wide identifiers)
lang (language information), dir (text direction)
title (element title)
style (inline style information)
accesskey (access keys)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

Example

HTML fieldset and legend elements:

<html>

<head>
<title>HTML tutorial</title>
<style type="text/css">
form {
    border:1px #ccc groove;
}
fieldset {
    background-color:#ddd;
    padding:2px;
}
legend {
    font-style:italic;
}
</style>
</head> 

<body>

<form action="" method="post" name="form">

<fieldset>
    <legend>Client's name and date of birth</legend>
    First name:<br />
    <input type="text" name="fname" value="" /><br />
    Last name:<br />
    <input type="text" name="lname" value="" />
</fieldset><br />

<fieldset>
    <legend>Client's favorite fruit</legend>
    Fruit chioce:<br />
    <input type="radio" name="fruit" value="apple" checked="checked" />apple<br />
    <input type="radio" name="fruit" value="orange" />orange<br />
    <input type="radio" name="fruit" value="banana" />banana<br />
</fieldset><br />

<input type="submit" value="Send" />
<input type="reset" value="Reset" />

</form>

<h6>p.s. submitting the form will not generate any action</h6>

</body>

</html>

›› go to examples ››

Structural form elements (<fieldset>, <legend>)

Syntax:

Attributes:

Example

HTML fieldset and legend elements:

Comments

About

Contact

Get Connected