Button

button요소는 말 그대로 클릭이 가능한 요소를 뜻합니다.

버튼 요소는 form 내에서 submit이나 reset을 하는데 사용할 수 있으며 button 대신해 input타입의 submit이나 reset으로 대신할 수 있습니다. 이러한 부분에 어떤 다른 점이 있는지 그리고 버튼의 속성에 대해서 공부를 해보도록 하겠습니다.

1. Type

브라우저별로 <button> 요소에 대해 서로 다른 기본 타입을 사용할 수 있으므로, <button> 요소에는 언제나 type 속성값을 명시하는 것이 좋습니다.

1-1 Submit타입

버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.

1-2 reset타입

<input type="reset">처럼, 모든 컨트롤을 초깃값으로 되돌립니다.

1-3 button타입

기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.

2. Button vs Input

  <form action="" method="get">

    <div>
      <input type="reset" /> //값을 지정하지 않아도 자동으로 기본값이 들어간 상태로 출력
      <input type="submit" /> //값을 지정하지 않아도 자동으로 기본값이 들어간 상태로 출력
      <input type="button" value="빈 버튼" />
    </div>

    <div>
      <button type="reset"></button>
      <button type="submit"></button>
      <button type="button"></button>
    </div>

  </form>

가장 큰 차이는 input태그는 빈태그로 자식 요소를 가질 수 없습니다. 하지만 button태그 열린태그와 닫힌 태그를 가지며 자식 요소를 가질 수 있습니다. 그렇기 때문에 button요소는 스타일을 적용하기가 훨씬 수월합니다.

또한 input의 reset타입과 submit타입의 경우 값을 지정해주지 않아도 자동으로 기본값이 들어간 상태로 출력이 됩니다.