type= "button", type="submit"의 차이

addForm.html에서

<form action="item.html" th:action th:object="${item}" method="post">
       
        <hr class="my-4">
        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button>
            </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='items.html'"
                        th:onclick="|location.href='@{/form/items}'|"
                        type="button">취소</button>
            </div>
        </div>

    </form>

상품등록은 type="submit"

취소는 type="button"

을 하셨길래 그 차이가 궁금하여 구글링을 해봤더니 버튼은 타입 명시가 없다면 기본적으로 'submit' 처리가 되며 'submit'은 새로고침을 하게 한다. 라는 것을 알게되었습니다.

그래도 잘 이해가 안되 상품등록버튼을 type="button"

으로 바꿔봤더니 작동이 되지않았습니다...

<기존코드>

<button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button>

<변경 코드>

<button class="w-100 btn btn-primary btn-lg" type="button">상품 등록</button>

그래서 개발자도구를 보니 type="button"을 하면 POST가 아닌 GET으로만 보내고 있는 것을 확인했습니다.

<정리>

form 속성 중 method가 post인데 상품등록버튼을type="submit"에서 type="button"으로 바꾸면 POST가 GET으로 바뀌는 이유가 궁금합니다.