[thelist] style.display = 'none' and form elements

Nelson Rodríguez-Peña Alarcón nelson at webstudio.cl
Tue Oct 7 13:19:16 CDT 2003

Hi Ben,

Ben Gustafson wrote:
> I'm trying to set up a form validation routine where certain form elements
> are removed from the page given user input. The way I am hiding the elements
> is by using the style.display property. My understanding of display is that
> display = 'none' should take the element out of the document flow and
> elements array entirely, as if it were not there at all. But a simple test
> seems to show that this is not the case:
 > [code removed]
> The inText element is still found in the checkIfHidden() loop, and it still
> gets put in the query string when the form is submitted. I have tested this
> in IE6 and NS7.1 Am I misunderstanding how display is used or what it does?

I don't think an element with display:none should be removed from the 
DOM. As you say, it's removed from the document flow, check this out:

- none:
This value causes an element to generate no boxes in the formatting 
structure (i.e., the element has no effect on layout).  Descendant 
elements do not generate any boxes either; this behavior cannot be
overridden by setting the 'display' property on the descendants.

Please note that a display of 'none' does not create an invisible
box; it creates no box at all. CSS includes mechanisms that enable an
element to generate boxes in the formatting structure that affect
formatting but are not visible themselves. Please consult the section
on visibility for details.

This is from CSS 2, but CSS 2.1 is exactly the same, as far as I can tell.

It is never stated that the element ceases from existing, otherwise you 
wouldn't be able to make it visible again. So, if the element still 
exists, it's reasonable to think it'll be submitted along with the form 
as any other value if it is 'successful'

When a form is submitted for processing, some controls have their name 
paired with their current value and these pairs are submitted with the 
form. Those controls for which name/value pairs are submitted are called 
successful controls.


A successful control is "valid" for submission. Every successful control 
has its control name paired with its current value as part of the 
submitted form data set. A successful control must be defined within a 
FORM element and must have a control name.

However, a different story is that of *disabled* form elements:

Controls that are disabled cannot be successful.

So in conclusion, a form element can be *invisible* but still be 
submitted as long as it is *not disabled*. This is a good starting 
point, isn't it? :)


Nelson Rodríguez-Peña A.
Diseño y Desarrollo Web y Multimedia

More information about the thelist mailing list