CODEWITHSUNDEEP
htmlforms
buydadip
buydadip

Reputation: 9417

HTML-Input tag syntax

I feel like this might have already been answered on SO, but I couldn't find a similar question. I've been told by some more experienced programmers that the following is incorrect syntax :

<input type=...> Name </input>

and that the following is correct syntax :

<input type=..../>

I've never known about this, I've always used the first snippet and have never encountered any problems that I know of. Could someone explain why the first is incorrect, and why it still works? Is it rescued by the browser, or is it just a style issue? Any explanation concerning the syntax above is acceptable, as I don't want to risk looking like a noob the next time I'm asked to write html code.

Upvotes: 1

Views: 208

Answers (4)

Guffa
Guffa

Reputation: 700342

The HTML specification about the input element says this:

Content model:
- Empty.

and:

Tag omission in text/html:
- No end tag

That means that the element doesn't have any content and doesn't have any ending tag.

In HTML you write the tag like this:

<input type= ... >

In XHTML the tag follows XML standard, so a tag without content is self closed:

<input type= ... />

In HTML5 either way of writing it is valid.

The reason that the code still works is that browsers try to make the best of invalid code. The extra </input> tag doesn't stop anything from working, the browsers will just ignore it. Either the browser doesn't understand what it is supposed to be, or the browser vendor anticipated that specific error and the browser knows to ignore it.

Upvotes: 1

Tushar Gupta
Tushar Gupta

Reputation: 15923

Input tags are basically known as void elements i.e they aren't designed to contain text or other elements, and as such do not need a closing tag.

Realistically, the validity would depend on which doctype you declare. In this context, /> is valid with HTML 5 and XHTML doctypes and invalid with HTML 4.01 doctypes.

Upvotes: 2

GolezTrol
GolezTrol

Reputation: 116110

Browsers are quite forgiving, but your friend is right and the syntax is wrong. Input elements should not have content. There are plenty of resources about this, one of them is w3schools which says:

Note: The <input> element is empty, it contains attributes only.

Tip: Use the <label> element to define labels for elements.

You can also find a validator online which will validate your page and report any issues to you: W3 validator. It's well worth the effort to validate a page before publishing it. Even though browsers are forgiving and will try to display a page as good as possible, errors like yours make a page invalid and increase the risk that a page is rendered incorrectly or -theoretically- not at all.

In this particular case, a browser might choose to display the text before or after the input, inside the input (not likely), or not at all. By making an HTML document valid, you decrease the risk of a bad surprise.

Upvotes: 1

Quentin
Quentin

Reputation: 943564

Could someone explain why the first is incorrect

An input element is not allowed to have child nodes, everything about the input is described by its attributes. To associate a label with an input, use a <label> element.

and why it still works?

Browsers are designed to cope with bad input. They ignore end tags for elements that are not open.

Upvotes: 6

Related Questions