HTML <input> disabled 속성 완벽 가이드 – 입력 필드 비활성화 방법

<input> 요소의 disabled 속성은 해당 입력 필드를 비활성화하는 데 사용됩니다. 요소에 disabled 속성이 적용되면 사용자가 클릭하거나 값을 수정할 수 없게 되며, 당연히 비활성화된 입력 요소의 값은 폼 제출 시 서버로 전송되지 않습니다.

disabled 속성의 주요 특징

비활성화된 입력 필드는 클릭, 포커스, 편집이 모두 불가능합니다.
폼을 제출(submit)해도 해당 필드의 값은 전송되지 않습니다.
Boolean 속성이므로 값 없이 속성 이름만 작성하면 됩니다.
CSS의 :disabled 선택자를 활용해 스타일링도 가능합니다.

문법(Syntax)

다음은 disabled 속성의 기본 문법입니다 −

<input disabled>

필요하다면 아래와 같이 명시적으로 값을 지정할 수도 있습니다.

<input disabled="disabled">

예제(Example)

이제 <input> 요소의 disabled 속성을 실제로 구현한 예제를 살펴보겠습니다 −

<!DOCTYPE html>
<html>
<body>
<h2>Details</h2>
<form>
<p>These are the new details...</p>
<fieldset>
<legend>New Details:</legend>
Player: <input type="text" disabled><br>
Rank: <input type="number"><br>
Email: <input type="email"><br>
Reporting Time: <input type="time">
</fieldset>
</form>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다. 이 예제에서는 네 개의 입력 필드 중 'Player' 필드 하나만 disabled 속성으로 비활성화했습니다 −

HTML input disabled 속성 완벽 가이드 – 입력 필드 비활성화 방법

코드 설명

위 예제에는 총 네 개의 입력 필드가 있습니다 −

Player: <input type="text" disabled><br>
Rank: <input type="number"><br>
Email: <input type="email"><br>
Reporting Time: <input type="time">

이 중 하나의 필드만 disabled 속성을 사용하여 비활성화했습니다 −

Player: <input type="text" disabled>

따라서 'Player' 필드는 회색으로 표시되며, 사용자가 어떤 텍스트도 입력할 수 없습니다. 반면 나머지 세 필드(Rank, Email, Reporting Time)는 정상적으로 입력이 가능합니다.

참고: disabled와 readonly의 차이점

비슷한 역할을 하는 readonly 속성과 혼동하기 쉬운데, 두 속성의 핵심 차이는 다음과 같습니다.

disabled: 필드 자체가 비활성화되어 편집 불가 + 폼 제출 시 값이 전송되지 않음
readonly: 값 편집은 불가하지만 포커스 가능 + 폼 제출 시 값이 정상적으로 전송됨