[HTML] 버튼에 타입을 명시하는 이유? (ft. button type="button")

간혹 버튼 태그에 위 같은 형태로 type을 명시한 경우를 심심찮게 볼 수가 있습니다.

그리고 비슷하게 <input type="button"/> 이라고 명시한 경우도 찾아볼 수 있는데요.

버튼이면 버튼이지 왜 굳이 타입을 명시할까요? 버튼 타입은 버튼...? 

Q. 굳~이 button type= "button"을 명시해주는 이유?

A. button의 기본 타입은 button이 아니기 때문입니다! 

button의 디폴트 타입값은 submit 제출이기 때문인데요.

 

일반적으로 브라우저는 form 작성후 엔터를 치거나 버튼을 누르는 경우

form이 제출된 것으로 인식하고 자동으로 새로고침해주는 특성이 있습니다.

-> 이 때문에 브라우저가 새로고침됨에 따라 사용자가 입력한 값은 저장되지 않고 날아가 버리는데요.

사용자가 입력한 값을 브라우저에 저장해주려면 새로고침을 제어할 필요가 있겠죠?

 

2023.02.12 - [프로그래밍/JS] - [JS] form을 submit할 때 새로고침 방지하기

[JS] form을 submit할 때 새로고침 방지하기

이전 포스팅에서도 언급했었던 것처럼, 브라우저의 새로고침을 제어하는 방법 중 하나가 바로,

button에 type 속성을 지정해주는 것입니다.

button의 type에는 다음의 3가지 값을 지정해줄 수가 있는데 각각 submit, reset, button 입니다.

 

submit은 폼을 제출하는 이벤트를 발생시킵니다.

reset은 폼 안에 작성된 내용을 초기화시킵니다.

button은 그 자체로 아무런 이벤트가 없고, click이벤트와 연결시켜서 자바스크립트를 활용하는 방법을 주로 사용합니다.

 

만약 button에 아무런 타입 지정도 해주지 않았다면 말한 것처럼 기본값은 submit이 됩니다.😱

---

엔터를 칠때 브라우저 화면이 새로고침되는 대표적인 예가 바로 크롬과 IE9 이슈, 

크롬, 인터넷 익스플로러 이슈인데요~ !

위 브라우저에서는 동일하게 form 내부의 input요소 입력후 엔터를 치면

웹페이지가 Reloading(페이지를 다시 읽어들임)되는 현상이 있습니다.

 

버튼에 별도 타입 지정을 하지 않아도 이거 때문에 에러가 나거나 하진 않아서

어찌보면 큰 문제는 아닐 수 있으나, 사용자 접근성과 마크업을 고려한다면 고민하지 않을 수 없는 부분인데요..🙄

 

자바스크립트로 특정 버튼에만 이벤트를 걸어줄 수도 있지만

놔두면 사실상 type="submit"인 버튼이 2개나 있는 셈이기 때문에 기능 없는 단순 버튼이라면

type="button"을 명시해주는 것이 좋습니다. 

 

+ 추가로) button과 input 태그의 차이?

button 태그와 input 태그의 가장 큰 차이점은 button은 스스로 닫지 않는 태그이고, input은 스스로 닫는 태그라는 점!

input은 열린태그여서 별도의 자식태그들을 둘 수 없고, button은 자식태그들을 둘 수 있습니다.

이를테면 button태그 안에 span 태그로 텍스트를 감싸서 특정 텍스트 부분에만 css style을 줄 수가 있겠죠.

그렇지만 이것들은 button 태그에서만!! 가능합니다. input요소는 특정 텍스트에 스타일을 적용할 수가 없어요..

  

그리고 이번에 button 타입 속성에 관해 공부하면서 알게 된 흥미로운 점이 있어 공유할까 합니다.

코드 중에 <input type="submit"> 이나 <input type="button">으로 지정된 것들도 간혹 볼 수 있었는데요,

옛날엔(바야흐로 1900년대..) 지금처럼 클라이언트 스크립트가 호황기가 아니던 시절에는

브라우저와 사용자가 상호작용하는 데 있어서 주된 역할을 <input>태그가 담당했다고 합니다.

간혹 가다 이벤트 처리시 필요에 의해 <input type="button"> 형식으로 사용되었던 건데요.

https://people.apache.org/~jim/NewArchitect/webrevu/tag/1998/10_30_98.html

출처: Web Review / 1998.10.30

 

위 기고에서 알 수 있듯이 HTML 4.0 표준 버전부터 <button>태그를 사용할 수 있게된 것인데요.

이걸 통해서 알 수 있는 건 예전에는 button태그랄 게 존재하지 않았다는 겁니다.

input태그의 사용이 당시에는 가장 보편적인 방식이었고,

이를 대체하기 위해 등장한 것이 바로 button태그인 셈이죠! 

 

태그들에 얽힌 역사(?)를 알게되니 개인적으로 참 흥미로운 부분이었습니다. 😮❗️❗️

---

=== 정리하자면 ====

• button의 기본 type은 submit이다.
• button에 타입을 명시하지 않아도 별도 에러는 발생하지 않지만.. 
  • form태그 내에 타입 명시 없는 버튼은 submit으로 동작되어 클릭시 새로고침된다!
• 명확한 역할 구분을 위해 submit이 아닌 버튼에는 type="button"을 지정해주는 것이 좋다.
• input태그는 열린태그<input/>, button태그는 닫힌태그<button></button> 이다.

---

*이해에 도움이 됐던 자료 출처: 

(아래 자료들이 가장 정리가 잘되있었어요. 명쾌한 설명에 깊은 감사를.. 🙏🏻)

https://cocoder16.tistory.com/18 - 기분따라 코딩

https://nykim.work/96 - nana_log