HTML <button> 태그

정의와 사용법

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

에서 <button> 요소 내부에서는 텍스트(또는 <i>、<b>、<strong>、<br>、<img>와 같은 태그)를 배치할 수 있습니다. 이는 <input> 요소가 생성할 수 없는 버튼!

알림:항상 정의해야 합니다. <button> 요소가 정의합니다 type 속성를 통해 브라우저에게 버튼의 유형을 알립니다.

알림:CSS를 사용하여 버튼에 스타일을 추가할 수 있습니다! 아래의 예제를 확인하거나 우리의 CSS 버튼 강의。

상세 설명

<button> 컨트롤과 <input type="button"> 비교하여 더 강력한 기능과 더 풍부한 내용을 제공합니다.<button> 와 </button> 태그 사이의 모든 내용은 버튼의 내용으로, 이는 텍스트나 멀티미디어 내용과 같은 모든 받아들이는 본문 내용을 포함합니다. 예를 들어, 버튼에 이미지와 관련된 텍스트를 포함할 수 있으며, 이를 통해 버튼에 매력적인 마크업 이미지를 만들 수 있습니다.

단일 금지 요소는 이미지 맵이며, 마우스와 키보드에 민감한 동작이 버튼의 행동을 방해할 수 있습니다.

또한 항상 버튼에 type 속성입니다. "button"그리고 다른 브라우저(包括 W3C 표준)의 기본 값은 "submit"。

추가로 참조:

HTML DOM 참조 설명서:버튼 객체

CSS 강의:버튼 스타일 설정

예제

이렇게 클릭할 수 있는 버튼을 표시합니다:

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

직접 시험해보세요

알림:페이지 하단에 더 많은 예제가 제공됩니다.

속성

속성 값 설명
autofocus autofocus 버튼이 페이지 로드할 때 자동으로 포커스를 받도록 정의.
disabled disabled 버튼을 비활성화하도록 정의.
form form_id 버튼이 어느 양식에 속하는지 정의.
formaction URL

양식을 제출할 때 양식 데이터를 어디로 전송할지 정의.

type="submit"에만 적용됩니다.
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

양식 데이터를 서버로 전송하기 전에 어떻게 인코딩할지 정의.

type="submit"에만 적용됩니다.
formmethod
  • get
  • post

양식 데이터를 어떻게 전송할지(어떤 HTTP 메서드를 사용할지) 정의.

type="submit"에만 적용됩니다.
formnovalidate formnovalidate

양식을 제출할 때 양식 데이터를 검증하지 않도록 정의.

type="submit"에만 적용됩니다.
formtarget
  • 프레임워크 이름

양식을 제출한 후에 어떻게 표시되어야 하는지 정의.

type="submit"에만 적용됩니다.
name 이름 버튼 이름을 정의.
popovertarget element_id 정의된 팝업 창 요소.
popovertargetaction
  • hide
  • show
  • toggle
 规定按钮被点击时对弹出窗口元素的操作。
type
  • button
  • reset
  • submit
 规定按钮的类型。
value 文本 规定按钮的初始值。

全局属性

<button> 标签还支持 HTML 中的全局属性。

事件属性

<button> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

无。

更多实例

예제 2

CSS를 사용하여 버튼 스타일을 설정하십시오：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* 초록색 */
.button2 {background-color: #008CBA;} /* 파란색 */
</style>
</head>
<body>
<button class="button button1">초록색</button>
<button class="button button2">파란색</button>
</body>
</html>

직접 시험해보세요

예제 2

CSS를 사용하여 버튼 스타일을 설정하십시오（하이버를 포함한 스타일）:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>
<button class="button button1">초록색</button>
<button class="button button2">파란색</button>
</body>
</html>

직접 시험해보세요

웹 브라우저가 지원

Chrome Edge Firefox 사파리 오페라
Chrome Edge Firefox 사파리 오페라
지원 지원 지원 지원 지원