button element - by. UXKM

button element 설명

<button> 요소는 클릭할 수 있는 버튼을 정의할 때 사용합니다.
<button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만, <input> 요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 수 없습니다.
브라우저별로 <button> 요소에 대해 서로 다른 기본 타입을 사용할 수 있으므로, <button> 요소에는 언제나 type 속성값을 명시하는 것이 좋습니다.

HTML5에서는 <button> 요소에 다음과 같은 속성들이 추가되었습니다.
<button> 요소에 추가된 속성과 <input> 요소에 추가된 속성은 동일하게 사용됩니다.
autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget
위의 추가된 속성은 <input>요소에 사용되는 속성과 동일하기에 자세한 설명은 제외.

9.4.1. button 속성

[type] <button type="button | submit | reset">버튼명</button>

해당 버튼의 이름(name)을 명시합니다.
기본적으로 button, reset, submit의 값들이 있습니다.

type 속성에 사용되는 값은 다음과 같습니다.

  1. button

    해당 버튼이 클릭할 수 있는 버튼(clickable button)임을 명시합니다.

  2. reset

    해당 버튼이 폼 데이터를 초기값으로 되돌리는 리셋 버튼(reset button)임을 명시합니다.

  3. submit

    해당 버튼이 폼 데이터(form data)를 제출하는 제출 버튼(submit button)임을 명시합니다.

[name], [value], [disabled] <button name="해당 버튼의 이름(name)" value="텍스트" disabled>버튼명</button>

<input>의 name, value, disabled 요소의 속성과 동일합니다.

button element 예제