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

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

<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 Living Standard

브라우저 호환성

	IE	Edge	Chrome	Safari	Firefox	iOS Safari	Android WebView	Android Chrome	Android Firefox	Samsung Internet
`type="button"`

MDN browser-compat-data

같이 보기

대체 요소: <button>