html type="submit" type="button" 차이

프로젝트를 진행하면서 매번 button태그나 < input type="button" value="로그인">이런식으로 구현하곤 했는데,

<input type="button" value="로그인">
<input type="submit" value="로그인"> 

위처럼 해도 똑같이 버튼이 나오는 것이다. 심지어 모양도 같았다. 그러면 이 둘의 차이점이 무엇인가 궁금해 실험해 보았다. 그 결과,

	<form method="post" action="/adminPage" id="form_login">
        <label>아이디 :</label>
        <input type="text" name="t_id">
        <label>패스워드 :</label>
        <input type="password" name="t_pw">
        <input type="button" value="로그인" id="bt_login">
    </form>

이와 같은 코드에서 form태그가 전체를 감싸고 있는데, button만을 클릭해서는 action과 연결된 url로 이동이 되지 않는다. 즉, javascript onclick함수를 사용해서 연결시켜주거나 해야하는 것이다. 그러면,

	<form method="post" action="/adminPage" id="form_login">
        <label>아이디 :</label>
        <input type="text" name="t_id">
        <label>패스워드 :</label>
        <input type="password" name="t_pw">
        <input type="submit" value="로그인" id="bt_login">
    </form>

이 코드에서는 어떨까? type이 submit인 버튼을 클릭하면 javascript연동없이도 바로 전송이 되는 것이다. 사소하지만, 궁금해서 정리해 보았다. 나는 개인적으로는 submit으로 바로 전송하기보다는 button을 사용해서 javascript와 연동하여 사용하는 편이다. 유지보수할 때 html상에서 하는 것보다 javascript상에서 하는 것이 더 편하기 때문이다.

😁초보개발자라 잘못된 내용이 있을 수 있으니, 댓글로 많은 지적과 의견 부탁드립니다~😁