Form is not appearing but its content does

Question

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.

what do you mean "the profile form doesn't appear but the button does"? A form element is merely a container, like a div, and if it has no CSS attached to it, it won't show on the page. If you want to make it visible, attach a border or background with CSS to the form element — Matanya, Dec 08 '12 at 11:29
You need to demonstrate this problem, because there's no obvious problem with your posted html. — David Thomas, Dec 08 '12 at 11:30
well, it's weird [link](http://jsfiddle.net/33G5N/), here it works fine but when i run my website and check the developer console, profileBtn is not surrounded by any form @Matanya i meant in the developer console. — Noam Gal, Dec 08 '12 at 11:52
if it IS showing when you view source as received from the server, but not showing in the console, it might be due to a JS script removing it after page load — Matanya, Dec 08 '12 at 12:28

score 46 · Accepted Answer · edited Feb 03 '16 at 08:13

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>

Thank you for this! I've been scratching my head for days wondering why my form wouldn't submit and why sometimes it wouldn't even display the

fields in chrome, throwing an empty
at the top of the page fixed it, weird, all open tags were closed and was in there, but at any rate, you saved my sanity! — Sam, Aug 14 '21 at 16:30

score 10 · Answer 2 · answered Dec 10 '12 at 13:17

10

well then somehow there was a weird problem with the forms, the button didn't show up because when i ran the website the the 'profileForm' just disappeared somehow (and didn't show up in the console). what i did was adding a third Form before 'profileForm' which somehow solved this.

answered Dec 10 '12 at 13:17

Noam Gal

1,114
2
11
20

This happened to me too, for no adequately explained reason and this "fix" worked. I was heavily using pyramid and mako templates in addition to css/javascript. Ugh. Perhaps it's a bug in the browser? – NuclearPeon Sep 29 '15 at 01:48
THat is really weird. That was my solution as well. Worked like a charm... don't know why. – foxtangocharlie Feb 21 '17 at 21:17

score 9 · Answer 3 · answered Jul 28 '19 at 06:40

Just put a empty form on top of your form. Then all forms will be appear with form id

<form></form>

<form name='profileForm' id='profileForm' action='' method='get'>
      <input type='submit' name='ProfileBtn' id='ProfileBtn' class='buttonC' value='My Profile' />
</form>

<form name='logoutForm' id='logoutForm' action='' method='get'>
      <input type='submit' name='LogOutBtn' id='LogOutBtn' class='buttonC' value='Logout' />
</form>

captain_a · Answer 4 · 2018-04-18T10:17:20.003

8

There is an unclosed HTML TAG like < form > in your code before these lines ,

Find and close that form

OR

just put </form> before your code.

edited Apr 18 '18 at 10:17

answered Aug 16 '16 at 09:30

captain_a

3,328
1
14
23

score 1 · Answer 5 · answered Jun 17 '15 at 09:19

1

Check that you don't an unclosed form element before your next form open.

If you do, browsers will generate the source without displaying the subsequent form open and form close pair.

answered Jun 17 '15 at 09:19

Crackermann

65
1
5

score 0 · Answer 6 · answered Mar 09 '22 at 07:40

0

Try viewing your Page Source

For Mac users Option + Command + U

For Windows users Ctrl + U

Then check for any unclosed <form> tag above your specified <form> tag and close it.

It works for me, hope it works for you too

answered Mar 09 '22 at 07:40

Donn Frederick

36
3

Form is not appearing but its content does

6 Answers6