1

I wanted to use a button tag inside a label for a radio-type input; it seemed silly to me to redesign the radio input to look like a button when we already have a perfectly suitable tag for it.

However, it doesn't work. If you click anywhere else in the label, the radio input for that label will become checked. When you click on the button whatever was checked beforehand will remain checked.

Naturally I went to W3 validator to see if this was valid HTML. It seems that it is in HTML 4, but not 5. Yet when I look at the docs for label nothing states anything has changed. The error thrown in the validator states the following:

The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant

What's confusing to me is that Chrome still shows the radio input click graphic but doesn't actually check it. It seems hard-coded to fail...

My question is, how can I get a button to check a radio input inside a label without using JavaScript?

label{
  display:block;
  border:1px solid rgba(0,0,0,.2);
  margin:.5rem;
  padding:.4rem;
}
<label>
  <input type="radio" name="test"/>
  <button>Button</button>
</label>

<label>
  <input type="radio" name="test"/>
  <input type="checkbox"/>
  <input type="button" value="Button"/>
  <p>Test text</p>
  <button>Button</button>
</label>

I also came across this answer which references HTML5 form's label spec which states

If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.

So I thought I could play around with the id and for attribute, but to no luck. Thoughts?

label{
  display:block;
  border:1px solid rgba(0,0,0,.2);
  margin:.5rem;
  padding:.4rem;
}
<label>
  <input type="radio" name="test"/>
  <button>Button</button>
</label>

<label>
  <input type="radio" name="test" id="penultimate"/>
  <input type="button" for="penultimate" value="Button"/>
</label>

<input type="radio" name="test" id="last"/>
<input type="button" for="last" value="Button"/>
jaunt
  • 4,978
  • 4
  • 33
  • 54
  • I'm not sure if the validator would complain about this, but HTML5 does not use self closing tags (at lease for inputs, you shouldn't use self closing tags). Remove your forward slashes for self closing tags. https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5 – adprocas Mar 05 '18 at 21:08
  • It seems I have been misinformed about the self closing tags. I was told that they are not valid in HTML5. The question I linked to above goes into a bit more detail. I'd be curious what the validator does with those. – adprocas Mar 05 '18 at 21:14
  • 1
    The spec says the `label` can contain: "Phrasing content, but with no descendant labelable elements unless it is the element's labeled control, and no descendant label elements." If you click on "labelable elements", it shows those as "button input (if the type attribute is not in the Hidden state) meter output progress select textarea"... – Heretic Monkey Mar 05 '18 at 21:18

0 Answers0