Closing HTML <input> tag issue

Why don't the HTML <input> tags get a closing tag like other HTML tags and what would go wrong if we do close the input tag?

I tried to Google and I found the standard to write a input tag like this <input type="text" name="name"> not closing it with a </input>.

I personally felt the problem when I created an input tag for Radio buttons using

var DOM_tag = document.createElement("input");

This though created a radio button, but the TextNode I appended to the radio button with

document.createTextNode("Radio Label");

does not work. It simply shows the radio button with no Radio Label as in this case.

Though I can see the complete code:

<input id="my_id" type="radio" name="radio_name">Radio Label</input>

What is explanation?

P.S.

The main problem that occurred to me is the automatically closing of input tag as I mentioned in the question as I am using var DOM_tag = document.createElement("input"); which automatically creates a closing tag. What should I do about that?

These are void elements. This means they aren't designed to contain text or other elements, and as such do not need — and in fact, cannot have — a closing tag in HTML.¹

However, they can have a <label> associated with them:

<input id="my_id" type="radio" name="radio_name">
<label for="my_id">Radio Label</label>

Radio buttons by nature can't contain text anyway, so it wouldn't make sense for them to accept text or other elements as content. Another issue with a control that does accept text as input: should its textual content then be its value, or its label? To avoid ambiguity we have a <label> element that does exactly what it says on the tin, and we have a value attribute for denoting an input control's value.

---

¹ _{XHTML is different; by XML rules, every tag must be opened and closed; this is done with the shortcut syntax instead of a </input> tag, although the latter is equally acceptable:}

<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>

The origin is in the empty element concept in SGML, and the idea was that some elements act as placeholders for content that will be inserted from an external source or by the environment.

This is why img and input, for example, were declared as empty in HTML, or, more exactly, as having EMPTY declared content (i.e., no content is possible, as the opposite to elements that just casually has empty content). For a longer explanation, see my page Empty elements in SGML, HTML, XML, and XHTML.

The implication is that the start tag for such an element acts as the closing tag, too. Software that processes SGML or HTML documents is expected to know from the Document Type Definition (DTD) which tags have this property. In practice, such information is built-in in web browsers. Using an end tag like </input> is invalid, but browsers just skip unrecognized or spurious end tag.

In XML, hence in XHTML, things are different, because XML is a strongly simplified variant of SGML, intended to be processed simplistically. Software that processes XML must be able to do all the parsing without any DTD, so XML requires closing tags for all elements, though you can (and, for compatibility, mostly should) use special syntax like <input /> as shorthand for <input></input>. But XHTML still allows no content between the tags.

So you cannot specify the label for an input element inside the element itself, as it cannot have any content. You can use the title, value, or (in HTML5) placeholder attributes to associate texts with it, in different senses, but to have normal visible content as a label, it needs to be in a different element. As described in other answers, it is advisable to put it in a label element and define the association with id and for attributes.

<input> is an empty tag, in that it's not designed to have any content or a closing tag. For compliance, you can signify the end of the tag by using it like this:

<input type="text" value="blah" />

which is the XHTML compliant way to close a tag which has no content. The same goes for the <img> tag.

To label a radio button, you're probably best off using the <label> tag as BoltClock's answer describes.

You can use

var label = document.createTextNode("Radio Label");
DOM_tag.parentElement.insertBefore(label,DOM_tag);

to put the label next to the radio button.

Using the createElement/createTextNode combination works best.

$('#list-consultant').append(
    $(document.createElement('div')).addClass('checkbox').append(
        $(document.createElement('label')).append(
            $(document.createElement('input')).prop({
                type: 'checkbox',
                checked: 'checked'
            }),
            $(document.createTextNode('Ron Jeremy'))
        )
    )
);

The above snippet will produce:

<div id='list-consultant'>
    <div class='checkbox'>
        <label><input type='checkbox' checked='checked'/>Ron Jeremy</label>
    </div>
</div>

You can try:

var label = document.createTextNode("Radio Label");
document.createElement("input").prop({type="text"});
document.write(input.append(label));

might work, might not. (It didn't work for me, but I can't figure out why not... I thought it would.) If that helps, great. (I'm still learning JavaScript.)

Otherwise, stick with the standard answer of using:

<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>

That is what I normally would do.