HTML <button> 태그란?
HTML의 <button> 태그는 웹 페이지에서 클릭 가능한 버튼을 만들 때 사용합니다. 사실 <input type="submit"> 방식으로도 버튼을 만들 수 있지만, <button> 태그를 사용하면 텍스트뿐만 아니라 이미지 같은 다양한 콘텐츠도 버튼 안에 넣을 수 있다는 큰 장점이 있습니다.
또한 <button> 태그는 CSS와 JavaScript와 함께 활용하기 쉬워서, 폼 제출은 물론 모달 열기, 동적 인터랙션 처리 등 웹 개발에서 가장 널리 쓰이는 요소 중 하나입니다.
<button> 태그의 주요 속성
<button> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| autofocus | autofocus | 페이지가 로드될 때 해당 버튼이 자동으로 포커스를 받도록 지정합니다. |
| disabled | disabled | 버튼을 비활성화하여 클릭할 수 없게 만듭니다. |
| form | form_id | 버튼이 속한 하나 이상의 폼을 지정합니다. |
| formaction | URL | type="submit"인 경우에만 사용하며, 폼이 제출될 때 데이터를 전송할 URL을 지정합니다. |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | type="submit"인 경우에만 사용하며, 서버로 전송하기 전에 폼 데이터를 인코딩하는 방식을 지정합니다. |
| formmethod | get post | type="submit"인 경우에만 사용하며, 폼 데이터를 전송할 HTTP 방식(get 또는 post)을 지정합니다. |
| formnovalidate | formnovalidate | type="submit"인 경우에만 사용하며, 폼 제출 시 유효성 검사를 건너뛰도록 지정합니다. |
| formtarget | _blank _self _parent _top framename | type="submit"인 경우에만 사용하며, 폼 제출 후 응답 결과를 표시할 위치를 지정합니다. |
| name | name | 버튼의 이름을 지정합니다. |
| type | button reset submit | 버튼의 유형을 지정합니다. 일반 버튼(button), 폼 초기화(reset), 폼 제출(submit) 중 선택할 수 있습니다. |
| value | text | 버튼의 초기 값을 지정합니다. |
<button> 태그 사용 예제
이제 HTML에서 <button> 태그를 실제로 구현하는 예제를 살펴보겠습니다. 아래 코드에서는 비활성화된 'Previous' 버튼과 클릭 가능한 'Next' 버튼을 함께 배치했습니다.
<!DOCTYPE html> <html> <body> <h2>Demo Heading</h2> <p>We have added demo text below:</p> <textarea rows="4" cols="50"> Here, we are learning the concepts, elements and attributes in HTML! </textarea><br> <button type="button" disabled>Previous</button> <button type="button">Next</button> </body> </html>
실행 결과
위 코드를 실행하면 텍스트 영역 아래에 두 개의 버튼이 나타납니다. disabled 속성이 적용된 'Previous' 버튼은 회색으로 표시되며 클릭해도 반응하지 않고, 'Next' 버튼은 정상적으로 클릭할 수 있습니다.
마무리
<button> 태그는 단순히 버튼을 만드는 것을 넘어, 다양한 속성을 조합해 폼 처리와 사용자 인터랙션을 세밀하게 제어할 수 있는 강력한 요소입니다. 특히 type 속성의 기본값은 submit이므로, 폼 내부에서 단순 동작용 버튼을 만들 때는 반드시 type="button"을 명시하는 것이 좋습니다.