Form is not appearing but its content does

StackOverflow https://stackoverflow.com/questions/13776986

  •  05-12-2021
  •  | 
  •  

Frage

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.

War es hilfreich?

Lösung 2

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.

Andere Tipps

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>

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.

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>

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.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top