인프런 커뮤니티 질문&답변
작성한 질문수
type= "button", type="submit"의 차이
작성
·
4.5K
0
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으로 바뀌는 이유가 궁금합니다.
답변 1
0
안녕하세요, 코딩먹는하마 님! 공식 서포터즈 codesweaver 입니다.
Button 태그의 동작에 대한 질문이군요.
Button은 Form 내부에 있을 때 의미가 달라지므로 주의해야 합니다. 말씀하신것처럼 Button의 타입 속성을 생략하면 기본적으로 Submit 으로 작동합니다.
Form 밖에서 Submit은 아무 의미도 없으므로(전송할 폼이 없으므로) 아무 변화도 일어나지 않습니다. Form 내부에서는 자신이 속한 Form 을 서버에 전송합니다. 그래서 화면이 번쩍이면서 새로 고침이 발생하죠. 그래서 Form 내부에서 순수하게 버튼으로 동작하게 하려면 type 속성을 'button'으로 설정해야 합니다. 버튼은 순수하게 UI요소인 버튼이 됩니다.
다만 지금 코드를 보시면 onclick="" 으로 버튼을 클릭했을 때 자바스크립트 이벤트가 발생하도록 설정하였습니다. 그리고 그 코든내용은 페이지 이동입니다(location.href). 그래서 버튼을 눌렀을 때 화면이 깜빡이며 새로고침이 되는것 처럼 보이지요.
감사합니다.