Member Avatar for lakodajin

can anyone explain me <fieldset><legend> tags briefly . I am not Good in HTML and CSS so can any one guide me please.

  • 4 Contributors
  • 5 Replies
  • 124 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A short, practical summary that builds on 's example and 's note: <fieldset> is a semantic container for grouping related form controls; <legend> supplies the caption (the group label) and is what assistive technology announces as the group name. The tags are not "frames" or layout helpers — they add meaning and default browser styling (a border and a caption area).

Important details often missed in short examples: the <legend> should be the first child of the <fieldset> so it is correctly treated as the caption. The <fieldset> element supports the global HTML attributes and the boolean disabled attribute (which causes browsers to disable the controls inside). The <legend> has only global attributes. Using <fieldset> purely to get a border is fine visually, but for non-form grouping a <div> or <section> plus CSS (and an ARIA label if semantics are needed) is more appropriate.

A compact accessible pattern (not shown earlier in the thread):

<form>
  <fieldset>
    <legend>Preferred contact</legend>
    <label><input type="radio" name="contact" value="email"> Email</label>
    <label><input type="radio" name="contact" value="phone"> Phone</label>
  </fieldset>

  <fieldset disabled>
    <legend>Advanced options (disabled)</legend>
    <label><input type="checkbox" name="updates"> Receive updates</label>
  </fieldset>
</form>

Quick tips and gotchas: legend styling varies across browsers, so use simple CSS (for example legend { padding: 0 .5em; }) rather than complex positioning. Avoid hiding the <legend> with display:none because that removes the group label for screen readers; use a visually-hidden utility if the label must be hidden visually. For the authoritative spec and small differences across browsers, see the MDN reference: HTML fieldset element.

Recommended Answers

All 5 Replies

Member Avatar for sureronald

Maybe an example will do

<fieldset>
<legend>Daniweb in a nutshell</legend>
<p>About Daniweb About Daniweb About Daniweb About Daniweb About Daniweb</p>
</fieldset>

Fieldsets are normally used to group contents of some type, for example forms

Edited by sureronald because: typo
Member Avatar for lakodajin

Maybe an example will do

<fieldset>
<legend>Daniweb in a nutshell</legend>
<p>About Daniweb About Daniweb About Daniweb About Daniweb About Daniweb</p>
</fieldset>

Fieldsets are normally used to group contents of some type, for example forms

<html>
<body>
<img src="jin.jpg"height="15%"width="5%"align="center">
<font size="70"color="pink"face="tahoma">JIN</font>
 
      <fieldset>
   
      <legend>Daniweb in a nutshell</legend>


      </fieldset>
<hr width="20%"align="left">
</body>
</html>

I am using same coding in my source code but concept of these tag is still not clear in my mind ,, please ll u please define it a little bit more. I know about frames but these both tags are seen by me very 1st tym on this site .

Member Avatar for lakodajin

Maybe an example will do

<fieldset>
<legend>Daniweb in a nutshell</legend>
<p>About Daniweb About Daniweb About Daniweb About Daniweb About Daniweb</p>
</fieldset>

Fieldsets are normally used to group contents of some type, for example forms

yes now I got your point ,,, dear frind see my code n plzz run it

<html>
  <body>
   <img src="jin.jpg"height="15%"width="5%"align="center">
    <font size="70"color="pink"face="tahoma">JIN</font>
 
      <fieldset>
         <legend>lakodajin in a nutshell
         </legend>
      </fieldset>
       <br>
 
      <fieldset>
         <legend>lakodajin in a nutshell
         </legend>
      </fieldset>
    <hr width="20%"align="left">
  </body>
</html>

dear now tell me what are attributes of this tag??? I properly understand the purpose of these tags but I wana use them more

Member Avatar for MidiMagic

They are intended to separate parts of forms.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.