button element - by. UXKM

2025-05-16

요약 설명
<button> 요소는 웹 페이지에서 사용자와의 상호작용을 위한 클릭 가능한 버튼을 정의하는 시맨틱 태그로, 기본적으로 폼 제출(type="submit"), 초기화(type="reset"), 일반 동작(type="button") 등 다양한 역할을 수행할 수 있습니다.
내부에 텍스트, 아이콘, HTML 요소 등을 자유롭게 포함할 수 있으며, type 속성을 명시하지 않으면 기본값은 submit입니다. <input type="button">보다 유연하게 콘텐츠를 구성할 수 있고, 스크립트와 함께 사용자 인터페이스를 제어하거나 폼 동작을 실행하는 데 자주 사용됩니다.

주요 역할 및 특징

사용자 인터랙션 요소
버튼 클릭을 통해 폼을 제출하거나 JavaScript 이벤트를 실행할 수 있습니다.
폼과 함께 사용 가능
- <form> 요소 내부에서 사용되면 자동으로 폼과 연결되어 동작합니다.
- type="submit"으로 설정하면 클릭 시 폼이 제출됩니다.
컨텐츠 포함 가능
- <button> 요소 내부에는 텍스트, 이미지, 아이콘 등 다양한 요소를 포함할 수 있습니다.
- 또한, 버튼의 내용을 구성하기 위해 <span>, <strong>, <br> 등과 같은 인라인 요소를 <button> 요소 내부에 포함할 수 있습니다.
기본 스타일이 적용됨
브라우저마다 화면에 표시되는 스타일이 다를 수 있으므로, 필요에 따라 CSS로 스타일을 재정의하는 것이 좋습니다.

CSS 기본 값

<button> 요소는 기본적으로 인라인 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							button {
								display: inline-block;
								padding: 1px 6px;
								text-align: center;
								border: 2px outset ButtonFace;
								background-color: ButtonFace;
								box-sizing: border-box;
								cursor: default; /* 일부 브라우저는 point */
							}

기본 문법

							<button type="button">클릭하세요</button>

속성

`<button>` 속성 요약

속성명
설명

type

버튼의 동작 지정 (type="submit", type="reset", type="button")
disabled

버튼을 비활성화 (클릭 불가)
name

버튼의 이름 지정
value

버튼이 제출될 때 함께 전송되는 값
form

버튼이 연결될 폼의 id 지정
autofocus

페이지 로드 시 자동으로 버튼에 포커스 설정
formaction

클릭 시 데이터를 보낼 URL 지정 (type="submit" 타입에서만 사용)
formenctype

데이터 인코딩 방식 지정 (type="submit" 타입에서만 사용)
formmethod

데이터 전송 방식 지정 (type="submit" 타입에서만 사용)
formnovalidate

브라우저 기본 유효성 검사 비활성화 (type="submit" 타입에서만 사용)
formtarget

전송 후 응답을 표시할 창 지정 (type="submit" 타입에서만 사용)

[type] 선택 사항 <button type="값">

type 속성은 <button> 요소가 클릭되었을 때 수행할 기본 동작을 정의하는 속성입니다.

설정 가능한 값 :: submit(기본값) : 폼 데이터를 서버로 전송; reset : 폼을 초기 상태로 리셋; button : 기본 동작 없음 (JavaScript로 동작 정의 필요)

								<form action="submit.php">
									<button type="submit">제출</button>
									<button type="reset">리셋</button>
									<button type="button" onclick="alert('버튼 클릭!')">클릭</button>
								</form>

[disabled] Boolean - 선택 사항 <button disabled>

버튼을 비활성화하여 사용자가 클릭할 수 없도록 설정하는 속성으로, 해당 속성이 적용되면 스타일도 비활성화된 상태로 변경됩니다.

								<button disabled>비활성화된 버튼</button>

[name] 선택 사항 <button name="값">

버튼의 이름을 지정하여 폼 제출 시 서버로 함께 전송됩니다. 서버에서 버튼의 이름을 기반으로 값을 구별할 때 사용됩니다.

								<form action="submit.php">
									<button name="action" value="save">저장</button>
								</form>

[value] 선택 사항 <button value="값">

