HTML中如何让submit、reset按钮仅作用于对应的单个文本输入框

默认情况下<form>标签内的所有submit、reset按钮都会作用于整个表单的输入元素，要实现按钮和单个输入框绑定，可以用以下两种方案：

方案1：拆分独立表单（无需JavaScript，原生兼容） #

把每个需要独立控制的输入框 + 对应的提交、重置按钮放在单独的<form>标签中即可，原生逻辑下每个表单的按钮只会作用于当前表单内的元素。修改后代码如下：

<!-- Ad和Soyad区域可根据需求选择是否单独放form，这里按原结构保留，若需要单独控制可自行套form -->
<table>
    <tbody>
        <tr><td>Ad:</td><td><input type="text" name="ad" size="20" maxlength="30" required></td></tr>
        <tr><td>Soyad:</td><td><input type="text" name="soyad" size="20" maxlength="30" required></td></tr>
        <tr><td> <td></td> </td></tr>
        <tr><td> <td></td> </td></tr>
        <tr><td> <td></td> </td></tr>
        <!-- 独立的email表单 -->
        <form name="email_form" action="mail.php" method="get">
            <tr><td>email:</td><td><input type="email" name="email"></td></tr>
            <tr><td><input type="submit"></td><td><input type="reset"></td></tr>
        </form>
        <tr><td> <td></td> </td></tr>
        <tr><td> <td></td> </td></tr>
        <tr><td> <td></td> </td></tr>
        <!-- 独立的web表单 -->
        <form name="web_form" action="mail.php" method="get">
            <tr><td>Web:</td><td><input type="url" name="web"></td></tr>
            <tr><td><input type="submit"></td><td><input type="reset"></td></tr>
        </form>
    </tbody>
</table>

如果需要提交时同时携带ad、soyad的值，可以在对应表单内加隐藏的<input type="hidden">同步这两个字段的值即可。

方案2：单表单+JavaScript控制（适合不能拆分表单的场景） #

如果业务要求所有输入必须放在同一个form内，可以给按钮绑定点击事件，阻止默认的全局提交/重置行为，仅操作上方对应的输入框：

<form name="email" action="mail.php" method="get">
    <table>
        <tbody>
            <tr><td>Ad:</td><td><input type="text" name="ad" size="20" maxlength="30" required></td></tr>
            <tr><td>Soyad:</td><td><input type="text" name="soyad" size="20" maxlength="30" required></td></tr>
            <tr><td> <td></td> </td></tr>
            <tr><td> <td></td> </td></tr>
            <tr><td> <td></td> </td></tr>
            <tr><td>email:</td><td><input type="email" name="email" id="email_input"></td></tr>
            <tr>
                <td><input type="button" value="提交" onclick="submitSingle('email_input')"></td>
                <td><input type="button" value="重置" onclick="resetSingle('email_input')"></td>
            </tr>
            <tr><td> <td></td> </td></tr>
            <tr><td> <td></td> </td></tr>
            <tr><td> <td></td> </td></tr>
            <tr><td>Web:</td><td><input type="url" name="web" id="web_input"></td></tr>
            <tr>
                <td><input type="button" value="提交" onclick="submitSingle('web_input')"></td>
                <td><input type="button" value="重置" onclick="resetSingle('web_input')"></td>
            </tr>
        </tbody>
    </table>
</form>
<script>
// 重置单个输入框
function resetSingle(inputId) {
    document.getElementById(inputId).value = '';
}
// 提交单个输入框的值
function submitSingle(inputId) {
    const input = document.getElementById(inputId);
    const form = document.forms['email'];
    // 先禁用所有其他输入，避免被提交
    const allInputs = form.querySelectorAll('input:not([type="button"])');
    allInputs.forEach(item => item.disabled = item.id !== inputId);
    // 提交表单
    form.submit();
    // 恢复所有输入的可用状态
    allInputs.forEach(item => item.disabled = false);
}
</script>

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