[HTML] <button> 태그와 관련 속성 정리

<button>

<button> 태그는 submit, reset, button 3가지 type을 가질 수 있다.

<button>을 사용하려고 한다면 type은 습관적으로 명시하도록 하자. 과거에는 문서의 <form>에 사용된 <button>이 submit 역할을 할 것이라고 예측할 수 있었다. 현대의 브라우저 컨텍스트에서는 <button>이 다양한 용도로 사용되고 브라우저마다 다른 type을 기본값으로 사용하게될 수도 있기 때문에 HTML 문서를 보고 <button>이 어떤 역할을 하는 것인지 한눈에 알기 어렵다. 따라서 어떤 용도로 사용하더라도, type을 빼먹지 않고 적어주는 것이 좋다.

과거에는 input을 활용하는 케이스가 많았지만 최근의 경우 button을 활용하는 케이스가 늘어나고 있다.

 

<button type=" "> 속성

type="submit" 📌	데이터를 제출하기 위한 버튼으로 지정한다. (기본값)
type="reset" 📌	초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화해준다. 기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
type="button" 📌	버튼으로 지정한다. 클릭 이벤트 핸들러는 JavaScript로 직접 구현한다.

 

<button type="submit> 과 <input type="submit">의 차이

<button type="submit">, <input type="submit"> 둘 다 데이터를 서버에 제출하기 위한 버튼이다. 모양도 똑같이 버튼으로 표현된다는 점도 똑같다.

둘의 차이점은 <button>은 안에 내용을 표현할 수 있고, <input>은 표현할 수 없다는 점이다. <button> 태그를 여는 태그와 닫는 태그를 모두 갖지만 <input type =”button”> 속성은 opening 태그만 사용하는 self-closing tag(*)이다. 즉, <input value="제출">처럼 텍스트를 넣어 제출 버튼임을 표시할 수는 있지만, 하지만 여기에 <img>, <svg>와 같은 다른 노드를 추가할 수는 없다. 더 다채로운 방식으로 버튼을 디스플레이하고 싶다면 <button></button> 사이에 컨텐츠를 넣어 사용하는 것이 맞다.

과거 오래된 버전의 브라우저에서 지원하지 않는다는 이유로 <input>을 사용해야한다는 의견이 있었지만, submit, reset, button 타입을 사용할 것이라면 현재로서는 <button>을 사용하지 않을 이유는 없어보인다.

*self-closing tag

종료 태그를 따로 가질 수 없는 태그를 말한다. 컨텐츠를 감쌀 필요가 없는 빈 요소(empty element)들이 이에 해당된다. MDN문서에서는 "Must have a start tag and must not have an end tag"라고 표현되어 있다. 이 종류의 태그들은 어떠한 컨텐트도 자기 자신 내부에 담을 수 없다. <input>, <img>, <line>, <br>, <hr>, <meta> 등이 있다. HTML에서는 <br>로 XHTML에서는 <br /> 로 쓰는 것이 선호된다.