Closing an HTML tag

Question

I wonder why the HTML <input> do not get the closing tag, like other HTML tags, and what will happen if we close the input tag?

I tried Google and I found a standard for writing an input tag such as <input type="text" name="name"> without closing it with </input> .

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

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

This switch created, but TextNode I added to the switch with

 document.createTextNode("Radio Label"); 

does not work. It just shows a switch without a Radio Label , as in this case. Although I see the full code

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

Can someone explain please?

PS: The main problem that arose for me was the automatic closing of the input tag, as I mentioned in the question, since I use var DOM_tag = document.createElement("input"); which automatically creates a closing tag. what should i do with this?

Answer 1

These are invalid items. This means that they are not intended to accommodate text or other elements and, as such, do not require a closing tag.

However, they may have an associated <label> :

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

Radio receivers, by their nature, cannot contain text in any case, so it makes no sense for them to accept text or other elements as content. Another problem with a control that accepts text as input: should its text content be its value or its label? To avoid ambiguity, we have a <label> element that does exactly what it says on tin, and we have a value attribute to indicate the value of the input control.

Note that HTML does not require explicitly closing the void element tag. In fact, closing tags, such as </input> , are explicitly forbidden in HTML. XHTML is different; according to XML rules, each tag must be open and closed; this is done with the shortcut syntax instead of the </input> :

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

Answer 2

The origin is in the concept of empty elements in SGML, and the idea was that some elements act as content placeholders that will be inserted from an external source or from the environment. This is why img and input , for example, were declared empty in HTML or, more precisely, with declared EMPTY content (i.e. Without content, as opposed to elements that simply accidentally have empty content). For a more detailed explanation, see My page Empty Elements in SGML, HTML, XML, and XHTML .

The implication is that the start tag for such an element is also a closing tag. It is expected that software that processes SGML or HMTL documents will know from the document type definition (DTD) that those tags have this property. In practice, such information is embedded in web browsers. Using an end tag such as </input> is incorrect, but browsers simply skip an unrecognized or false end tag.

In XML, therefore, in XHTML, everything is different, because XML is a very simplified version of SGML, designed to simplify processing. XML processing software should be able to do all the parsing without any DTD, so XML requires closing tags for all elements, although you can (and, for compatibility, in most cases) use special syntax like <input /> as a shorthand for <input></input> , but XHTML still does not support content between tags.

Thus, you cannot specify a label for the input element inside the element itself, since 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 in order to have normal visible content as a label, it must be in another element. As described in other answers, it is recommended that you put it in the label element and define the relationship with the id and for attributes.

Answer 3

<input> is an empty tag because it is not intended to create any content or end tag. For compliance, you can mark the end of a tag using it as follows:

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

which is an XHTML-compatible way to close a tag that has no content. The same applies to the <img> .

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

Answer 4

you can use

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

to place a label next to the switch.

Answer 5

It is better to use a combination of createElement / createTextNode.

 $('#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 display:

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

Answer 6

You can try:

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

may work, maybe not. (This did not work for me, but I can’t understand WHY not .. I thought it would be so.) If that helps, fine. (I'm still learning Javascript.)

Otherwise, stick to the standard usage response:

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

This is what I usually did. Hurrah!