HTML disabled 속성이란?
HTML에서 disabled 속성은 특정 요소를 비활성화(사용 불가 상태)로 만들 때 사용합니다. 이 속성이 설정된 요소는 클릭하거나 편집할 수 없으며, 폼 제출 시에도 값이 전송되지 않습니다.
disabled 속성은 다음 요소에 적용할 수 있습니다.
<button>, <textarea>, <optgroup>, <select>, <fieldset>, <input>, <option>
기본 문법
<element disabled>
위와 같이 속성을 추가하기만 하면 해당 요소는 즉시 비활성화됩니다. disabled는 불리언(Boolean) 속성이므로 별도의 값을 지정할 필요가 없습니다.
<input> 요소의 disabled 속성
<input> 요소에 disabled 속성을 사용하면 해당 입력 필드를 비활성화할 수 있습니다. 비활성화된 입력 필드는 클릭할 수 없고, 당연히 폼 제출 시에도 값이 함께 전송되지 않습니다.
문법
<input disabled>
예제
다음은 <input> 요소에 disabled 속성을 적용한 예제입니다. 'Player' 입력 필드만 비활성화되어 있는 것을 확인할 수 있습니다.
<!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>
실행 결과
위 코드를 실행하면 아래와 같은 화면이 출력됩니다. 'Player' 입력 필드에 disabled 속성이 적용되어 회색으로 표시되며, 사용자가 값을 입력하거나 수정할 수 없습니다. 반면 나머지 입력 필드(Rank, Email, Reporting Time)는 정상적으로 동작합니다.
