HTML <button> type 속성 – 버튼의 컨트롤 유형을 지정

`<button>` 태그의 `type` 속성

<button> 태그의 type 속성은
버튼의 컨트롤 유형을 지정합니다.

가능한 키워드 값은 다음과 같이 세 가지가 있습니다.

button 태그의 type 속성의 값
`submit`	양식(`<form>`) 제출 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 제출합니다. `<button>` 태그에서 사용되는 `type` 속성의 기본값입니다. `type` 속성을 지정하지 않으면 기본값은 `submit`입니다.
`reset`	양식(`<form>`) 초기화 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 초기화합니다.
`button`	버튼에는 기본 동작이 없으며, 기본적으로 클릭했을 때 아무것도 하지 않습니다. 일반 버튼 유형의 컨트롤을 나타내며, 주로 자바스크립트와 함께 사용하여 사용자가 클릭하면 다양한 동작을 컨트롤할 목적으로 이 버튼이 사용됩니다.

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

`type` 속성 값에 따른 예제

<button> 태그의 type 속성 값에 따른 예제를 살펴보겠습니다.

`<button type="submit">`

<button type="submit">은 양식(<form>) 제출 버튼으로, 이 버튼을 클릭하면 해당 요소가 포함되어 있는 양식의 모든 컨트롤의 값을 제출합니다.
<button> 태그에서 사용되는 type 속성의 기본값입니다. type 속성을 지정하지 않으면 기본값은 submit입니다. 즉, type 속성이 누락된 <button>은 <button type="submit">과 동일합니다.

HTML

<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="submit">제출하기</button>
</form>

`<button type="reset">`

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

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

다음의 예제에서는 <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="button">`

<button type="button"> 버튼에는 기본 동작이 없으며, 기본적으로 클릭했을 때 아무것도 하지 않습니다. 일반 버튼 유형의 컨트롤을 나타내며, 주로 자바스크립트와 함께 사용하여 사용자가 클릭하면 다양한 동작을 컨트롤할 목적으로 이 버튼이 사용됩니다.

<button type="button">은 양식(<form>) 내부에서도 사용되지만 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.

HTML

<button type="button" onclick="msg();">버튼 클릭</button>

<!-- 주로 자바스크립트와 함께 사용합니다. -->
<script>
    const msg = () => {
        alert("환영합니다.");
    }
</script>

참고사항

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

그런데, <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::after {
        content: "";
        display: inline-flex;
        width: 0.5em;
        height: 0.5em;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        transform: rotateZ(225deg);
        margin-left: 0.2em;
    }
</style>
<button type="submit">로그인하기</button>

주의할 점

<button> 태그에 type 속성을 항상 지정하는 것이 좋습니다. type 속성을 명시적으로 설정하지 않으면 브라우저가 기본 값인 type="submit"을 할당하는데, 이는 양식(<form>) 안에서 의도치 않은 동작을 발생시킬 수 있습니다.

HTML

<form action="/submit" method="post">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    
    <!-- type이 명시되지 않아 기본값인 submit이 적용됨 -->
    <button>클릭하세요</button>
</form>

양식을 제출할 의도가 없는 버튼이라면 반드시 type="button"으로 설정해야 예상치 못한 양식 제출을 막을 수 있습니다.

HTML

<form action="/submit" method="post">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    
    <!-- 의도적으로 폼 제출을 막고 JavaScript 동작만 수행 -->
    <button type="button" onclick="alert('버튼이 클릭되었습니다!')">클릭하세요</button>
</form>