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

`<input type="button">`

<input> 태그의 type="button"은 클릭 가능한 일반 버튼 유형의 컨트롤을 나타냅니다.

주로 자바스크립트와 함께 사용하여 사용자가 클릭하면 다양한 동작을 컨트롤할 목적으로 이 버튼이 사용됩니다.

HTML

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

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

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

스타일의 한계점

<input> 태그의 type="button"은 클릭 가능한 일반 버튼 유형의 컨트롤을 나타내는데 있어서 완벽히 유효하지만, 이와 동일한 기능을 하는 HTML의 <button type="button">이 있습니다.

<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="button">다음 슬라이드</button>

브라우저 호환성

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

명세서

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

참고문헌

MDN - <input type="button">

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

`<input type="button">`

관련 속성 사용하기

`value` 속성

`disabled` 속성

스타일의 한계점

브라우저 호환성

명세서

참고문헌

같이 보기

<input type="button">

관련 속성 사용하기

value 속성

disabled 속성

스타일의 한계점

브라우저 호환성

명세서

참고문헌

같이 보기

`<input type="button">`

`value` 속성

`disabled` 속성