Input Tags In Forms Not Valid XHTML

(I’m stuck at Sky Harbor in Phoenix because of a delayed flight, but they have free wireless access, so I might as well make a blog post while I’m here. ๐Ÿ˜‰

Did you know the following is not valid XHTML?

<form action="index.php">
    <input type="hidden" name="foo" value="bar" />

It appears that an input tag is not allowed to appear directly within a form tag. See detailed information here and note that <input> is not a valid child element of <form>. To be valid XHTML, the input tag must be wrapped by another block-level element, such as <p> or <fieldset>.

I can safely say I have always done this the wrong way. ๐Ÿ˜‰ For example, the Solar_View_Helper_Form class puts all hidden fields at the top of the form, and all other fields in a <dl>…</dl> block. As a result, the hidden fields cause the page to be invalid (but the others are valid because they are wrapped properly).

Solution? Wrap the hidden fields in a <fieldset style=”display: none”>…</fieldset> tag. Now the page validates, and the hidden fieldset doesn’t alter the page layout at all. This change has been committed and will be available in the next release of Solar.

(UPDATE: Fixed the link to the XHTML spec; thanks, David Rodger.)

Are you stuck with a legacy PHP application? You should buy my book because it gives you a step-by-step guide to improving your codebase, all while keeping it running the whole time.
Share This!Share on Google+Share on FacebookTweet about this on TwitterShare on RedditShare on LinkedIn

13 thoughts on “Input Tags In Forms Not Valid XHTML

  1. your hard work aside, this is just a general observation..

    to be honest, i don’t see what the benefit of validating to xhtml strict is, ive created (for reals) a few hundred websites, the vast majority of them xthml 1.0 transitional, with many of the html 4.0.

    the fact that you would have to wrap unseen tags with a block level element I think is a waste of time. im not sure how that really affects anybody, maybe other than screen readers, im not sure it really increases browser load time or anything like that. and since a fieldset by default renders with a border in almost every browser, the fact that you would have to use display:none on it means that there is something wrong with either the spec or the implementation. it wouldn’t be the first time that a spec has hindered practicality, ie; float?

    take meyerweb [dot] com for example. eric meyer is a pretty well known author on css and html, and would be the first to really make a fit about something. He uses html 4.0 loose doctype on his pages. he has a write up about it on his site someplace that explains his decision on it, sorry I can’t find the link at the moment, but its a good read.

    really i think the most important part of a web page is right at the very top. the doctype. without one, good luck getting things to render with any sort of consistency.

  2. I believe this is not something new for XHTML, it also goes for HTML 4.01 Strict.

  3. Strict is useful: it indentifies more errors in your markup. Browsers are a poor way to find broken markup.

    The catch is that some validation errors are kind of annoying, at least to those of us who need/ have to use non-valid markup sometimes. There are ways around that, but it’s not a big hassle, so I use “strict” and live with it.

  4. Actually, I think you need a legend element under fieldset if you want your page to be valid.

  5. I use Strict XHTML in my doctype, as I feel it renders more accurately in all browsers. Coupled with Yahoo’s reset CSS, it makes my job much easier when it comes time to QA. As for input tags not validating inside of a form tag, a sound reason I can think of for that is you may not always use input tags within a form. If I want to place a button on my site, I will use input type=button and use CSS to style it. Works for me, and keeps it accessible if the CSS or images are not loaded.

  6. Yeah, that’s right. We need to put the input type=hidden block in a like below… to make the code xHtml validate.

    <input type=”hidden” name=”ip” value=”” />
    <input type=”hidden” name=”httpref” value=”” />

  7. Unfortunately to validate as xhtml strict the input must actually be inside a fieldset tag.

    To validated AAA it the fieldset must have a legend tag, and all un hidden inputs should have labels.

Leave a Reply

Your email address will not be published. Required fields are marked *