[HTML] button 태그에 type 속성을 쓰는 이유

HTML 코드를 구경하다 보면 이렇게 써진 걸 볼 수 있다.

 

<button type="button"...>

 

버튼 태그를 썼으니 버튼처럼 작동할텐데 굳이 type 속성까지 써가며 버튼이란 걸 다시 한 번 정의할 필요가 있을까? 싶어서 관련 내용을 찾아봤다.

결론은 저렇게 type을 지정하는 이유는 HTML에서 버튼의 기본 동작은 submit이기 때문이다.

 

버튼의 type은 3가지 있다.

 

• submit : 현재 양식 데이터를 제출한다 (기본값)
• reset : 현재 양식 데이터를 재설정한다
• button : 그냥 버튼이다. 효과는 다른 것(=자바스크립트)으로 제어돼야 한다

 

버튼에 type을 지정하지 않으면 버튼의 기본 type은 submit이 된다. 그래서 버튼을 보고 다음 페이지로 이동하겠거니 싶어서 버튼을 눌렀는데 입력란에 썼던 데이터가 서버로 전송될 수도 있는 것이다. 잘못 입력된 값을 넘기거나 하면 에러 메시지가 올라오면서 사용자 경험이 나빠질 수도 있겠다.

이렇게 버튼에 type 속성을 명시적으로 지정하면 코드 목적이 명확해지고 유지보수가 쉬워진다는 장점도 있다.

 

버튼을 둔 목적이 서버로 어떤 값을 보내는 경우라면 굳이 type을 명시하지 않아도 되겠지만 그게 아니라면 type을 정의하는 것이 협업하는 개발자를 위해서라도 좋을 것 같다.

 

 

참고한 사이트)

 

https://html.com/attributes/button-type/

Attribute for TYPE = BUTTON | SUBMIT | RESET

 

https://dev.to/clairecodes/why-its-important-to-give-your-html-button-a-type-58k9

Why it's important to give your HTML button a type

 

https://nykim.work/96

버튼에 타입을 쓰는 이유 (button type="button")