如何在多表单场景下复用HTML表单输入字段？

直接修改为单个表单，通过HTML5的formaction属性让两个按钮分别提交到不同接口，完美复用输入字段：

<!-- 复用输入字段的统一表单 -->
<form class="p-3 mt-3" onsubmit="return validateInput()" method="post">
    <h6 style="margin-top: 25px; color: #000000; font-size: 25px;">Enter Your Information</h6>
    <div style="display: flex; flex-wrap: wrap;" class="push">
        <!-- VIN输入字段 -->
        <div class="mt-3" style="padding-right: 25px;">
            <input type="text" name="vehicle" id="vehicle" placeholder="Vehicle ID #" required>
        </div>
        <!-- 里程输入字段 -->
        <div class="mt-3">
            <input type="text" name="mileage" id="mileage" placeholder="Mileage (Ex: 10000)" required>
        </div>
    </div>
    <!-- 添加车辆按钮：提交到Mileage.php -->
    <button class="btn mt-4" type="submit" formaction="Mileage.php">Add Car</button>
    <!-- 更新车辆按钮：提交到Update.php -->
    <button class="btn mt-4 ms-2" type="submit" formaction="Update.php">Update Car</button>
</form>

关键说明： #

• 复用输入字段：所有输入控件都放在同一个表单里，无需重复编写，减少冗余代码
• formaction属性：HTML5原生支持，每个提交按钮可以单独指定提交目标，点击时会覆盖表单的默认action属性，自动将表单数据POST到对应接口
• 保留验证逻辑：表单的onsubmit事件依然生效，不管点击哪个按钮，都会先执行validateInput()验证，验证通过才会提交
• 样式调整：给第二个按钮加了ms-2类（Bootstrap样式）避免按钮挤在一起，可根据你的样式框架自行调整

兼容旧浏览器的备选方案（若需支持IE等） #

如果需要兼容不支持formaction的旧浏览器，可以用JS动态修改表单的action属性后提交：

<form class="p-3 mt-3" id="vehicleForm" onsubmit="return validateInput()" method="post">
    <!-- 输入字段部分和上面完全一致 -->
    <div style="display: flex; flex-wrap: wrap;" class="push">
        <div class="mt-3" style="padding-right: 25px;">
            <input type="text" name="vehicle" id="vehicle" placeholder="Vehicle ID #" required>
        </div>
        <div class="mt-3">
            <input type="text" name="mileage" id="mileage" placeholder="Mileage (Ex: 10000)" required>
        </div>
    </div>
    <button class="btn mt-4" type="button" onclick="submitForm('Mileage.php')">Add Car</button>
    <button class="btn mt-4 ms-2" type="button" onclick="submitForm('Update.php')">Update Car</button>
</form>

<script>
function submitForm(targetUrl) {
    const form = document.getElementById('vehicleForm');
    // 先手动触发验证
    if (form.checkValidity()) {
        form.action = targetUrl;
        form.submit();
    } else {
        // 触发浏览器默认的提示
        form.reportValidity();
    }
}
</script>

这个方案通过点击事件动态设置表单的action，然后提交，同时手动验证输入合法性，确保和原逻辑一致。

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