Form Fields Without Form Tags

The HTML 4.01 standard allows for one situation where a form field such as input is allowed to be included in your HTML without its being nested inside a form tag. In all circumstances except where this particular exception criteria is met your form fields such as input, button, textarea, and select all need to be nested inside a block level tag such as a div or fieldset which in turn needs to be nested inside the form tag. Note that none of the HTML validators will produce an error if you do not apply the required nesting since none of them actually test for any of the standards that involve tag nesting more than one level deep. This is a flaw in the validators where just because the page passed validation doesn't necessarily mean that it is actually valid.

The sole exception is where the form field has JavaScript processing attached directly to the field itself that will perform all of the processing that you intend to have performed in connection with that stand alone field.

This does not mean that you can include such a tag in the HTML code of your page though because that is not permitted by the accessibility standards. In order for your page to meet accessibility requirements the page needs to be usable even where JavaScript is disabled.

Including a form field such as input within your web page without nesting it inside a form tag means that for those visitors who do not have JavaScript available you are presenting them with a broken web page. The only way that you can make your input field work without JavaScript is to include it in a form that also has a submit button and to specify the server side processing to be called via the action attribute of the form tag.

That leaves us asking why the HTML standard allows that exception where the accessibility standard does not. The answer to this relates to the fact that not all of the HTML in your page necessarily needs to be hard coded in the source of your page in the first place. You can also add HTML into your web page using JavaScript and the resultant HTML after being updated via JavaScript also needs to meet the HTML standards (even though it is not possible to actually test that HTML via any validator since the HTML is being dynamically created).

It is possible to add a field such as input into the HTML of our page using JavaScript and to have further JavaScript attached to that field that will process what is entered into the field without requiring a form tag. This meets the criteria of the HTML standard because the standard has that exception for form fields that are processed via JavaScript and it also satisfies the accessibility standard in that there is no non-functional form field displayed in the page since unless the original JavaScript runs the field isn't added to the web page.

Of course doing this does mean that the page still provides different functionality when JavaScript is enabled to what it provides when JavaScript isn't available. Whether this is actually an appropriate thing to do then depends on just exactly what the JavaScript attached to your form field is doing and what alternative way (perhaps via several different pages) that your site provides to allow those without JavaScript to produce the same end result.

In most situations the easiest way to produce the same result when JavaScript is disabled is to have a proper form with a submit button and simply hide the submit button from JavaScript in order to have the JavaScript attached to the input (or whatever) perform the processing directly. This will usually result in less code overall and will also make the path that those without JavaScript follow as similar as possible to the path that those with JavaScript follow.

We can therefore say that while the standards actually allow for a form field to not be nested inside a form under certain specific circumstances that there are almost no circumstances where it would be appropriate to do so.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow