表格没有出现,但其内容确实如此

Noa*_*Gal 15 html forms appearance

我有这段代码:

<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>
Run Code Online (Sandbox Code Playgroud)

当我渲染上面时,"profileForm"没有出现(尽管profileBtn出现了).这种形式没有问题,这很奇怪,因为它们都很相似.

这可能是一个简单的问题,但我不知道问题是什么.

小智 28

这恰好发生在我身上使用Chrome - 因为我在表单中有一个表单.看起来Chrome只是剥离了<form>打开和关闭标签,因为我的表单是另一种形式.当我将一个表单移到另一个表单之外时,两个<form>标签都按照预期在html中呈现.
克拉克曼也在他的回答中得到了这个.

如果没有看到你的完整HTML,很难给出一个直接的解决方案,但我猜这是你的问题 - 你需要确保你的表单不在另一种形式.非常简单的例子来说明这一点:

在另一个表单中填写表单,请注意如果您在Chrome中运行此代码并检查<form id ="form2">是否未呈现:

<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>
Run Code Online (Sandbox Code Playgroud)

如果移动Form1的外部窗口2,运行在浏览器的代码,并检查,然后<表格ID ="窗口2"> 呈现:

<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>
Run Code Online (Sandbox Code Playgroud)


Noa*_*Gal 8

然后不知何故,表格有一个奇怪的问题,按钮没有显示,因为当我运行网站时,'profileForm'以某种方式消失了(并没有出现在控制台中).我所做的是在'profileForm'之前添加第三个Form,它以某种方式解决了这个问题.


cap*_*n_a 7

在这些行之前,您的代码中有一个未关闭的 HTML 标记,例如 <form>,

Find and close that form
Run Code Online (Sandbox Code Playgroud)

或者

放在</form>你的代码之前。


Raj*_*rma 6

只需在表格顶部放一个空表格。然后所有表单都将显示表单 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>
Run Code Online (Sandbox Code Playgroud)