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);
}

불러오는 중...

<input type="button">은 여전히 유효한 HTML 요소지만, 지금은 <button> 요소가 더 적합합니다. <button> 여는 태그와 닫는 태그 사이의 내용이 버튼 레이블이 되므로 임의의 HTML 코드를 사용할 수 있고, 따라서 이미지 버튼도 쉽게 만들 수 있습니다.

값

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

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

불러오는 중...

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

<input type="button">

불러오는 중...

유효성 검증

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

명세

HTML Standard

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`type="button"`

같이 보기

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