Fieldset Tag in HTML5
The <fieldset> is a useful
tool for organizing and grouping related items within a HTML form. The
<fieldset> tag is supported in all major browsers. It has the effect of
creating a box around the grouped items and showing a description to the right
of each item. By using the <fieldset> tag and the <legend> tag, you
can make your forms much easier to understand for your users. The
<legend> tag defines a caption for the fieldset element.
Syntax
This element uses separate opening and closing tags.
<fieldset>...</fieldset>
Attributes
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
Syntax
This element uses separate opening and closing tags.
<fieldset>...</fieldset>
Attributes
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
|
Attributes Introduced by HTML5
|
|
|
Attributes
|
Description
|
|
disabled
|
Disables
all form control descendants of the <fieldset> element.
|
|
form
|
Specifies
a form to associate this <fieldset> element with. The value must be a
ID of a form element.
|
|
name
|
Specifies
the name of the <fieldset>.
|
Global Attributes
The following attributes are standard across all HTML 5 tags.
|
HTML5 Global Attributes
|
||
|
accesskey
|
draggable
|
style
|
|
class
|
hidden
|
tabindex
|
|
dir
|
spellcheck
|
|
|
contenteditable
|
id
|
title
|
|
contextmenu
|
lang
|
|
Event Handler Content Attributes
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event. Here are the standard HTML 5 event handler content attributes.
|
onabort
|
onerror*
|
onmousewheel
|
|
onblur*
|
onfocus*
|
onpause
|
|
oncanplay
|
onformchange
|
onplay
|
|
oncanplaythrough
|
onforminput
|
onplaying
|
|
onchange
|
oninput
|
onprogress
|
|
onclick
|
oninvalid
|
onratechange
|
|
oncontextmenu
|
onkeydown
|
onreadystatechange
|
|
ondblclick
|
onkeypress
|
onscroll
|
|
ondrag
|
onkeyup
|
onseeked
|
|
ondragend
|
onload*
|
onseeking
|
|
ondragenter
|
onloadeddata
|
onselect
|
|
ondragleave
|
onloadedmetadata
|
onshow
|
|
ondragover
|
onloadstart
|
onstalled
|
|
ondragstart
|
onmousedown
|
onsubmit
|
|
ondrop
|
onmousemove
|
onsuspend
|
|
ondurationchange
|
onmouseout
|
ontimeupdate
|
|
onemptied
|
onmouseover
|
onvolumechange
|
|
onended
|
onmouseup
|
onwaiting
|
For example
a form might contain a few fields about name and email, some fields asking for opinions, and a field for "other comments". <FIELDSET> could be used to group those fields.
<html>
<head >This is the example of the fieldset tag
</head>
<body>
<form>
<FIELDSET>
name: <INPUT NAME="realname"><BR>
email: <INPUT NAME="email">
</FIELDSET><p>
<FIELDSET>
favorite color: <INPUT NAME="favecolor"><BR>
<INPUT TYPE=CHECKBOX NAME="onions"> like green onions<BR>
<INPUT TYPE=CHECKBOX NAME="cookies"> like cookies<BR>
<INPUT TYPE=CHECKBOX NAME="kimchee"> like kim chee<BR>
</FIELDSET><P>
<FIELDSET>
other comments:<BR>
<TEXTAREA NAME="comments" ROWS=5 COLS=25></TEXTAREA>
</FIELDSET>
</form>
</body>
</html>
Fire Fox
Figure1
Figure2
Now using legend tag
The <legend> tag defines a caption for the fieldset element.
For example
In the above example we define caption for the fieldset element.
Now using legend tag
The <legend> tag defines a caption for the fieldset element.
For example
In the above example we define caption for the fieldset element.
<html>
<head>This is the example of the fieldset tag</head>
<body>
<form>
<FIELDSET>
<legend >Personal information</legend>
name: <INPUT NAME="realname"<BR>
<br />
email: <INPUT NAME="email">
</FIELDSET><FIELDSET>
<legend >Opinions fields field</legend>
favorite color: <INPUT NAME="favecolor"><BR>
<INPUT TYPE=CHECKBOX NAME="onions"> like green onions<BR>
<INPUT TYPE=CHECKBOX NAME="cookies"> like cookies<BR>
<INPUT TYPE=CHECKBOX NAME="kimchee"> like kim chee<BR>
</FIELDSET><P>
<FIELDSET>
<legend >Comment field</legend>
other comments:<BR>
<TEXTAREA NAME="comments" ROWS=5 COLS=25></TEXTAREA>
</FIELDSET>
</form>
</body>
</html>
Internet Explorer
This defines the fields with a caption.
Figure3
New for the <fieldset> tag in HTML5
The below attributes are the new attribute in HTML5.
1. disabled Attribute
To disabled attribute specifies that a group of form elements (a fieldset) should be disabled. A disabled fieldset is unusable and un-clickable.
Syntax
<fieldset disabled="disabled">
For example
Internet Explorer
This defines the fields with a caption.
Figure3
New for the <fieldset> tag in HTML5
The below attributes are the new attribute in HTML5.
1. disabled Attribute
To disabled attribute specifies that a group of form elements (a fieldset) should be disabled. A disabled fieldset is unusable and un-clickable.
Syntax
<fieldset disabled="disabled">
For example
<FIELDSET disabled="disabled">
<legend >Personal information</legend>
name: <INPUT NAME="realname"<BR>
<br />
email: <INPUT NAME="email">
</FIELDSET>
Internet
Explorer
Figure4
2. Form Attribute
2. Form Attribute
- The form attribute specifies one or more
forms the fieldset belongs to.
- The value of the form attribute must be
the id of the form it belongs to.
- To refer to more than one form, use a
space-separated list.
For example
<html>
<head>This is the example of the fieldset tag</head>
<body>
<form action="demo_form.asp" method="get" id="ice">
What is your favorite icecream flavor? <input type="text" name="icecream" /><br />
<input type="submit" />
</form>
<p>The fieldset below is outside the form element, but
still part of the form.</p>
<FIELDSET form="ice">
<legend >Personal information</legend>
name: <INPUT NAME="realname"<BR>
<br />
email: <INPUT NAME="email">
</FIELDSET>
</form>
</body>
</html>
Internet Explorer
Figure5
3.
name Attribute
The name attribute specifies the name of a fieldset.
Syntax
<fieldset name="value">
<FIELDSET name="person">
<legend >Personal information</legend>
name: <INPUT NAME="realname"<BR>
<br />
email: <INPUT NAME="email">
</FIELDSET>
No comments:
Post a Comment