如何解决无法从嵌入式html id值在页面上必须唯一为图像提交按钮使用<input type="image"
我在GoLang和buffalo中有一个带有后端的搜索引擎，我是Web编程的新手，我敢肯定这是一个愚蠢的问题。我有一个带有搜索栏的导航栏，并且体内还有另一个搜索栏。导航栏是嵌入式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>
我在所有其他html中都嵌入了_header.html，但在任何地方都无法使用。我认为这更多是html的问题，而不是毛绒的问题，但我找不到有关此信息。
编辑：我发现使用Chrome上的开发者控制台，<form>中的</form>和_header.plush.html在渲染后就消失了。
解决方法
我看到了一些可能会助您一臂之力的问题。
id值在页面上必须唯一
将ID添加到HTML中的任何元素时，它必须是DOM中的唯一元素。根据您所使用的浏览器，具有多个具有相同ID的元素将具有意外行为。有关更多信息，请参阅文档中的以下链接：spinning the event loop
为图像提交按钮使用<input type="image"
这可能是为表单设置图像按钮的最简单方法，尽管您可能还希望包括一个附加（隐藏）字段，以随按钮原先发送的type: general信息一起发送。这是表单中图像按钮文档的链接：
https://developer.mozilla.org/en-US/docs/Web/API/Element/id
根据我的观察，输入中的值不会发送到服务器，因为该输入没有 name 标签。
name属性用于引用JavaScript中的元素，或在提交表单后引用表单数据。
注意：提交表单时，只有具有name属性的表单元素才会传递其值。
让HTML输出经过验证是一个好习惯。 https://validator.w3.org/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。