HTML에서 푸시 버튼(push button)을 추가하려면 <button> 태그를 사용합니다. HTML의 <button> 태그는 폼(form) 안에 클릭 가능한 버튼을 만들 때 사용되며, 필요에 따라 <input> 태그로도 비슷한 형태의 버튼을 만들 수 있습니다.
<button> 태그의 주요 속성
<button> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| autofocus | autofocus | 페이지가 로드될 때 해당 버튼이 자동으로 입력 포커스를 갖도록 지정합니다. |
| disabled | disabled | 버튼을 비활성화 상태로 지정하여 사용자가 클릭할 수 없게 합니다. |
| form | form_id | 해당 버튼이 속한 폼의 id를 지정합니다. |
| formaction | URL | 폼이 제출될 대상 URL을 지정합니다. |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | 폼 데이터를 서버로 전송하기 전에 어떤 방식으로 인코딩할지 지정합니다. |
| formmethod | get post | 폼 데이터를 전송할 HTTP 메서드를 지정합니다. |
| formnovalidate | formnovalidate | 폼 제출 시 데이터 유효성 검사를 수행하지 않도록 지정합니다. |
| formtarget | _blank _self _parent _top | 폼 제출 후 응답 결과가 표시될 위치(브라우저 컨텍스트)를 지정합니다. |
| name | name | 버튼의 이름을 지정합니다. |
| type | button reset submit | 버튼의 유형을 지정합니다. 기본값은 submit입니다. |
| value | text | 버튼의 초기 값(initial value)을 지정합니다. |
예제
아래 코드를 실행하면 HTML에서 <button> 태그가 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Button Tag</title>
</head>
<body>
<form>
<button name = "button" value = "OK" type = "button">My Button</button>
</form>
</body>
</html>코드 설명
- name="button": 폼 제출 시 서버로 전달되는 버튼의 이름을 지정합니다.
- value="OK": 버튼과 함께 전송되는 초기 값을 설정합니다.
- type="button": 클릭 이벤트만 처리하는 일반 버튼임을 나타냅니다. 폼 제출이 필요하다면 type을 "submit"으로 변경하면 됩니다.
이처럼 <button> 태그와 다양한 속성을 조합하면 단순한 클릭 버튼부터 폼 제출, 초기화(reset) 버튼까지 폼의 목적에 맞는 버튼을 손쉽게 구현할 수 있습니다.