정의 및 사용 방법

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

다음은 '컨트롤' 용어에 대한 간단한 부연설명입니다.
컨트롤
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input> 태그를 포함해서 <button>, <textarea>, <select> 등은 데이터를 입력하거나 선택, 클릭할 수 있는 대표적인 컨트롤 요소입니다.

기본 예제

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

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

관련 속성 사용하기

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

value 속성

value 속성은 버튼의 레이블에 사용될 문자열을 지정합니다.
value 속성으로 버튼의 레이블에 사용될 문자열을 지정하지 않으면 브라우저에서 제공하는 레이블이 표시됩니다.

HTML value 속성으로 버튼의 레이블에 사용될 문자열을 지정했을 경우 
<input type="submit" value="레이블에 사용될 문자열">
브라우저에서 실제 표시된 모습
HTML value 속성으로 버튼의 레이블에 사용될 문자열을 지정하지 않았을 경우 
<input 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">
    <input type="submit" disabled>
</form>
브라우저에서 실제 표시된 모습

name 속성

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

form 속성

form 속성은 이 속성을 지정한 <input type="submit">을 문서 내의 특정 <form>과 연결(associated with)합니다.
연결할 <form>의 id를 이 속성의 값으로 지정하면 연결됩니다.

이렇게 해당 요소를 특정 <form>과 연결시키면, 연결된 <form>에 속한 폼 관련 요소가 됩니다.
즉, 물리적인 위치와 상관없이 연결된 <form> 내부에 있는 <input type="submit">처럼 작동합니다.

formnovalidate 속성

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

알아두세요!
formnovalidate 속성은 <input type="image"> 및 <button type="submit">에서도 사용할 수 있습니다.

스타일의 한계점

<input> 태그의 type="submit"은 해당 요소가 포함되어 있는 양식의 제출 가능한 모든 입력값을 제출하는데 있어서 완벽히 유효하지만, 이와 동일한 기능을 하는 HTML의 <button type="submit">이 있습니다.

<input> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</input>)가 없다는 의미입니다.

참고하세요!
<input> 태그처럼 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)이면서 실제 콘텐츠(actual content)가 아닌 대체 콘텐츠는 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>
브라우저에서 실제 표시된 모습

브라우저 호환성

input type 속성의 submit 값에 대한 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="submit"> 1 12 1 1

명세서

input type 속성의 submit 값에 대한 명세서 사양
명세서 사양
<input type="submit"> HTML Standard
#submit-button-state-(type=submit)

참고문헌

같이 보기