HTML <button type=”reset”> – 올바른 이해와 사용 방법

`<button type="reset">`

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

컨트롤이란
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input>, <textarea>, <select>등 사용자가 데이터를 입력하고, 선택하고, 제출하는 등의 작업을 할 수 있는 요소들이 해당됩니다.

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

다음의 예제에서는 <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">은 <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	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<button>`	1	12	1	4
`type`	1	12	1	4

명세서

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

참고문헌

MDN - <button>: The Button element

HTML <button type=”reset”> – 올바른 이해와 사용 방법

`<button type="reset">`

관련 속성 사용하기

`disabled` 속성

참고사항

브라우저 호환성

명세서

참고문헌

같이 보기

<button type="reset">

관련 속성 사용하기

disabled 속성

참고사항

브라우저 호환성

명세서

참고문헌

같이 보기

`<button type="reset">`

`disabled` 속성