코딩의 시작, TCP School

HTML <button> 태그

정의 및 특징

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

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

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

예제


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

코딩연습 ▶

지원하는 브라우저 및 버전

태그명
<button>	지원함	지원함	지원함	지원함	지원함	지원함

HTML5에서 변경된 사항

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

- autofocus

- form

- formaction

- formenctype

- formmethod

- formnovalidate

- formtarget

사용할 수 있는 속성

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

속성명	속성값	설명
autofocus	autofocus	페이지가 로드될 때 자동으로 포커스가 버튼으로 이동됨을 명시함.
disabled	disabled	해당 버튼이 비활성화됨을 명시함.
form	form id	해당 버튼이 포함될 하나 이상의 <form> 요소를 명시함.
formaction	URL	폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시함. (단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음)
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩(encoding)되는 방식을 명시함. (단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음)
formmethod	get post	폼 데이터(form data)가 서버로 제출될 때 사용할 HTTP 메소드를 명시함. (단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음)
formnovalidate	formnovalidate	폼 데이터(form data)가 서버로 제출될 때 해당 데이터의 유효성 검사를 하지 않음을 명시함. (단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음)
formtarget	_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 버튼 수업 ⇒

연습문제

◀ 이전 다음 ▶

Search

<button>