HTML <input type="button">: 버튼

button 유형의 <input> 요소는 웹 페이지의 어디에나 배치할 수 있는 간단한 버튼으로 렌더링됩니다. 버튼의 기능은 이벤트 처리기(보통 click 이벤트)를 부착해 직접 구현할 수 있습니다.

<input type="button" value="즐겨찾기에 추가">

input[type="button"] {
  background: cornflowerblue;
  border: none;
  border-radius: 4px;
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6),
    inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1em;
  padding: 8px 20px;
}

input[type="button"]:hover {
  background: dodgerblue;
}

input[type="button"]:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),
    inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

값

button 유형의 value 특성은 버튼의 레이블로 사용할 문자열입니다. 레이블은 접근 가능한 설명을 제공합니다.

<input type="button" value="클릭하세요!">

value를 지정하지 않으면 빈 버튼을 생성합니다.

<input type="button">

추가 특성

button 유형은 모든 <input> 요소가 공유하는 특성 외에도 아래의 특성을 추가로 지원합니다.

popovertarget

<input type="button">을 팝오버 제어 버튼으로 지정합니다. 값으로는 제어할 팝오버 요소의 ID를 지정해야 합니다. Popover API를 참고하세요.

popovertargetaction

<input type="button">이 제어하는 팝오버 요소에 대해 수행할 작업을 지정합니다. 가능한 값은 다음과 같습니다.

• hide: 팝오버 요소를 숨깁니다. 이미 숨겨진 팝오버 요소에 대해서는 아무런 효과가 없습니다.
• show: 팝오버 요소를 표시합니다. 이미 표시된 팝오버 요소에 대해서는 아무런 효과가 없습니다.
• toggle: 팝오버 요소의 숨김/표시 상태를 전환합니다. 팝오버 요소가 숨겨져 있으면 표시하고, 표시되어 있으면 숨깁니다. popovertargetaction 특성을 지정하지 않았을 때의 기본 값입니다.

유효성 검증

<input type="button">은 제약해야 하는 값을 가지지 않으므로 유효성 검증에 참여하지 않습니다.

명세

HTML Standard

브라우저 호환성

같이 보기

• 기본 요소: <input>
• 대체 요소: <button>