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
accesskey	Specifies a shortcut key to activate/focus an element
class	Specifies one or more classnames for an element (refers to a class in a style sheet)
contenteditable	Specifies whether the content of an element is editable or not
contextmenu	Specifies a context menu for an element. The context menu appears when a user right-clicks on the element
dir	Specifies the text direction for the content in an element
draggable	Specifies whether an element is draggable or not
dropzoneNew	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
id	Specifies a unique id for an element
lang	Specifies the language of the element's content
spellcheckNew	Specifies whether the element is to have its spelling and grammar checked or not
style	Specifies an inline CSS style for an element
tabindex	Specifies the tabbing order of an element
title	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: