Form elements appear outside the form

[Matscolan]

I render a form like this:\[code\]<form action='/search' method='get' style='display: none'> <input name='q' type='search' /> <input type='submit' value='http://stackoverflow.com/questions/14580497/Search' /></form>\[/code\]In the page source this piece appears like it is, but both Web Inspector and Firebug show it in the DOM tree like this:\[code\]<form action='/search' method='get' style='display: none'></form><input name='q' type='search' /><input type='submit' value='http://stackoverflow.com/questions/14580497/Search' />\[/code\]Hence, the inputs are visible despite the \[code\]display: none\[/code\] statement, and form submission doesn't work too.Why is it so, any ideas? The mystery is even deeper: this form is rendered on two pages of the site, and on the other page it appears just as expected.