如何将HTML5提交按钮转换为可提交表单的超链接？

有两种简单方式能让你的自定义超链接实现表单提交功能：

方法一：直接在a标签添加点击事件 #

给<a>标签绑定点击事件，触发对应表单的提交动作。假设你的表单id为login-form（若表单没id，直接给它加一个即可），修改后的代码如下：

<a href="#" onclick="document.getElementById('login-form').submit(); return false;">
    <div class="button-1 valign-text-middle roboto-medium-white-16px">
        Send-TEST
    </div>
</a>

• return false;用于阻止a标签默认的锚点跳转行为，避免页面滚动到顶部。
• 对应表单示例：<form id="login-form" action="你的提交地址" method="post">...</form>

方法二：用JavaScript绑定事件（更推荐） #

如果不想把JS代码写在HTML标签内，可通过外部JS绑定点击事件，代码结构更清晰：

HTML部分：

<a href="#" id="submit-link">
    <div class="button-1 valign-text-middle roboto-medium-white-16px">
        Send-TEST
    </div>
</a>

JavaScript部分：

document.getElementById('submit-link').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    document.getElementById('login-form').submit(); // 提交目标表单
});

额外注意事项 #

• 若表单没有id，也可以通过document.forms[0]获取页面第一个表单，或通过表单name属性获取，比如document.forms['form-name']。
• 要是需要保留原按钮的name="signin"参数，可在表单内添加一个隐藏input，提交时就能带上该参数：

<input type="hidden" name="signin" value="1">

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