<input type="reset"> - HTML: Hypertext Markup Language | MDN

Toggle sidebar

Theme

OS default
Light
Dark

한국어

Remember language Learn more

<input type="reset">

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.

reset 유형의 <input> 요소는 버튼으로 렌더링되며, 기본 click 이벤트 처리기가 설정되어 있어 폼 내 모든 입력 값을 초기 값으로 초기화합니다.

시도해 보기

<form>
  <div class="controls">
    <label for="id">User ID:</label>
    <input type="text" id="id" name="id" />

    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
  </div>
</form>

.controls {
  padding-top: 1rem;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 1fr 2fr;
  gap: 0.7rem;
}

label {
  font-size: 0.8rem;
  justify-self: end;
}

input[type="reset"],
input[type="submit"] {
  width: 5rem;
  justify-self: end;
}

input[type="reset"] {
  grid-column: 2;
  grid-row: 2;
}

input[type="submit"] {
  grid-column: 2;
  grid-row: 3;
}

참고 : 폼에 초기화 버튼을 포함하는 것은 일반적으로 피하는 것이 좋습니다. 이 버튼은 대부분 유용하지 않으며, 오히려 실수로 클릭했을 때 사용자가 불편함을 겪는 경우가 더 많습니다. 특히, 종종 사용자가 클릭하려던 제출 버튼을 잘못 눌러서 문제가 발생하곤 합니다.

값

<input type="reset"> 요소의 value 속성은 버튼의 레이블로 사용되는 문자열을 포함하며, 이를 통해 버튼에 accessible description 을 제공합니다. reset과 같은 버튼은 그렇지 않으면 값이 없습니다.

값 속성 설정

html

값 속성 생략

value를 지정하지 않으면 기본 레이블이 있는 버튼이 생성됩니다(일반적으로 "Reset"이지만, 이는 사용자 에이전트에 따라 달라질 수 있습니다).

html

초기화 버튼 사용

<input type="reset"> 버튼은 폼을 초기화하는 데 사용됩니다. 커스텀 버튼을 만들고 JavaScript를 사용하여 동작을 사용자화하려면 <input type="button"> 또는 더 나아가 <button> 요소를 사용해야 합니다.

기본 초기화 버튼

기본 초기화 버튼을 생성하는 것부터 시작해 봅시다.

html
<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" />
  </div>
</form>

이렇게 렌더링됩니다.

텍스트 필드에 텍스트를 입력한 후 초기화 버튼을 눌러 보세요.

초기화 키보드 단축키 추가

의미 있는 모든 <input> 요소와 마찬가지로 초기화 버튼에 키보드 단축키를 추가하려면, accesskey 전역 특성을 사용하면 됩니다.

이 예제에서는 r이 접근 키로 명세되었습니다. 브라우저/OS 조합에 맞는 특정 수정 키와 함께 r을 눌러야 합니다. 자세한 내용은 accesskey에서 유용한 목록을 확인할 수 있습니다.

html
<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" accesskey="r" />
  </div>
</form>

위 예제의 문제는 사용자가 접근 키가 무엇인지 알 수 없다는 점입니다! 특히 수정 키의 충돌을 피하기 위해 일반적이지 않은 키로 설정하는 경우가 많기 때문에 문제가 더욱 두드러집니다.

사이트를 만들 때는 이 정보를 사이트 디자인에 방해되지 않는 방식으로 제공해야 합니다 (예: 사이트 접근 키에 대한 정보를 제공하는 쉽게 접근할 수 있는 링크를 제공하는 방식). 버튼에 툴팁을 추가하는 것도 도움이 될 수 있지만, title 속성을 사용하는 것처럼 접근성 측면에서 완전한 해결책은 아닙니다.

초기화 버튼 비활성화 및 활성화

초기화 버튼을 비활성화하려면, 그 위에 disabled 속성을 지정하면 됩니다.

html

버튼은 실행 중에 disabled를 true 또는 false로 설정하여 활성화하거나 비활성화할 수 있습니다. JavaScript에서는 btn.disabled = true 또는 btn.disabled = false와 같이 작성합니다.

참고 : 버튼을 활성화하거나 비활성화하는 방법에 대한 더 많은 아이디어는 <input type="button"> 페이지에서 확인할 수 있습니다.

값	버튼의 레이블로 사용되는 문자열
메서드	없음
암시적 ARIA 역할	button
이벤트	click
지원되는 일반 속성	type와 value
DOM 인터페이스	HTMLInputElement
IDL 속성	value

<input>와 이를 구현하는 HTMLInputElement 인터페이스
폼과 버튼
HTML 폼
<button> 요소

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025년 6월 27일 by MDN contributors.

View this page on GitHub • Report a problem with this content

<input type="reset">

In this article

시도해 보기

값

값 속성 설정

값 속성 생략

초기화 버튼 사용

기본 초기화 버튼

초기화 키보드 단축키 추가

초기화 버튼 비활성화 및 활성화

유효성 검사

예제

기술 요약

명세

브라우저 호환성

같이 보기

Help improve MDN