First form of nested form tags not responding to css display:none

First form of nested form tags not responding to css display:none

I have nested form tags like this
<form>
<h5>Main Form</h5>
<input type="text" />
<!-- Don't Show This Form -->
<form style="display:none">
<input type="text" />
<input type="text" />
</form>
<!-- Don't Show This Form -->
<form style="display:none">
<input type="text" />
<input type="text" />
</form>
</form>
The problem is the first form displaying although It's display none css
inline
See the code in action http://jsfiddle.net/fZMKB/
I know I know, nested forms is against the rules But I have to use it this
way for this reason
I need to reset bunch of inputs and form elements before jQuery event and
I'm using this code
$('form').get(0).reset();
From this my earlier question How to reset forms elements
(input,select,textarea,etc.) on events using jQuery
So the only reason I use form tag is I need to reset inputs and textarea,
etc..