时间戳

首页 > 解决方案 > 无法从嵌入的 html 获取表单

html - 无法从嵌入的 html 获取表单

问题描述

我在 GoLang & Buffalo 有一个带有后端的搜索引擎，我是网络编程的新手，我确信这是一个愚蠢的问题。我有一个带有搜索栏的导航栏，以及正文中的另一个搜索栏。导航栏是嵌入的 html（毛绒部分）。

的search.html表单完美无缺，但导航栏的提交按钮没有做任何事情。

有以下代码：

<!-- search.plush.html -->
<html>
<body>
    <div>
        <%= partial("header.html") %>
    </div>
    ...
        <div>
            <form action="/results" method="GET">
                <input id="text" for="mainsearch" inputmode="latin" placeholder="Search words or phrases">
                    <div  role="group">
                        <button name="type" value="word" type="submit">Word Search</button>
                        <button name="type" value="phrase" type="submit">Phrase Search</button>
                    </div>
            </form>
        </div>
    ...
</body>
</html>

和

<!-- _header.plush.html -->
<div>
    <form action="/results" method="GET">
        <input id="text" for="mainsearch" inputmode="latin" placeholder="Search words and phrases">
            <div  role="group">
                <button name="type" value="general" type="submit">
                    <i class="ion-search"></i>
                </button>
             </div>
    </form>
</div>

我嵌入_header.html了所有其他html，它在任何地方都不起作用。我认为这更多的是 html 的问题而不是毛绒的问题，但我找不到有关此的信息..

编辑：我发现在 Chrome 上使用开发者控制台，<form>在</form>被_header.plush.html渲染后就消失了。

标签： htmlformsbuffalo

解决方案

我看到了一些可能导致您的问题的问题。

id值在页面上必须是唯一的

向 HTML 中的任何元素添加 ID 时，它必须是 DOM 中的唯一元素。根据您所在的浏览器，具有相同 ID 的多个元素会出现意外行为。有关更多信息，请参阅文档中的此链接：https ://developer.mozilla.org/en-US/docs/Web/API/Element /ID

使用<input type="image"图像提交按钮

这可能是为表单添加图像按钮的最简单方法，尽管您可能还希望包含一个附加（隐藏）字段来发送type: general按钮最初发送的信息。这是表单中图像按钮文档的链接： https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

推荐阅读