..

Search

<button>

HTML <button> 태그


정의 및 특징

<button> 태그는 클릭할 수 있는 버튼을 정의할 때 사용합니다.

 

<button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만, <input> 요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 수 없습니다.

브라우저별로 <button> 요소에 대해 서로 다른 기본 타입을 사용할 수 있으므로, <button> 요소에는 언제나 type 속성값을 명시하는 것이 좋습니다.


예제

<button type="button" onclick="alert('Hello World!')">클릭해 보세요!</button>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<button> 지원함 지원함 지원함 지원함 지원함 지원함

HTML5에서 변경된 사항

HTML5에서는 <button> 태그에 다음과 같은 속성들이 추가되었습니다.

- autofocus

- form

- formaction

- formenctype

- formmethod

- formnovalidate

- formtarget


사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된  속성

속성명   속성값 설명

autofocus

html5

autofocus

페이지가 로드될 때 자동으로 포커스가 버튼으로 이동됨을 명시함.

disabled

 

disabled

해당 버튼이 비활성화됨을 명시함.

form

html5

form id

해당 버튼이 포함될 하나 이상의 <form> 요소를 명시함.

formaction

html5

URL

폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시함.

(단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음)

formenctype

html5

application/x-www-form-urlencoded

multipart/form-data

text/plain

폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩(encoding)되는 방식을 명시함.

(단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음)

formmethod

html5

get

post

폼 데이터(form data)가 서버로 제출될 때 사용할 HTTP 메소드를 명시함.

(단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음)

formnovalidate

html5

formnovalidate

폼 데이터(form data)가 서버로 제출될 때 해당 데이터의 유효성 검사를 하지 않음을 명시함.

(단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음)

formtarget

html5

_blank

_self

_parent

_top

프레임 이름

폼 데이터(form data)가 서버로 제출된 후 받은 응답(response) 데이터를 어디에 표시할 지를 명시함.

(단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음)

name

 

텍스트

해당 버튼의 이름(name)을 명시함.

type

 

button

reset

submit

해당 버튼의 타입(type)을 명시함.

value

 

텍스트

해당 버튼의 초깃값(value)를 명시함.


DOM 인터페이스

interface HTMLButtonElement : HTMLElement {
  attribute boolean autofocus;
  attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  attribute DOMString formAction;
  attribute DOMString formEnctype;
  attribute DOMString formMethod;
  attribute boolean formNoValidate;
  attribute DOMString formTarget;
  attribute DOMString name;
  attribute DOMString type;
  attribute DOMString value;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  boolean reportValidity();
  void setCustomValidity(DOMString error);

  [SameObject] readonly attribute NodeList labels;
};


연관 페이지

CSS3 버튼 수업 ⇒


연습문제