如何使用form与input创建带链接的提交按钮？

针对你的需求，以下几种方案可以实现带链接的按钮，同时保持原有input submit的位置和样式：

方案1：用<button>替代<input>，兼顾表单提交与跳转 #

<button>标签比<input type="submit">更灵活，既能保留表单提交功能，又能通过JS添加跳转逻辑，只要同步CSS样式，位置就不会偏移：

<form class="box" action="index.html" method="post">
    <h1>Login</h1>
    <input type="text" name="" placeholder="Usuario">
    <input type="password" name="" placeholder="Insira Sua Senha">
    <!-- 替换原有submit input -->
    <button type="submit" onclick="handleLogin()">Login</button>
</form>

<script>
function handleLogin() {
    // 表单提交后执行跳转（可根据实际需求调整时机）
    setTimeout(() => {
        window.location.href = "你的目标链接地址";
    }, 500);
}
</script>

<style>
/* 同步原有input submit的样式，确保位置一致 */
button[type="submit"] {
    padding: 8px 16px; /* 匹配原有input的内边距 */
    border: none;
    background-color: #007bff; /* 原有按钮背景色 */
    color: #fff;
    cursor: pointer;
    /* 其他原有input的样式，比如字体、边框圆角等 */
}
</style>

方案2：用<a>标签模拟submit按钮样式（仅跳转不提交表单） #

如果不需要提交表单，只是想让按钮跳转到指定页面，直接用<a>标签并添加CSS模拟input的样式即可，位置和原有按钮完全一致：

<form class="box" action="index.html" method="post">
    <h1>Login</h1>
    <input type="text" name="" placeholder="Usuario">
    <input type="password" name="" placeholder="Insira Sua Senha">
    <!-- 替换为带样式的链接 -->
    <a href="你的目标链接地址" class="submit-btn">Login</a>
</form>

<style>
.submit-btn {
    display: inline-block; /* 关键：和input submit一致的行内块布局 */
    padding: 8px 16px;
    border: none;
    background-color: #007bff;
    color: #fff;
    text-decoration: none; /* 去掉链接下划线 */
    cursor: pointer;
    /* 匹配原有input的其他样式 */
}
</style>

方案3：给原有submit按钮添加跳转逻辑（保留<input>标签） #

如果想继续使用<input type="submit">，可以通过监听表单的submit事件实现跳转：

<form class="box" action="index.html" method="post" onsubmit="afterSubmit()">
    <h1>Login</h1>
    <input type="text" name="" placeholder="Usuario">
    <input type="password" name="" placeholder="Insira Sua Senha">
    <input type="submit" name="" value="Login">
</form>

<script>
function afterSubmit() {
    // 等待表单提交完成后跳转
    setTimeout(() => {
        window.location.href = "你的目标链接地址";
    }, 1000);
}
</script>

为什么之前的方法位置偏移？ #

你用ul、div做按钮时位置不对，是因为这些元素默认是块级元素，会独占一行；而<input type="submit">是**inline-block（行内块）**元素，和输入框在同一行布局。只要保证替换后的元素display: inline-block，并同步原有input的CSS样式，就能保持位置一致。

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