Closing HTML <input> tag issue

Question

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?

Basilica

There are a number of tags that do that (img pops to mind as well) but you can close them if you want. You can also "self-close" tags by throwing a slash before the closing bracket. i.e. <input type = "text" />. Also, some browsers will close tags for you (check your source code on IE vs FF). – Taipan

If you want your markup to be valid XML you need to close that tag. If you want it to be valid HTML you need to self close that tag. – Spacial

@Asad XML also contains self closing tags; <input type="text" /> is perfectly valid XML. – Rankle

@ShadowWizard I never said it doesn't. What I am saying is that the input tag doesn't need to be self closing to be valid XML, although it does need to be self closing to be valid HTML. – Spacial

@Asad Saeeduddin: There is no such thing as "self-closing tags" in HTML. An element either has a mandatory end tag, has an optional end tag, or cannot have any end tag. Void elements are the latter. (This question is several years old, but still.) – Lamelli

Answer 1

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 should 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>

Lamelli

Nice! And here is official reference though I couldn't find official reason as for why such elements exist. – Rankle

@Lamelli I trie what you said but still because of </input> tag The Label also is not able to show the text for radio button – Basilica

I don't really understand your question. document.createElement() creates elements, not tags. Even if it does somehow generate a closing </input> tag as you say it does, what does that have to do with a label? If you need to create a label, document.createElement('label') then add text to the label. – Lamelli

Yes I did the same and over all line came like this <input id="my_id" type="radio" name="radio_name"> <label for="my_id">Radio Label</label> </input> This shows a radio button with no text around it, but when I remove </input> It shows the 'Radio Label' label. – Basilica

@Quasarthespacething - Append the label element next to the input element, not inside it. – Kennard

@Kennard Thank you man. That was the thing I needed help with. Thank You. – Basilica

Hi Bolt, but how could we retrieve the label in your example by using the id from the 'input' which is 'my_id'? any idea? – Groove

@GMsoF $("#my_id ~ label") – Tusk

Re "cannot have ... a closing tag": But the W3 HTML validator does not complain about an end tag for input. – Neuropsychiatry

@Peter Mortensen: The validator emits "Stray end tag input." for every HTML doctype even when it is immediately preceded by a start tag of the same name. Are you sure you're not confusing the shortcut syntax (which is acceptable in HTML5, but doesn't actually mean the same thing as it does in XHTML) for an explicit end tag (which is not allowed, and produces that message with every version of HTML)? – Lamelli

Answer 2

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.

Strawberry

Can you provide a reference to the literal EMPTY (some formal syntax specification?)? – Neuropsychiatry

In the XML specification, the use of EMPTY in Document Type Definitions is described at the start of clause 3 and in clause 3,2, w3.org/TR/xml – Strawberry

Answer 3

<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.

Haversine

But createElement creates always closing tags... – Tanny

Answer 4

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.

Spacial

Answer 5

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>

Spaghetti

Answer 6

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.

Tatiania