HTML 양식 제출 POSTS 입력 버튼 / 제출 값; JavaScript 양식 제출은

그래서 이것은 한동안 나를 괴롭 혔습니다. 간헐적으로 양식 내용을 두 번 제출하는 페이지를 발견했습니다. 단순화를 위해 입력은 텍스트 필드와 버튼입니다. 추가 검사를 통해 하나의 양식 제출에는 텍스트 및 버튼 입력이 포함되고 다른 제출은 텍스트 입력 만 전송하는 것을 확인했습니다.

문제를 해결하기 위해 테스트 페이지를 설정했습니다. jsfiddle에 올려 놓았지만 Fiddler와 같은 HTTP 프록시 도구를 사용하여 전달 된 값을 볼 수 없기 때문에 많은 도움이 될 것이라고 생각하지 않습니다.

https://jsfiddle.net/9xL5w9t2/

<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form1" name="form1name">
<input type="submit" value="submit form" id="submitbtn1" name="submitbtn1name" />
<input type="text" id="text1" value="123" name="text1name" />
</form>

<form method="post" action="www.google.com" onsubmit="alert('form submitted');" id="form2" name="form2name">
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form2name.submit();" id="submitbtn2" name="submitbtn2name" />
<input type="text" id="text2" value="123" name="text2name" />
</form>

<form method="post" action="www.google.com" id="form3" name="form3name">
<input type="button" value="submit form" onclick="alert('button clicked to submit form'); document.form3name.submit();" id="submitbtn3" name="submitbtn3name" />
<input type="text" id="text3" value="123" name="text3name" />
</form>

<form method="post" action="www.google.com" onsubmit="alert('form submitted'); this.submit();" id="form4" name="form4name">
<input type="submit" value="submit form" id="submitbtn4" name="submitbtn4name" />
<input type="text" id="text4" value="123" name="text4name" />
</form>

양식 1 : 텍스트 및 버튼 제출

양식 2 : 텍스트 제출

양식 3 : 텍스트 제출

양식 4 : 두 번 제출합니다. 1) 텍스트 제출 2) 텍스트 및 버튼 제출

외관상 HTML 양식 제출을 사용하여 제출하면 텍스트 및 버튼 입력을 통해 전송됩니다. 그러나 JavaScript를 사용하여 양식을 제출하면 텍스트 입력 만 전송됩니다. 버튼이 없습니다.

이 동작에 대한 설명은 무엇입니까? JavaScript 양식 제출은 텍스트 입력을 통해서만 전송되지만 HTML 양식 제출은 텍스트와 버튼 입력 모두를 통해 전송되는 이유는 무엇입니까?

이것은 의도 된 것입니까? 그렇다면 그 이유는 무엇입니까? HTML 파서가 버튼 값을 보내도록하는 것이 일관성이없는 것처럼 보이지만 JS 엔진은 그렇지 않습니다.

도움을 주셔서 감사합니다.