버튼이 폼과 함께 전송될 때 서버로 전달되는 값을 지정하는 속성으로, 주로 name 속성과 함께 사용됩니다.

								<form action="submit.php">
									<button name="action" value="delete">삭제</button>
								</form>

[form] 선택 사항 <button form="form 요소의 id">

<button> 요소의 form 속성에 <form> 요소의 id와 같은 값을 지정하여, 버튼이 <form> 요소 내부에 없더라도 외부에서 특정 폼을 조작할 수 있습니다.

								<form id="myForm" action="submit.php">
									<input type="text" name="username">
								</form>

								<button form="myForm">외부 버튼으로 제출</button>

[autofocus] Boolean - 선택 사항 <button autofocus>

페이지가 로드될 때 해당 버튼이 자동으로 포커스를 받도록 설정하는 속성으로, 한 문서 내에서 하나의 요소에만 적용할 수 있습니다.

								<button autofocus>자동 포커스 버튼</button>

[formaction] 선택 사항 <button formaction="값">

[type="submit"]에서만 사용 가능합니다.
버튼이 클릭될 때 폼을 제출할 URL을 지정하는 속성으로, type="submit" 일 때만 동작하며 <form> 요소의 action 속성은 무시됩니다.

								<form action="default.php">
									<button type="submit" formaction="submit.php">이 버튼만 submit.php로 전송</button>
								</form>

[formenctype] 선택 사항 <button formenctype="값">

[type="submit"]에서만 사용 가능합니다.
폼 데이터를 서버로 전송할 때 사용할 인코딩 방식을 지정하는 속성입니다.

설정 가능한 값 :: application/x-www-form-urlencoded : 기본 폼 데이터 인코딩 방식, key=value 형태로 전송.; multipart/form-data : 파일 업로드 시 사용, 데이터가 여러 부분으로 나뉘어 전송.; text/plain : 텍스트 형식으로 전송, 인코딩 없이 key=value 형태.

								<form action="upload.php" method="post">
									<input type="file" name="file">
									<button type="submit" formenctype="multipart/form-data">업로드</button>
								</form>

[formmethod] 선택 사항 <button formmethod="값">

[type="submit"]에서만 사용 가능합니다.
폼이 제출될 때 사용할 HTTP 메서드를 지정하는 속성으로, <form> 요소의 method 속성은 무시됩니다.

설정 가능한 값 :: get : URL에 데이터를 추가하여 전송; post : 본문(body)에 데이터를 포함하여 전송

								<form action="submit.php">
									<button type="submit" formmethod="post">POST로 전송</button>
								</form>

[formnovalidate] Boolean - 선택 사항 <button formnovalidate>

[type="submit"]에서만 사용 가능합니다.
폼 제출 시 HTML5 폼 유효성 검사를 무시하도록 설정하는 속성으로, <form> 요소의 novalidate 속성은 무시됩니다.

								<form>
									<input type="email" required>
									<button type="submit" formnovalidate>유효성 검사 없이 전송</button>
								</form>

[formtarget] 선택 사항 <button formtarget="값">

[type="submit"]에서만 사용 가능합니다.
폼이 제출된 후 응답을 표시할 창이나 프레임을 지정하는 속성입니다.

설정 가능한 값 :: _self(기본값) : 현재 창; _blank : 새 창; _parent : 부모 프레임 (없다면 _self 적용); _top : 최상위 프레임 (없다면 _self 적용)

								<form>
									<button type="submit" formtarget="_blank">새 창에서 열기</button>
								</form>

예제

일반 버튼(type="button") / 비활성 버튼(disabled)

폼 제출 버튼 (type="submit")

폼 초기화 버튼 (type="reset")

아이콘, 이미지를 포함한 버튼

CSS 스타일링 적용

구조적인 버튼 예제

주의사항

<button> 요소는 기본적으로 type="submit"을 가지므로, 폼 안에서 클릭 시 자동으로 제출됩니다.
단순 클릭 이벤트를 원하면 type="button"을 명시적으로 설정해야 합니다.
브라우저마다 <button>의 기본 스타일이 다르므로, 스타일을 직접 지정하는 것이 좋습니다.
disabled 속성만으로는 보안이 보장되지 않습니다.
사용자가 개발자 도구에서 disabled 속성을 제거할 수 있으므로, 서버 측에서도 버튼 클릭에 대한 검증이 필요합니다.