表单不显示，但其内容出现了。

Question

表单不显示，但其内容出现了。

24

我有这段代码：

<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>

当我渲染上述内容时，“profileForm”不会出现（尽管“profileBtn”会出现）。第二个表单没有问题，这很奇怪，因为它们都很相似。

这可能是一个简单的问题，但是我不知道问题出在哪里。

- Noam Gal

你的意思是“个人资料表单没有出现，但按钮出现了”？表单元素只是一个容器，就像 div 一样，如果它没有附加任何 CSS 样式，它就不会显示在页面上。如果你想让它可见，请使用 CSS 给表单元素附加边框或背景。 - Matanya

你需要演示这个问题，因为你发布的HTML没有明显的问题。 - David Thomas

嗯，很奇怪，在这里它运行良好[链接]（http://jsfiddle.net/33G5N/），但是当我运行我的网站并检查开发人员控制台时，profileBtn没有被任何表单框包围。 @Matanya 我的意思是在开发人员控制台中。 - Noam Gal

@DavidThomas...有人在吗？ - Noam Gal

如果在查看从服务器接收到的源代码时显示，但在控制台中未显示，则可能是由于JS脚本在页面加载后将其删除。 - Matanya

6个回答

10

那么，某种方式表单出现了奇怪的问题，因为当我运行网站时，“profileForm”不知何故消失了（并且在控制台中没有显示），所以按钮没有显示出来。我所做的是在“profileForm”之前添加了第三个表单，这样问题就得到了解决。

- Noam Gal

这也发生在我身上，原因没有得到充分解释，但这个“修复”起了作用。除了CSS/JavaScript之外，我还大量使用金字塔和Mako模板。或许这是浏览器的一个漏洞？ - NuclearPeon

那真的很奇怪。那也是我的解决方案。像魔法一样有效...不知道为什么。 - foxtangocharlie

9

只需在您的表单之上放置一个空表单。然后所有表单都将显示带有表单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>

- Rajiv Sharma

8

您的代码中存在未关闭的HTML标签，比如在这些行之前有一个 <form> 标签。

Find and close that form

或者

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

- captain_a

1

检查您在下一个表单开放之前是否有未关闭的表单元素。

如果有，浏览器将生成源代码但不显示后续的表单开放和表单关闭配对。

- Crackermann

0

尝试查看您的页面源代码

对于Mac用户 Option + Command + U

对于Windows用户 Ctrl + U

然后检查您指定的<form>标签上方是否有任何未关闭的<form>标签，并将其关闭。

这对我有效，希望对您也有效。

- Donn Frederick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Stalcup · Accepted Answer

这刚刚发生在我使用Chrome时 - 因为我在表单（form）中又嵌套了一个表单。看起来Chrome将<form>标签忽略掉了，因为我的表单在另一个表单内。当我将其中一个表单移到另一个表单的外面时，两个<form>标签都按预期呈现在html中。Crackermann在他的回答中也提到了这一点。很难直接给出解决方案而不看到您的全部html，但是我猜这可能是您的问题 - 您需要确保您的表单不在另一个表单内。以下是一个简单的例子来说明这一点：

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>

如果您将form2移出form1运行该代码，并在Chrome中检查，那么<form id="form2">就会被渲染出来：

<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>