정의 및 사용 방법

<button> 태그의 type="reset"은 양식 초기화 버튼입니다.
이 버튼을 클릭하면 해당 요소가 포함되어 있는 <form> 태그로 나타내는 양식의 모든 컨트롤의 값을 초기화합니다.

컨트롤이란
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input>, <textarea>, <select>, <button> 등은 데이터를 입력하거나 선택, 클릭할 수 있는 대표적인 컨트롤 요소입니다.

주의하세요!
양식의 모든 컨트롤의 값을 초기화한다는 것은 사용자가 입력한 값이나 설정한 값을 초깃값으로 되돌린다는 의미입니다. 모든 입력값을 지운다는 의미가 아닙니다.

기본 예제

초깃값이 없을 경우의 초기화

다음의 예제에서는 <input type="text">의 값은 설정되어 있지 않습니다. 즉, 초깃값이 없는 빈 값입니다. 사용자가 값을 입력 후 <button type="reset">을 클릭하면 <input type="text">의 값은 초깃값인 설정되어 있지 않는 빈 값 상태로 되돌려집니다.

HTML 
<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="reset">초기화</button>
</form>
브라우저에서 실제 표시된 모습 실제로 테스트 해보세요!

초깃값이 있을 경우의 초기화

다음의 예제는 위의 예제와는 달리 <input type="text">의 초깃값을 value 속성을 사용해서 홍길동으로 지정했습니다. 이런 경우, 이 값을 사용자가 변경하지 않고 <button type="reset">을 클릭하면 초깃값인 홍길동으로 지정된 값은 지워지지 않습니다. 하지만, 홍길동으로 지정된 값을 다른 값으로 변경하고 <button type="reset">을 클릭하면 초깃값인 홍길동으로 되돌립니다.

HTML 
<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name" value="홍길동">
    <button type="reset">초기화</button>
</form>
브라우저에서 실제 표시된 모습 실제로 테스트 해보세요!

<button type="reset">의 암시적인 role 속성의 값은 button입니다.

관련 속성 사용하기

<button type="reset">과 관련된 속성에 대해 알아보겠습니다.

disabled 속성

버튼을 비활성시키려면 disabled 속성을 사용하세요. 비활성화된 버튼은 클릭을 해도 그 고유기능이 비활성화되어 아무런 작동도 하지 않습니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<button type="reset" disabled>비활성화된 버튼</button>
브라우저에서 실제 표시된 모습

참고 사항

<button type="reset">은 <input type="reset">과 동일한 기능을 수행합니다.

그런데, <button>은 <input>보다 스타일을 적용하기 훨씬 수월합니다.
<input> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</input>)가 없다는 의미입니다. <button>은 <span>, <img> 등의 하위 요소를 사용할 수 있지만, <input>은 하위 요소를 사용할 수 없습니다. 이것은 <input> 태그에 스타일을 적용할 때 한계점입니다.

하위 콘텐츠를 가질 수 없는 빈 요소(Void element)는 CSS의 가상 요소 선택자인 ::before나 ::after를 사용할 수 없다는 한계점도 있습니다.

<button> 태그는 닫는 태그(</button>)가 있어 하위 콘텐츠를 가질 수 있습니다.
하위 콘텐츠를 가질 수 있기 때문에 레이블에 HTML이나 이미지를 포함할 수 있어서 스타일적으로 더 많은 것을 할 수 있습니다.

HTML 
<style>
    button {
        color: inherit;
        text-decoration: none;
        padding: 0.5em 1em;
        background-color: #fff;
        border: 1px solid #777;
        border-radius: 0.5em;
        display: inline-flex;
        align-items: center;
    }

    /* 닫는 태그가 없는 빈 요소인 input은
       ::before나 ::after를 사용할 수 없습니다. */
    button::before {
        content: "";
        display: inline-flex;
        width: 0.5em;
        height: 0.5em;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        transform: rotateZ(45deg);
        margin-right: 0.2em;
    }
</style>
<button type="reset">되돌리기</button>
브라우저에서 실제 표시된 모습

브라우저 호환성

button 태그와 관련 type 속성의 브라우저 호환성
태그와 관련 속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<button> 1 12 1 4
type 1 12 1 4

명세서

button 태그의 type 속성
명세서 사양
type HTML Standard
#attr-button-type

참고문헌

같이 보기