인프런 커뮤니티 질문&답변

addForm.html에서

<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 action="item.ht ml" th:action th:object="${item}" method="post">

에 의해 @PostMapping("/add")으로 이동합니다.

하지만 취소는

th:onclick="|location.href='@{/form/items}'|"

onclick을 설정하여 다른 url로 갑니다.

같은 form 속성에 있더라도 onclick을 추가하면

독립적인(?) 동작을 하는 것으로 보이는데

(1)

그러면 실무에서 한 html에(한 화면에) 수많은 버튼이 있다면 사용자의 데이터를 가져가야할 버튼은 form속성을 이용하여 만들고

(예로들어 상품 등록, 상품 수정 저장 버튼)

사용자의 데이터가 필요없고 url이동만 필요한 경우 onclick을 추가하여 버튼을 만드는 것인가요??

(예로들어 취소, 목록 버튼 같은 경우)

(2)

상품등록은 type="submit"

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

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

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

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

왜 GET으로만 보내는 지 구글링을 해보았지만 답을 찾을 수 가 없었습니다. 알려주시면 정말 감사하겠습니다.