HTML <legend> tagS2C Home   « HTML <legend> tag

Definition

The <legend> tag is used for defining a title for our fieldset.

Example


<form action="html4intermediate/simpleform.html" method="get">
  <fieldset>
    <legend>Pie Survey</legend>	
    <p>Name:<input type="text" name="name" /></p>
    <p>Which pie do you prefer?:</p>
    <p><input type="radio" name="pie" checked="checked" value="chicken" /> Chicken</p>
    <p><input type="radio" name="pie" value="fish" /> Fish</p>
    <p><input type="radio" name="pie" value="shepherds" /> Shepherds</p>
    <p>Select a pie shape:</p>
    <p><select>
      <optgroup label="Normal">
        <option value="round">round</option>
        <option value="square">square</option>
      </optgroup>
      <optgroup label="Custom">
        <option value="hexagon">hexagon</option>
        <option value="star">star</option>
        <option value="triangle">triangle</option>
      </optgroup>
    </select></p>
    <p>Submit your information:</p>
    <p><button type="submit" value="Submit">Submit</button></p>
  </fieldset>
</form>

Required Attributes

NONE

Optional Attributes

align - deprecated - use CSS instead.

Common Attributes

accesskey - specifies a keyboard shortcut to an element.


<legend accesskey="aKey">Legend text here</legend>

class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.


<legend class="classname">Legend text here</legend>

id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.


<legend id="idname">Legend text here</legend>

style - specifies an inline style for the element allowing you to apply the style to the content.


<legend style="color:red;text-align:left">Legend text here</legend>

title - specifies extra information about the content.


<legend title="information about the content">Some text here</legend>

Language Attributes

dir - specifies the directional flow of the content.


<!-- The text will flow from left to right -->
<legend dir="ltr">Legend text here</legend>

<!-- The text will flow from right to left -->
<legend dir="rtl">Legend text here</legend>

lang - specifies a language code for the content of the element.


<legend lang="en">Legend text here</legend>

xml:lang - specifies a language code for the content of the element in XHTML documents.


<legend xml:lang="fr">Legend text here</legend>

Document Event Attributes

NONE

Form Event Attributes

NONE

Image Event Attributes

NONE

Keyboard Event Attributes

onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed.


<!-- Executes the go() function -->
<legend onkeydown="go()">Legend text here</legend>

onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<legend onkeypress="go()">Legend text here</legend>

onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.


<!-- Executes the go() function -->
<legend onkeyup="go()">Legend text here</legend>

Mouse Event Attributes

onclick - The JavaScript code to be run when a mouse is clicked on the element.


<!-- Executes the go() function -->
<legend onclick="go()">Legend text here</legend>

ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.


<!-- Executes the go() function -->
<legend ondblclick="go()">Legend text here</legend>

onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.


<!-- Executes the go() function -->
<legend onmousedown="go()">Legend text here</legend>

onmousemove - The JavaScript code to be run when the mouse button is moved.


<!-- Executes the go() function -->
<legend onmousemove="go()">Legend text here</legend>

onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.


<!-- Executes the go() function -->
<legend onmouseout="go()">Legend text here</legend>

onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.


<!-- Executes the go() function -->
<legend onmouseover="go()">Legend text here</legend>

onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.


<!-- Executes the go() function -->
<legend onmouseup="go()">Legend text here</legend>

go to home page Homepage go to top of page Top