无法从嵌入式 html 获取表单
Unable to GET form from embedded 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 上使用开发者控制台，_header.plush.html 中的 <form> 和 </form>渲染后消失了。
我发现了一些可能导致您遇到问题的问题。
id 值在页面上必须是唯一的
向 HTML 中的任何元素添加 ID 时，它必须是 DOM 中的唯一元素。具有相同 ID 的多个元素会出现意外行为，具体取决于您所在的浏览器。有关更多信息，请参阅文档中的 link：https://developer.mozilla.org/en-US/docs/Web/API/Element/id
使用 <input type="image" 作为图片提交按钮
这可能是为您的表单添加图像按钮的最简单方法，但您可能还希望包括一个额外的（隐藏）字段来发送按钮发送的 type: general 信息起初。这是表单中图像按钮文档的 link：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image
据我所知，输入中的值不会发送到服务器，因为该输入没有 name 标记。
The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
Note: Only form elements with a name attribute will have their values passed when submitting a form.
验证您的 html 输出是一个好习惯。
https://validator.w3.org/
我有一个后端为 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>渲染后消失了。
我发现了一些可能导致您遇到问题的问题。
id 值在页面上必须是唯一的
向 HTML 中的任何元素添加 ID 时，它必须是 DOM 中的唯一元素。具有相同 ID 的多个元素会出现意外行为，具体取决于您所在的浏览器。有关更多信息，请参阅文档中的 link：https://developer.mozilla.org/en-US/docs/Web/API/Element/id
使用 <input type="image" 作为图片提交按钮
这可能是为您的表单添加图像按钮的最简单方法，但您可能还希望包括一个额外的（隐藏）字段来发送按钮发送的 type: general 信息起初。这是表单中图像按钮文档的 link：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image
据我所知，输入中的值不会发送到服务器，因为该输入没有 name 标记。
The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
Note: Only form elements with a name attribute will have their values passed when submitting a form.
验证您的 html 输出是一个好习惯。 https://validator.w3.org/