정의 및 사용방법

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

<button> 태그에서 사용되는 type 속성의 기본값입니다. type 속성을 지정하지 않으면 기본값은 submit입니다.

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

기본 예제

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="submit">의 암시적인 role 속성의 값은 button입니다.

관련 속성 사용하기

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

disabled 속성

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

HTML 
<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="submit" disabled>제출</button>
</form>
브라우저에서 실제 표시된 모습

formnovalidate 속성

<button type="submit">으로 양식이 제출될 때 양식 영역이 검증되지 않아야 함을 나타냅니다. 이 속성이 없으면 양식 영역을 검증합니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

양식 영역의 검증은 두 가지입니다.

  1. HTML5의 기본 기능으로 제공하는 유효성 검사
  2. required 속성이 있는 컨트롤의 값이 지정되어 있는지 검사
HTML5의 기본 기능으로 제공하는 유효성 검사

<input type="url">이나 <input type="email">은 <form> 태그 내에서 사용하면 기본적으로 브라우저에서 유효성 검사가 진행됩니다.
이는 HTML5의 기본 기능으로, <input type="url">에는 사용자가 올바른 형식의 URL을 입력했는지 자동으로 확인해 주고, <input type="email">은 사용자가 올바른 형식의 이메일 주소를 입력했는지 자동으로 확인해 줍니다.

HTML5의 기본 기능으로 제공하는 유효성 검사 기능를 제거하려면 <form> 태그 내에 novalidate 속성을 추가하거나 <button type="submit">에 formnovalidate 속성을 추가하는 것입니다. 여기에서는 <button type="submit">에 formnovalidate 속성을 추가하는 것을 다룹니다.

다음은 <button type="submit"> 내에 formnovalidate 속성을 설정하지 않은 것과 formnovalidate 속성을 설정한 것을 비교하는 예제입니다.

HTML 
<h3>유효성 검사를 진행함</h3>
<p>올바른 형식의 URL을 입력했는지 검사</p>
<form>
    <label for="user-url">홈페이지 주소</label>
    <input type="url" id="user-url" name="user-url">
    <button type="submit">제출</button>
</form>
<h3>유효성 검사를 진행하지 않음</h3>
<p>올바른 형식의 URL을 입력했는지 검사를 진행하지 않음</p>
<form>
    <label for="user-url-1">홈페이지 주소</label>
    <input type="url" id="user-url-1" name="user-url-1">
    <button type="submit" formnovalidate>제출</button>
</form>
브라우저에서 실제 표시된 모습 URL을 입력하고 유효성 검사가 진행되는지 실제로 테스트 해보세요!
주의! URL을 입력하지 않으면 유효성 검사 없이 양식이 제출됩니다.
required 속성이 있는 컨트롤의 값이 지정되어 있는지 검사

required 속성은 폼 제출 시 사용자가 사전에 반드시 값을 입력하거나 선택해야 하는 필수(required) 컨트롤 요소임을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

다음은 <button type="submit"> 내에 formnovalidate 속성을 설정하지 않은 것과 formnovalidate 속성을 설정한 것을 비교하는 예제입니다.

HTML 
<h3>required 속성 검사를 진행함</h3>
<p>required 속성이 있는지 검사</p>
<form>
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name" required>
    <button type="submit">제출</button>
</form>
<h3>required 속성 검사를 진행하지 않음</h3>
<p>required 속성이 있는지 검사를 진행하지 않음</p>
<form>
    <label for="user-name-1">이름</label>
    <input type="text" id="user-name-1" name="user-name-1" required>
    <button type="submit" formnovalidate>제출</button>
</form>
브라우저에서 실제 표시된 모습 required 속성 검사가 진행되는지 실제로 테스트 해보세요!

value 속성

value 속성은 폼 제출 시, 버튼의 name과 함께 전송되는 값을 정의합니다.
폼 제출에 사용되는 버튼에 지정하는 value 속성은 폼이 제출되는 데이터가 어떤 제출 버튼으로 제출되었으며, 그 값이 무엇인지 구별할 때 사용됩니다. 특히 아래의 예제처럼 제출 버튼이 여러 개일 때 유용합니다.

HTML 
<form action="submit_url" method="post">
    <p>
        <label for="user-name">이름</label>
        <input type="text" id="user-name" name="user-name">
    </p>
    <p>
        <!-- 각 버튼은 다른 값을 전송함 -->
        <button type="submit" name="action" value="save">저장</button>
        <button type="submit" name="action" value="delete">삭제</button>
    </p>
</form>

name 속성

name 속성은 버튼의 이름을 나타냅니다.
이 이름은 폼이 제출될 때 <button type="submit">의 value 속성 값과 함께 전송하는 데 사용될 수 있으며, 자바스크립트에서도 name 속성의 값을 참조하여 해당 요소의 form.elements API의 이름으로 사용됩니다.

참고 사항

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

그런데, <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>

브라우저 호환성

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

명세서

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

참고문헌

같이 보기