无法从嵌入的 html 获取表单

Question

我有一个带有 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 上使用开发人员控制台时， _header.plush.html中的<form>和</form>在呈现后消失了。

Answer 1

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

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

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

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

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

Answer 2

从我看到的情况来看，输入中的值不会被发送到服务器，因为该输入没有名称标签。

name 属性用于引用 JavaScript 中的元素，或在提交表单后引用表单数据。

注意：只有具有 name 属性的表单元素才会在提交表单时传递它们的值。

https://www.w3schools.com/tags/att_input_name.asp

验证您的 html 输出是一个很好的做法。 https://validator.w3.org/

无法从嵌入的 html 获取表单

问题描述

2 个解决方案

解决方案1
1 2020-09-02 01:59:55

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

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

解决方案2
1 已采纳 2020-09-06 18:25:48

无法从嵌入的 html 获取表单

问题描述

2 个解决方案

解决方案1 1 2020-09-02 01:59:55

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

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

解决方案2 1 已采纳 2020-09-06 18:25:48

解决方案1
1 2020-09-02 01:59:55

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

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

解决方案2
1 已采纳 2020-09-06 18:25:48