Rendering radio buttons

Question

How do I properly define radio buttons using Maquette so the text will render? If I use a  element the text appears, but on a new line.

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq"}),
      h("p", ["5 Hz"]),
      h("input", {type: "radio", value: "10", name: "freq"}),
      h("p", ["10 Hz"]),
      h("input", {type: "radio", value: "15", name: "freq"}),
      h("p", ["15 Hz"]),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

However, if I use a   element, the text doesn't appear.

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq"}),
      h("br", ["5 Hz"]),
      h("input", {type: "radio", value: "10", name: "freq"}),
      h("br", ["10 Hz"]),
      h("input", {type: "radio", value: "15", name: "freq"}),
      h("br", ["15 Hz"]),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

What am I doing wrong?

You know that `br` is an empty element (an element that cannot have text node), don't you? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br — Gerardo Furtado, Sep 17 '17 at 06:29
`
` tags are standalone, they don't render text. and `
` tags are `display: block` so they render on separate lines. Try using a `` tag or something. — Patrick Roberts, Sep 17 '17 at 06:29

score 3 · Accepted Answer · answered Sep 17 '17 at 08:31

The problem is with the   tag. Generally, it is used as an empty, self-closing tag (either   or  ). You can read more here, Permitted content - None, it is an empty element.

You can place the text in an inline element like a  or event better with <label>, using id on the input and for attribute on the label. Then, place an empty   after each row to separate the different radio buttons.

Here is the solution itself:

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq", id: "freq1"}),
      h("label", {innerHTML: "5 Hz", "for": "freq1"}),
      h("br"),
      h("input", {type: "radio", value: "10", name: "freq", id: "freq2"}),
      h("label", {innerHTML: "10 Hz", "for": "freq2"}),
      h("br"),
      h("input", {type: "radio", value: "15", name: "freq", id: "freq3"}),
      h("label", {innerHTML: "15 Hz", "for": "freq3"}),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

Rendering radio buttons

1 Answers1