button 태그에 type 속성 / input 태그 form 전송 지연시키기

JSP를 통해 백엔드 통신이 가능한 프론트엔드 코드를 짜다보니 

html 태그의 속성들에 대해 조금 더 깊게 알게 되었다. 

 

그중에서 button과 input.

버튼을 만드는 방법은 누구나 알고 있 듯, <button>버튼</button> 혹은 <input value="버튼">이 있다.

 

백엔드 통신을 하기 전에 프론트에서 예외처리나 동적 이벤트를 진행할 일이 있다면

통신, 즉 submit을 지연시켜야한다. 

이 지연을 시키기 위한 방법으로 <input type="button">으로 일단 아무 작동을 하지 않는 버튼을 만들어놓고, 

프론트의 동적 처리 함수 내부에 모든 코드를 짠 뒤 맨 마지막에 form.submit을 해줄 수 있다. 

---

 

✔︎ form.submit이란 통신을 하기 위해 받은 모든 정보들을 감싼 <form> 태그를 submit 해준다는 뜻이다.

예를 들어 아래의 상황에서

<form id="loginForm">
     <input id="id" type="text">
     <input id="pw" type="password">
     <input value="로그인" type="button">
<form>

유저가 #id와 #pw input을 작성 후 '로그인' 버튼을 누르면 form 전송이 되길 바란다.

하지만 '로그인' 버튼을 눌렀을 때 해야할 프론트 처리가 있다면 JS에 해당 함수를 모두 작성 후 함수 내부의 마지막에 #loginForm.submit을 해줌으로써 비로소 form 전송을 진행하는 것이다. 

---

 

여튼 <input type="button"> 이것을 사용한 이유는 <button>태그의 경우 기본 설정이 "submit"으로 되어 있어 form 전송을 지연시킬 수 없다고 생각했기 때문이다. 

 

 

그러다가 과거에 내가 쓴 코드를 볼 일이 있어 뜯어보다가

<button> 태그 안에 type="button"을 작성한 것을 발견하고 이를 제대로 알아봐야겠다고 생각해 지피티에게 질문했다. 

 

<button> 태그의 기본 설정이 폼 전송이 가능한 "submit"인 것은 맞았지만, type="button"으로 명시할 경우 폼 제출을 막을 수 있다는 것이 input 태그와 비슷함을 알게되었다.

그리고, 브라우저 별로 기본 동작이 다를 수 있으므로 명시하는 게 좋다는 충고? 조언?도 얻을 수 있었다.

 

오늘도 하나 배웠다.....ㅎㅎㅎ