在表单中使用表单？创建演示的方法答案

【问题标题】：Use form within a form? Ways to create a demo在表单中使用表单？创建演示的方法
【发布时间】：2015-07-29 16:10:17
【问题描述】：

我正在创建一个 wordpress 主题，并且在管理面板中我正在创建一个搜索框的实时预览。用户可以直接从管理面板设置搜索框的样式。这是一个非常基本的html代码：

<li class="epurus_nav_search">
<form class="search_form">
<input class=nav_search_input" type="search" name="s" placeholder="Search..."/>
<input type="button" class="nav_search_submit" value="Go"/>
</form>
</li>

现在我注意到，整个管理员现场演示本身已经是一个完整的表单字段，所以我不能使用上面的<form>（当表单在表单中时它会破坏网站）。我已经用<span> 替换了表单标签，但是它通常给出与表单标签不同的 css 结果。我看到演示和网站前端之间存在各种不同的行为。填充、边距和行高都完全关闭，即使我已将它们全部设置为 0 或其他值。

我是否可以在表单中使用表单，或者是否有另一个标签接近<form>？我对任何标签都持开放态度，例如 span、div 甚至 javascript 解决方案。我不能做的一件事是将 HTML 块移到管理表单之外。

【问题讨论】：

Embed an HTML <form> within a larger <form>?的可能重复
嗯，我的问题不仅与表单中的表单有关，因为我正在寻找替代的 html 标记，甚至是 javascript 解决方案。
但是你为什么要寻找替代的 html 标签呢？这要么是一种形式，要么不是。老实说，看起来你所苦苦挣扎的只是造型。您的主要抱怨似乎没有模仿表单的外观。没有你的造型，我们真的无能为力。不过，要回答最初的问题，不。表单中不能有表单。

标签： html css forms

【解决方案1】：

您不能在另一个元素中插入form 元素，因为它将提交父元素而不是子元素。它也可能有冲突的字段。

form 是一个块元素，因此它更类似于div 而不是span。我会用它开始。从这一点开始，我将使用像<div class="form"> 这样的类并开始对其进行样式设置以伪造相同的form 行为。最简单的方法是首先分析处理后的表单 CSS（通过开发人员工具），然后复制/粘贴仅影响 forms 的表单（即不影响 body 继承等）。

最终你会阻止默认提交按钮的事件并以另一种方式提交表单（也许是 ajax？）。

【讨论】：

【解决方案2】：

尝试使用<span> 和display: block; 这应该可以。

编辑：

我有一个脑电波。将div放入表单中，并将所有样式设置为inherit

【讨论】：

你好，我已经这样做了，它在一定程度上起作用。不幸的是，我看到演示和网站前端之间存在各种不同的行为。填充、边距和行高都完全关闭，即使我已将它们全部设置为 0。
好吧，正如我所说，我已经这样做了，但它给出了完全不同的行为。使用表单创建的搜索栏与使用 div 的搜索栏完全不同。很可能是因为 css 对这些元素有不同的默认值。