HTML <button> 태그

정의 및 특징

・<button> 태그는

　클릭할 수 있는 버튼을 정의할 때 사용한다

 

・<button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만,

　<input> 요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 수 없다

・브라우저별로 <button> 요소에 대해

　서로 다른 기본 타입을 사용할 수 있으므로,

　<button> 요소에는 항상 type 속성값을 명시하는 것이 좋다

 

 

지원하는 브라우저

지원함	지원함	지원함	지원함	지원함	지원함

 

속성

속성명	속성값	설명
autofocus	autofocus	페이지가 로드될 때 자동으로 포커스가 버튼으로 이동됨을 명시한다 HTML5에서 새롭게 추가된 속성
disabled	disabled	해당 버튼이 비활성화됨을 명시한다
form	form id	해당 버튼이 포함될 하나 이상의 <form> 요소를 명시한다 HTML5에서 새롭게 추가된 속성
formaction	URL	폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시한다 (단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음) HTML5에서 새롭게 추가된 속성
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩(encoding)되는 방식을 명시한다 (단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음) HTML5에서 새롭게 추가된 속성
formmethod	get post	폼 데이터(form data)가 서버로 제출될 때 사용할 HTTP 메소드를 명시한다 (단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음) HTML5에서 새롭게 추가된 속성
formnovalidate	formnovalidate	폼 데이터(form data)가 서버로 제출될 때 해당 데이터의 유효성 검사를 하지 않음을 명시한다 (단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음) HTML5에서 새롭게 추가된 속성
formtarget	_blank _self _parent _top 프레임 이름	폼 데이터(form data)가 서버로 제출된 후 받은 응답(response) 데이터를 어디에 표시할 지를 명시한다 (단, <button> 요소의 type 속성값이 “submit”인 경우에만 사용할 수 있음) HTML5에서 새롭게 추가된 속성
name	텍스트	해당 버튼의 이름(name)을 명시한다
type	button reset submit	해당 버튼의 타입(type)을 명시한다
value	텍스트	해당 버튼의 초깃값(value)를 명시한다

 

예제

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

 

 

■HTML 태그 레퍼런스

HTML 태그 레퍼런스 - MAIN 돌아가기