Input tag cross-browser compatibility

I hope I’ve picked the correct forum for this. Sorry if I’ve guessed wrong.

It is apparently a correct interpretation of the XHTML 1.0 standard (using STRICT validation) that the input tag can be used outside of a form (<form>) tag – at least according to the W3C validator folks. For example:
<div id=’playingBoard’>
<input type=”button” class=”square sqButton” />
. . .
My question specifically centers around the use of a button input tag (e.g., <input type=”button” . . . />) where the intent is that no information is to be sent to a server. Javascript sets up the “onclick” attribute, and control stays local on the client (thus there’s really no use for a form tag and its “action” attribute.) The CSS class definitions define each input tag as a square and floats it left to fill its container (the playingBoard.)
The above code snippet validates with the W3C HTML validator, and Firefox 3.6.x seems to handle the code as I had expected/hoped, as does IE 8.0.x. However, with IE 6.0.2900 it seems necessary that the <input> tags be enclosed within a <form> tag in order to correctly process the code, even with a DOCTYPE specifying xhtml 1.0 STRICT; as in, for example:
<div id=’playingBoard’>
<form action=”…”…?
<input type=”button” class=”square sqButton” />
. . .
My question is this: Is this just a problem with IE6’s handling of an input tag without an enclosing form tag, or is the problem being caused by IE6’s handling of some other (style/CSS) property such as float, position, or whatever? Anybody got any ideas?

Thanks in advance for your help.

The validator can’t detect everything that is invalid.

In the case of an <input> tag it is required to be inside a block level tag such as <fieldset> or <div> which in turn must be inside a <form> tag for the input to be valid. It is because of the two levels of nesting that are required that the validator can’t tell if you got it right since not all <div> tags need to be inside a form.

Obviously the INPUT is most useful within a FORM and that where it is “supposed” to be found representing a ‘form control’ - as previously mentioned.

Although HTML 4.0 allows INPUT in nearly any block-level (permitted within the BODY) or inline element [other than BUTTON (like XHTML 1.0)] if I remember correctly.

That is why you didn’t have an error flagged. In contrast with [HTML 3.2] INPUT, SELECT and TEXTAREA are only allowed within FORM elements thus it differs slightly.

Though the bottom-line is they are supposed to be contained within a FORM at some level.

Not just supposed to be but REQUIRED to be inside a form in HTML 4. They are not allowed to be directly nested in the form tag though the way they could be in HTML 3.2. There MUST be a block level element in between.

Since the validator can’t check the relationship between three tags at once it is not able to check that you have one of the following but just because the validator doesn’t give an error if one of the following structures doesn’t exist doesn’t mean your page is valid.


If you don’t have one of the above (you can have other tags in between) then your input tag is invalid in HTML 4.

In HTML 3.2 the following is also valid



Sounds like you are building a user interface, so there you go. But be aware you are seriously depending on the user having Javascript, and since you are checking IE6, it doesn’t sound like this is on an intranet. So, know you are making something that will lock out some people (like me).

User interfaces (which rely on J(ava)Script to function) are only really suitable for intranets where you can ensure that the appropriate browser language is enabled.

For all internet use you should have a form so that the input field(s) can be submitted to the server for processing for those people who do not have JavaScript.

If you are going to build a user interface for the internet then it should be built in JavaScript and not in HTML so that those without JavaScript are not shown non-functional input fields.