在表格中使用表格？如何创建演示

Question

我正在创建一个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块移到管理表单之外。

Answer 1

尝试将<span>与display: block;一起使用 这应该有用。

编辑：

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

Answer 2

您不能在其中一个元素中插入form元素，因为它会提交父元素而不是子元素。它也可能有冲突的领域。

form是一个块元素，因此它与div比span更相似。我会用它来开始。从这一点开始，我将使用类似<div class="form">的类，并开始设计它以伪造相同的form行为。最简单的方法是首先分析处理后的表单CSS（通过开发人员工具），然后复制/粘贴仅影响form的那些（即不body遗传等）。

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