无法从嵌入的 html 获取表单

Question

I have a search engine with a backend in GoLang & Buffalo, I'm new to web programming, and I'm sure this is a stupid problem.我有一个带有 GoLang 和 Buffalo 后端的搜索引擎，我是网络编程的新手，我确信这是一个愚蠢的问题。 I have a nav-bar with a search bar, and another search bar in the body.我有一个带有搜索栏的导航栏，以及正文中的另一个搜索栏。 The nav-bar is an embedded html (plush partial).导航栏是嵌入的 html（毛绒部分）。

The search.html 's form works flawlessly, but the nav-bar's submit button doesn't do anything. search.html的表单完美无缺，但导航栏的提交按钮没有任何作用。

have the following code:有以下代码：

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

And和

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

I embed _header.html in every other html, and it doesn't work anywhere.我将_header.html嵌入到其他所有 html 中，但它在任何地方都不起作用。 I think it's more of a html's problem rather than plush's, but I can't find information about this..我认为这更像是 html 的问题而不是毛绒的问题，但我找不到有关此的信息..

EDIT : I've found using the developer console on Chrome, that <form> and </form> in _header.plush.html are gone after being rendered.编辑：我发现在 Chrome 上使用开发人员控制台时， _header.plush.html中的<form>和</form>在呈现后消失了。

Answer 1

I see a few problems which may be contributing to your issue.我看到了一些可能会导致您的问题的问题。

`id` values must be unique on the page `id`值在页面上必须是唯一的

When adding an ID to any element in HTML, it must be the only element in the DOM.向 HTML 中的任何元素添加 ID 时，它必须是 DOM 中的唯一元素。 Having multiple elements with the same ID will have unexpected behavior depending on the browser you are in. See this link in the docs for more information: https://developer.mozilla.org/en-US/docs/Web/API/Element/id根据您所在的浏览器，拥有多个具有相同 ID 的元素会产生意外行为。有关更多信息，请参阅文档中的此链接： https : //developer.mozilla.org/en-US/docs/Web/API/Element /ID

Use an `<input type="image"` for an image submit button使用`<input type="image"`作为图像提交按钮

This is probably the easiest way to have an image button for your form, though you will probably also want to include an additional (hidden) field to send along the type: general information that was sent by the button originally.这可能是为表单添加图像按钮的最简单方法，尽管您可能还希望包含一个额外的（隐藏）字段来发送type: general最初由按钮发送的type: general信息。 Here is a link to the docs for image buttons in forms: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image这是表单中图像按钮文档的链接： https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

Answer 2

From what I saw, the value in the input is not going to be sent to the server since there isn't a name tag for that input.从我看到的情况来看，输入中的值不会被发送到服务器，因为该输入没有名称标签。

The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted. name 属性用于引用 JavaScript 中的元素，或在提交表单后引用表单数据。

Note : Only form elements with a name attribute will have their values passed when submitting a form.注意：只有具有 name 属性的表单元素才会在提交表单时传递它们的值。

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

It is a good practice to get your html output validated.验证您的 html 输出是一个很好的做法。 https://validator.w3.org/ https://validator.w3.org/

无法从嵌入的 html 获取表单

问题描述

2 个解决方案

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

`id` values must be unique on the page `id`值在页面上必须是唯一的

Use an `<input type="image"` for an image submit button使用`<input type="image"`作为图像提交按钮

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

无法从嵌入的 html 获取表单

问题描述

2 个解决方案

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

id values must be unique on the page id值在页面上必须是唯一的

Use an <input type="image" for an image submit button使用<input type="image"作为图像提交按钮

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

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

`id` values must be unique on the page `id`值在页面上必须是唯一的

Use an `<input type="image"` for an image submit button使用`<input type="image"`作为图像提交按钮

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