3.6.7 button 태그
버튼 요소는 앞에서 살펴봤듯이 input 태그에서 type 속성값을 submit, reset, button으로 지정해 생성할 수 있습니다. 또한, 별도의 button 태그로 생성할 수도 있습니다. button 태그도 마찬가지로 type 속성을 가집니다.
형식
<button type="종류">버튼 내용</button>
type 속성값은 폼을 서버에 전송할 목적이면 submit, 상호작용 요소에 입력된 내용을 초기화하는 버튼이면 reset, 단순한 버튼이면 button으로 지정합니다.
button 태그는 다음과 같이 사용합니다.
03/06/button.html
<button type="submit">
<img src="facebook.png" alt="페이스북 버튼">
페이스북에 등록하기
</button>
그림 3-27 실행결과
Note input 태그로 생성한 버튼과 button 태그로 생성한 버튼은 뭐가 다른가요?
button 태그는 input 태그로 생성할 수 있는 버튼 요소의 역할을 대신하기 위해 만들어진 태그로, input 태그보다 나중에 등장했습니다. button 태그도 input 태그로 생성하는 버튼 요소처럼 type 속성이 있어서 최신 HTML에서는 버튼 요소를 생성할 때 더 이상 input 태그를 사용할 필요가 없습니다. button 태그는 시작 태그와 종료 태그가 있어서 콘텐츠를 작성할 수 있습니다. 또한, 단순한 텍스트 외에도 이미지, 태그 같은 것들을 포함할 수 있어서 버튼 요소를 꾸미기가 더 수월하다는 장점이 있습니다.