Tuesday, 29 January 2013

fieldset and legend tags


<Fieldset> and <legend> tags in HTML

The HTML fieldset tag is used for grouping related form elements. By using the fieldset tag and the legend tag. You can make your forms much easier to understand for your users. the <fieldset> tag is supported in all major browsers. The <fieldset> tag draws a box around the related elements. the <legend> tag defines a caption for the <fieldset> element.

   

Global Attributes

The <fieldset> tag supports the  Global attributes .

Attribute
Description
Specifies a shortcut key to activate/focus an element
Specifies one or more classnames for an element (refers to a class in a style sheet)
Specifies whether the content of an element is editable or not
Specifies a context menu for an element. The context menu appears when a user right-clicks on the element
Specifies the text direction for the content in an element
Specifies whether an element is draggable or not
Specifies whether the dragged data is copied, moved, or linked, when dropped
hiddenNew
Specifies that an element is not yet, or is no longer, relevant
Specifies a unique id for an element
Specifies the language of the element's content
Specifies whether the element is to have its spelling and grammar checked or not
Specifies an inline CSS style for an element
Specifies the tabbing order of an element
Specifies extra information about an element


Attributes
N New in HTML5.
Attribute
Value
Description
disabled
disabled
Specifies that a group of related form elements should be disabled
form
Form_id
Specifies one or more forms the fieldset belongs to
name
text
Specifies a name for the fieldset

It also supports Event Attributes. But we will see later of the sections.


Example program:
<form>
  <fieldset >
  <legend align="center">Subscription info</legend>
    <label for="name">Username:</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
</form>
o/p: