为什么我的表单中的每个字段都充当提交？

// 错误的示例
document.querySelectorAll('input').forEach(input => {
    input.addEventListener('click', function() {
        document.getElementById('myForm').submit();
    });
});

// 正确的做法是为提交按钮单独添加事件
document.getElementById('submitButton').addEventListener('click', function() {
    document.getElementById('myForm').submit();
});

<!-- 错误的示例 -->
<input type="text" name="username" type="submit">
<button>Submit</button>

<!-- 正确的示例 -->
<input type="text" name="username">
<button type="submit">Submit</button>

/* 错误的示例 */
input {
    background-color: blue;
    color: white;
}

/* 正确的做法是为提交按钮单独设置样式 */
button[type="submit"] {
    background-color: blue;
    color: white;
}