Form is not appearing but its content does
I have this piece of code:
<div>
<form name='profileForm' id='profileForm' action='' method='get'>
<input type='submit' name='ProfileBtn' id='ProfileBtn' class='buttonC' value='My Profile' />
</form>
<br />
<form name='logoutForm' id='logoutForm' action='' method='get'>
<input type='submit' name='LogOutBtn' id='LogOutBtn' class='buttonC' value='Logout' />
</form>
</div>
When I render the above the "profileForm" does not appear (although the profileBtn DOES appear). the seconed form has no problems, which is weird because they are both similar.
It's probably an easy question but I have no idea what's the problem.
Answer
This just happened to me using Chrome -- it was because I had a form within a form. It looks like Chrome just stripped out the <form> open and close tag because my form was within another form. When I moved one form outside of the other, then both <form> tags were rendered in the html as intended.
Crackermann was getting at this in his answer too.
It's hard to give a direct solution without seeing your full html, but I'm guessing this is your problem - you need to make sure your form is not within another form. Really simple example to illustrate this:
Form within another form, notice if you run this code in Chrome and inspect <form id="form2"> is not rendered:
<html>
<head></head>
<body>
<form id="form1">
<div>form within a form</div>
<form id="form2">
<input type="text" placeholder="name" /><br/>
<input type="text" placeholder="title" />
</form>
</form>
</body>
</html>If you move form2 outside of form1, run the code in Chrome and inspect, then <form id="form2"> is rendered:
<html>
<head></head>
<body>
<form id="form1">
<div>form2 moved outside of form1</div>
</form>
<form id="form2">
<input type="text" placeholder="name" /><br/>
<input type="text" placeholder="title" />
</form>
</body>
</html>