Why fieldset as .form-group instead of div's?

[radek-anuszewski]

Hi!

In Components / Forms / Form controls I noticed that "form-group" class is on the "fieldset" tag, instead of "div" like it was earlier. I thought that fieldset is meant to group few controls in one group (like group weight and growth in one fieldset called BMI), not for single form control. And radios are not grouped with fieldset tag - but I found on Mozilla Developer Network and H71: Providing a description for groups of form controls using fieldset and legend elements that radios should be wrapped in fieldset tag.
Why fieldset tag is used instead of div's, which IMO is incorrect (of course I am not 100% expert :) I only place here my thougths) or am I wrong about it and it should be as is in docs now?

[cvrebert]

CC: @patrickhlauke

[patrickhlauke]

Using <fieldset> around a single control is redundant, but not wrong as such. Mainly, it's pointless, as nothing special actually happens (e.g. no announcement is made by assistive tech).
However, when there are multiple related radio buttons/checkboxes, it is recommended to use it (and a <legend> to go with it as well).
So for clarity, the example should really be amended (replacing the <fieldset>s with generic <div>, adding a <fieldset> and appropriate <legend> around the radio buttons)

[mvrhov]

There is/was some problem with fieldset. I don't remember exactly what. Maybe that it cannot be hidden/collapssed/..

[patrickhlauke]

historically, i seem to remember <fieldset> resisting certain attempts at styling in Firefox...but I'm not aware of any current issues.

[DanCouper]

Issue in Firefox is still present. If this is at all important, would advise not recommending it in documentation for this reason, and using <div> or likewise instead. It makes it very difficult to align a form group on a horizontal line with other elements. This goes from difficult to [as far as I can see] close to impossible if you use flex as intended, without explicit widths.

This is a form group .div with flex applied, wrapping a label and an input group, with flex:1 applied to the form group:

This happens when you change the <div> to a <fieldset>:

Note that this is a later iteration: at first, the entire <fieldset> containing the form controls/buttons went to 100% width of the outer container and refused to be restyled, that took a while to fix (again, simply switching to a div fixed it almost immediately)

Through a combination of wrapping things in extra elements, and applying explicit widths, you can get fairly close to the <div> version, but it's a huge pain. I assumed for a while that it was BS styling that I was just missing, went over and over until it clicked that it was just <fieldset> - quite hard to debug as it seems to override applied styling with no indication of how or why.

Note I'm basing this almost entirely on usage of flex properties - I haven't done much testing without them. Also the issue only really rears its head when an attempt is made to use flex to put form controls/labels on the same line.

[patrickhlauke]

@DanCouper you say "issue in firefox is still present", but from what I can see nothing has actually been discussed in this thread about firefox specifically, nor the specific problem you're seeing with flex etc. also, if there was any issue before, it's of course still present as this PR has not been merged yet.

could i ask that you open a separate issue specifically for this problem you're having, and also post a reduced test case in jsfiddle or similar?

[DanCouper]

Sorry about this, but I fully realise nothing has been done - the [admittedly quite detailed] comment is very specifically in response to your comment directly above it which is definitely specifically about Firefox, following on directly from a comment by @mvrhov. Of course the issue is still present: it's a Firefox layout algorithm issue, not a Bootstrap issue - the parent question is asking why <fieldset> is used in the docs - this is a reason maybe why it shouldn't be.

historically, i seem to remember

resisting certain attempts at styling in Firefox...but I'm not aware of any current issues

My comment's just a demonstration of the issue: it focusses on how it breaks in flex, and I assume there are other gotchas. It's a comment here, because this is where it should be. Sorry if that was slightly blunt, I'm just a bit perplexed by the response given my comment was a direct response to yours.

Anyhoo, I'll put together a set of cases in a JSFiddle as demonstration & open another issue when I'm back in work tomorrow :)

[patrickhlauke]

sorry, didn't mean to sound rude (but re-reading my response, i was rather short, sorry). in fairness, it's nearly 4 months since we last looked at this thread, so it wasn't quite obvious to me what issue in firefox you were referring to. anyway, makes sense now.

[DanCouper]

No probs, reading back it's my fault, it reads as a bug report. I think it an issue, if very minor, but worth noting (esp for new devs) as it's subtle & very annoying & I think it's likely to crop up a bit more for people moving toward developing in flexbox + who using Firefox. Not 100% sure though so I'll try a fairly comprehensive set of cases to test.

[mdo]

Fixed by #19277.