Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Checkbox markup does not validate as HTML5 #264

Closed
johngrimes opened this Issue May 6, 2010 · 6 comments

Comments

Projects
None yet
3 participants

Rails adds a hidden field in with a checkbox to ensure that mass assignment doesn't get screwed up when browsers omit unchecked fields altogether.

http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#M001612

Formtastic wraps checkbox fields with a label, including the associated hidden field. The problem with this is that the HTML5 spec only allows the one form input within the label.

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-label-element

The spec describes the label tag's content model as:

Phrasing content, but with no descendant labelable form-associated elements unless it is the element's labeled control, and no descendant label elements.

So this results in the following errors if you try to validate a HTML5 page that contains a Formtastic form with a checkbox in it:

  • Any input descendant of a label element with a for attribute must have an ID value that matches that for attribute.
  • The label element may contain at most one input, button, select, textarea, or keygen descendant.
  • label element with multiple labelable descendants.
Contributor

benschwarz commented May 7, 2010

While I'm generally an advocate for following standards and also challenging preexisting crufty software: Rails doesn't currently support these standards out of the box, so why should formtastic?

Owner

justinfrench commented May 7, 2010

Not promising a fast fix on this, but the issue is that Rails' checkbox helpers include both a hidden input and a checkbox input. Since we wrap the checkbox label around those, you end up with two inputs inside a label, which it seems isn't kosher in HTML5.

One solution is to move the inputs outside the label, which has been requested at times anyway. There may be other solutions, this is a long term thing, but I'm keep to nail HTML5 support after we nail 1.0 and Rails3 support.

Owner

justinfrench commented May 7, 2010

Most "why do you do..." HTML questions can be answered with "because that's what the Rails helpers do".

Owner

justinfrench commented Oct 12, 2010

Actually, this isn't really Rails fault. Rails doesn't render the label, we do, and we're choosing to render it around the inputs. I'm working on a patch that renders the hidden input outside the label.

Owner

justinfrench commented Oct 12, 2010

See GH-264 branch http://github.com/justinfrench/formtastic/tree/GH-264, would love some peer review.

Owner

justinfrench commented Oct 13, 2010

Actually, that patch only addresses boolean inputs, so this is a separate issue for the checkboxes.

@sterrym sterrym pushed a commit to sterrym/formtastic that referenced this issue Apr 26, 2011

@justinfrench justinfrench bulking up coverage for check_boxes input to ensure no hidden inputs …
…are rendered inside the labels (ref GH-264)
c6ad17f

This issue was closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment