HTML에서 버튼을 만드는 대표적인 방법은 두 가지입니다. 하나는 <button> 태그, 다른 하나는 <input type='button'>입니다. 두 요소 모두 클릭 가능한 버튼을 화면에 표시하지만, 내부에 담을 수 있는 콘텐츠와 폼(form)에서의 동작 방식에서 중요한 차이가 있습니다.
<input type='button'>은 빈(empty) 요소이기 때문에 value 속성으로만 버튼 라벨을 지정할 수 있으며, 태그 안에 텍스트나 이미지 같은 콘텐츠를 넣을 수 없습니다. 반면 <button> 태그는 여는 태그와 닫는 태그 사이에 텍스트, 이미지, 아이콘 등 다양한 콘텐츠를 자유롭게 배치할 수 있습니다.
HTML <button> 태그
<button> 태그는 HTML 폼 안에서 버튼을 생성할 때 사용합니다. 가장 큰 특징은 여는 태그와 닫는 태그 사이에 텍스트나 이미지 같은 콘텐츠를 직접 넣을 수 있다는 점입니다.
다음과 같이 버튼 안에 이미지를 추가할 수도 있습니다.
예제
아래 코드를 실행해 보면 <button> 태그 안에 이미지를 넣어 버튼을 만드는 방법을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Learn HTML')">
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg"
alt="Learn HTML" height="80" width="100">
</button>
</body>
</html>
HTML <input type='button'>
<form> 태그는 사용자 입력을 받기 위한 폼을 만들 때 사용하며, 그 안에 다양한 폼 요소를 배치합니다. <input> 태그의 type 속성 값에 따라 텍스트 입력창, 체크박스, 버튼 등 여러 형태의 컨트롤을 만들 수 있습니다.
type='button'은 일반 클릭 버튼을 만들며 기본적으로 폼을 전송하지 않습니다. 반면 type='submit'으로 지정하면 클릭하는 순간 폼이 자동으로 제출됩니다.
예제
아래 코드를 실행해 보면 <input> 태그로 폼과 제출 버튼을 구성하는 방법을 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Button</title> </head> <body> <form action="/new.php"> Student Name:<br> <input type="text" name="sname"> <br> Student Subject:<br> <input type="text" name="ssubject"> <br> <input type="submit" value="Submit"> </form> </body> </html>
<button> vs <input type='button'> 핵심 차이 정리
- 콘텐츠 삽입: <button>은 텍스트·이미지·아이콘 등 HTML 콘텐츠를 자유롭게 넣을 수 있지만, <input type='button'>은 value 속성으로 텍스트만 지정할 수 있습니다.
- 스타일링: <button>은 내부 요소에 개별적인 CSS를 적용하기 쉬워 디자인 자유도가 높습니다.
- 폼 전송: <button>은 type 속성(submit·reset·button)에 따라 동작이 달라지며 기본값은 submit입니다. <input type='button'>은 기본 동작이 없어 주로 JavaScript와 함께 사용됩니다.
- 호환성: 현대 브라우저에서는 두 요소 모두 안정적으로 지원됩니다.
결론적으로 단순한 텍스트 버튼이라면 어느 쪽이든 무방하지만, 이미지나 아이콘을 포함한 버튼을 만들거나 세밀한 스타일링이 필요하다면 <button> 태그를 사용하는 것이 좋습니다.