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

`<input type="submit">`

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

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

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

관련 속성 사용하기

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

`value` 속성

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

`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>

스타일의 한계점

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

<input> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</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>