<button>

HTML <button> 요소는 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 사용자 에이전트의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 CSS로 변경할 수 있습니다.

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 대화형 콘텐츠, 양식 관련 콘텐츠(나열됨, 레이블 가능, 제출 가능), 뚜렷한 콘텐츠.
가능한 콘텐츠 대화형 콘텐츠를 제외한 구문 콘텐츠.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 checkbox, link, menuitem, menuitemcheckbox, menuitemradio, radio, switch, tab
DOM 인터페이스 HTMLButtonElement

특성

이 요소는 전역 특성을 포함합니다.

autofocus HTML5
페이지 로드 후, 이 버튼에 포커스가 위치해야 하는지 나타냅니다. 이후, 사용자는 다른 컨트롤을 클릭하는 등의 행동으로 포커스를 바꿀 수 있습니다. 문서 내에서 하나의 요소만 autofocus 특성을 가질 수 있습니다.
disabled

버튼과 사용자의 상호작용을 막습니다. 버튼에 disabled 특성을 추가하지 않더라도, <fieldset> 등 조상 요소로 인해 비활성화될 수 있습니다.

form HTML5
버튼과 연결할 <form>요소("양식 소유자"). 같은 문서에 존재하는 <form> 요소의 id 특성 값을 사용해야 합니다. form 특성을 지정하지 않았으나 조상 중 <form> 요소가 존재하면 해당 <form>과 연결됩니다. form 특성을 사용하면 버튼을 <form> 요소에 넣지 않고도 연결할 수 있습니다.
formaction HTML5
<button>이 제출 버튼인 경우, 제출한 정보를 처리할 URL. 지정한 경우, 버튼의 양식 소유자가 가진 action 특성보다 우선합니다.
<input type="image"><input type="submit"> 요소에도 사용할 수 있는 특성입니다.
formenctype HTML5
<button>이 제출 버튼인 경우, formenctype 특성은 양식을 서버로 제출할 때 사용할 양식 데이터 인코딩을 지정합니다. 가능한 값은 다음과 같습니다.
  • application/x-www-form-urlencoded: 기본값.
  • multipart/form-data: type 특성이 file<input>이 존재하는 양식에서 사용하세요.
  • text/plain: 디버깅 전용으로 명세에 추가된 값입니다. 실제 양식 제출 시 사용해선 안됩니다.

지정한 경우, 버튼의 양식 소유자가 가진 enctype 특성보다 우선합니다.

<input type="image"><input type="submit"> 요소에도 사용할 수 있는 특성입니다.

formmethod HTML5
<button>이 제출 버튼인 경우, formmethod 특성은 양식을 서버로 제출할 때 사용할 HTTP 메서드를 지정합니다. 가능한 값은 다음과 같습니다.
  • post: 양식의 데이터를 HTTP 요청 본문에 넣습니다. 비밀번호처럼, 양식 데이터 중 공개하지 않아야 하는 항목이 있으면 사용하세요.
  • get: 양식 action URL 뒤에 ? 를 추가한 후 양식 데이터를 덧붙입니다. 검색 양식처럼, 양식이 사이드 이펙트를 갖지 않을 때 사용하세요.

지정한 경우, 버튼의 양식 소유자가 가진 method 특성보다 우선합니다.

<input type="image"><input type="submit"> 요소에도 사용할 수 있는 특성입니다.

formnovalidate HTML5
<button>이 제출 버튼인 경우, formnovalidate 특성은 양식을 제출할 때 유효성 검사를 하지 않겠다는 것을 지정합니다. 지정한 경우, 버튼의 양식 소유자가 가진 novalidate 특성보다 우선합니다.
<input type="image"><input type="submit"> 요소에도 사용할 수 있는 특성입니다.
formtarget HTML5
<button>이 제출 버튼인 경우, formtarget 특성에는 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름을 사용할 수 있습니다. 가능한 값은 브라우징 맥락(탭, 창, <iframe>)의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 target 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.
  • _self: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.
  • _blank: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
  • _parent: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
  • _top: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
<input type="image"><input type="submit"> 요소에도 사용할 수 있는 특성입니다.
name
버튼의 이름. 제출할 때, 버튼의 value 특성과 함께 양식 데이터의 일부를 구성합니다.
type
버튼의 행동 방식. 가능한 값은 다음과 같습니다.
  • submit: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.
  • reset: <input type="reset">처럼, 모든 컨트롤을 초깃값으로 되돌립니다.
  • button: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.
value
버튼의 초깃값. 제출할 때, 버튼의 value 특성과 함께 양식 데이터의 일부를 구성합니다.

참고

<button> 요소는 <input> 요소보다 스타일을 적용하기 훨씬 수월합니다. <input>value 특성에 텍스트 값밖에 지정할 수 없지만, <button>은 내부 HTML 콘텐츠(<em>, <strong>, 심지어 <img>도)에 더해 ::after::before 의사 요소를 사용해 복잡한 렌더링도 가능합니다.

양식 제출용 버튼이 아니라면 type 특성을 button으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.

예제

<button name="button">Click me</button>

접근성 고려사항

아이콘 버튼

아이콘만 사용해 기능을 표현하는 버튼은 접근 가능한 이름을 갖지 않습니다. 접근 가능한 이름은 스크린 리더 등 접근성 보조 기술이 문서를 분석하고 접근성 트리를 생성할 때 사용할 수 있는 프로그램 훅을 제공합니다. 그 후 보조 기술이 페이지 콘텐츠를 탐색하고 조작할 때 접근성 트리를 사용합니다.

아이콘 버튼에 접근 가능한 이름을 부여하려면, <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 픽셀 크기를 권고합니다.

간격

버튼과 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.

간격은 margin과 같은 CSS 속성으로 설정할 수 있습니다.

클릭과 포커스

<button>을 클릭했을 때 포커스를 얻는 여부는 브라우저와 운영체제에 따라 다릅니다. 아래 표는 <input>type="button" 또는 type="submit"일 때도 동일합니다.

<button>을 클릭했을 때 포커스를 부여하나?
데스크톱 브라우저 Windows 8.1 OS X 10.X
Firefox 예 - Firefox 30.0 (tabindex가 존재해도) 아니오 - Firefox 63
Chrome 예 - Chrome 35 Yes - Chrome 65
Safari N/A (tabindex가 존재해도) 아니오 - Safari 12 (bug 22261)
Internet Explorer 예 - Internet Explorer 11 N/A
Presto 예 - Opera 12 예 - Opera 12
<button>을 탭했을 때 포커스를 부여하나?
모바일 브라우저 iOS 7.1.2 Android 4.4.4
Safari Mobile (tabindex가 존재해도) 아니오 N/A
Chrome 35 (tabindex가 존재해도) 아니오

명세

Specification Status Comment
HTML Living Standard
The definition of '<button>' in that specification.
Living Standard
HTML5
The definition of '<button>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<button>' in that specification.
Recommendation

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
buttonChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
autocomplete
Non-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
autofocusChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 9.6Safari Full support 5WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.0
disabledChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
formChrome Full support YesEdge Full support 16Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
formactionChrome Full support 9Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 15Safari ? WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.0
formenctypeChrome Full support 9Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 10.6Safari ? WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.0
formmethodChrome Full support 9Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 15Safari ? WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.0
formnovalidateChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
formtargetChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
typeChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
valueChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.