What does the fieldset element's name attribute do?

Question

I understand the general semantics of a <fieldset>, along with how the name attribute on a <fieldset> can be used to give meaning to a group of inputs. The W3 wiki has a number of examples with this.

However, I don't understand what the name attribute on <fieldset> elements do when submitting forms. According to MDN, the name is submitted with the form data. W3C also mentions that it's for the element's name, which is used in form submission.

When trying out the name attribute on a <fieldset> though, I don't see it being submitted with the rest of the form data. It's unclear to me if it has any use other than semantics.

Is the name attribute on <fieldset> elements supposed to be submitted with the form data? If so, does it have a value? What does it do?

Answer 1

However, I don't understand what the name attribute on <fieldset> elements do when submitting forms.

Nothing.

You've tested this yourself:

When trying out the name attribute on a <fieldset> though, I don't see it being submitted with the rest of the form data.

It appears to be an error in the summary of the spec (presumably copied from input at some point) which has been copied onto the MDN reference.

The rules for form submission don't mention fieldsets.

W3C also mentions that it's for the element's name, which is used in form submission.

The complete quote is:

name - Name of form control to use for form submission and in the form.elements API

The form.elements API (along with generic DOM APIs like getElementsbyName) is the only place where the attribute has any actual effect.

Answer 2

This is a bit strange to me, but it seems the purpose is so that you can access it via myForm.elements like you can any other form element. Fieldsets do have some relevance to how your form functions (for example, making a fieldset "disabled" will apply to all its child form controls), so I guess this is something some developer might want to do.

I'm pretty sure that's the only use for it. Fieldsets can't have a value (even if you set one, your browser should ignore it and not submit it), so it'll never be included in what is sent to the server.

Here's a little test I made trying to understand this:

var fruitform = document.getElementById("fruitform");
var output = document.getElementById("output");

function log(msg) {
  output.innerHTML = output.innerHTML + "\n" + msg;
}

log("*** fruitform.elements ***")
log(JSON.stringify(fruitform.elements));
log("");

<h2>test form</h2>
<!-- the 'action' url' is just a page that outputs any GET parameters you pass to it -->
<form action="http://www.w3schools.com/html/action_page.php" id="fruitform">
  <fieldset name="facts">
    type:
    <input type="text" name="type" value="banana">
    <br><br>
    color:
    <input type="text" name="color" value="yellow">
  </fieldset>
  <br>
  <input type="submit">
</form>

<!-- place to put some output -->
<h2>output</h2>
<pre id="output">
</pre>

(here's the same demo on codepen)