点击<a>标签制作的按钮无法触发POST请求的问题求助

<form action="shorturl" method="POST">
  <div class="search-box">
    <!-- 建议给input添加name属性，后端才能接收参数 -->
    <input class="search-txt" type="text" name="url" placeholder="https://">
    <button class="search-btn" type="submit">
      <i class="fa-solid fa-minimize"></i>
    </button>
  </div>
</form>

只需把CSS样式应用在.search-btn类上，按钮外观不会有变化，同时能正常触发POST提交。

HTML代码

<form action="shorturl" method="POST" id="shortenForm">
  <div class="search-box">
    <input class="search-txt" type="text" name="url" placeholder="https://">
    <a class="search-btn" href="#">
      <i class="fa-solid fa-minimize"></i>
    </a>
  </div>
</form>

JavaScript代码

// 绑定点击事件
document.querySelector('.search-btn').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止a标签默认跳转行为
  document.getElementById('shortenForm').submit(); // 提交表单，触发POST请求
});

内容的提问来源于stack exchange，提问作者Kailash Muthu