HTML <button> 요소는 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 {{glossary("user agent", "사용자 에이전트")}}의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 CSS로 변경할 수 있습니다.
<button>
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
button
이 요소는 전역 특성을 포함합니다.
autofocus
autocomplete="off"
버튼과 사용자의 상호작용, 즉 누르거나 클릭하는 것을 막습니다.
Firefox, unlike other browsers, persist the dynamic disabled state of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.
<form>
form
formenctype
application/x-www-form-urlencoded
multipart/form-data
file
text/plain
지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("enctype","form")}} 특성보다 우선합니다.
formmethod
post
get
action
?
지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("method","form")}} 특성보다 우선합니다.
formnovalidate
formtarget
_self
_blank
_parent
_top
value
submit
reset
<input type="reset">
<button> 요소는 {{HTMLElement("input")}} 요소보다 스타일을 적용하기 훨씬 수월합니다. <input>은 value 특성에 텍스트 값밖에 지정할 수 없지만, <button>은 내부 HTML 콘텐츠(<em>, <strong>, 심지어 <img>도)에 더해 {{Cssxref("::after")}}와 {{Cssxref("::before")}} 의사 요소를 사용하는 복잡한 렌더링도 가능합니다.
<input>
<em>
<strong>
<img>
양식 제출용 버튼이 아니라면 type 특성을 button으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.
type
<button name="button">눌러보세요</button>
{{ EmbedLiveSample('예제', 200, 64) }}
아이콘만 사용해 기능을 표현하는 버튼은 접근 가능한 이름을 갖지 않습니다. 접근 가능한 이름은 스크린 리더 등 접근성 보조 기술이 문서를 분석하고 접근성 트리를 생성할 때 사용할 수 있는 프로그램 훅을 제공합니다. 그 후 보조 기술이 페이지 콘텐츠를 탐색하고 조작할 때 접근성 트리를 사용합니다.
아이콘 버튼에 접근 가능한 이름을 부여하려면, <button> 요소의 기능을 간략히 묘사하는 텍스트를 안에 포함하세요.
<button name="favorite" type="button"> <svg aria-hidden="true" viewBox="0 0 10 10"><path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/></svg> Add to favorites </button>
텍스트를 숨기고 싶은 경우, 접근 가능한 방식은 CSS 속성을 조합해 시각적으로는 숨기고, 보조 기술은 읽을 수 있는 형태로 남기는 것입니다.
그러나, 버튼의 텍스트를 시각적으로 남겨놓는 것은 아이콘의 뜻이나 버튼의 기능에 익숙하지 않은 사용자도 도울 수 있다는 점을 명심해야 합니다. 특히 기술과 가깝지 않거나, 문화적으로 다른 해석을 할 수 있는 사용자를 고려하세요.
버튼과 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 CSS 픽셀 크기를 권고합니다.
버튼과 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.
간격은 {{cssxref("margin")}}과 같은 CSS 속성으로 설정할 수 있습니다.
Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using button::-moz-focus-inner { }.
button::-moz-focus-inner { }
If overridden, it is important to ensure that the state change when focus is moved to the button is high enough that people experiencing low vision conditions will be able to perceive it.
Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and {{cssxref("font-weight", "bold")}} or larger, or 24px or larger.)
<button>을 클릭했을 때 포커스를 얻는 여부는 브라우저와 운영체제에 따라 다릅니다. 아래 표는 {{HTMLElement("input")}}이 type="button" 또는 type="submit"일 때도 동일합니다.
type="button"
type="submit"
tabindex
{{Compat("html.elements.button")}}