HTML textarea disabled 속성 – 텍스트 영역 비활성화 방법과 예제

<textarea> 요소의 disabled 속성은 텍스트 영역을 비활성화할 때 사용합니다. 이 속성이 적용되면 사용자는 해당 텍스트 영역의 내용을 선택하거나 수정할 수 없으며, 입력란이 회색으로 표시되어 읽기 전용 상태임을 한눈에 알 수 있습니다.

문법(Syntax)

disabled 속성의 기본 문법은 다음과 같습니다. 별도의 값 없이 속성 이름만 작성하면 됩니다.

<textarea disabled>

예제(Example)

아래 예제는 지원자 정보 입력 폼에서 <textarea> 요소에 disabled 속성을 적용한 모습입니다. 학생 이름, 학번, 드롭다운 목록 등 다른 폼 요소들은 정상적으로 동작하지만, 안내 문구가 담긴 텍스트 영역만 비활성화되어 있습니다.

<!DOCTYPE html>
<html>
<body>
<h2>지원자 정보</h2>
학생 이름: <input type="text" value="David"><br>
학생 번호: <input type="number" value="007"><br>
<p>학력(대졸)</p>
<select>
<option value="bca">B.Tech</option>
<option value="btech">BCA</option>
<option value="bcom">B.COM</option>
<option value="bsc">B.SC</option>
<option value="bba">BBA</option>
</select>
<p>학력(대학원)</p>
<select>
<option value="mca">MCA</option>
<option value="mtech">M.Tech</option>
<option value="mcom">M.COM</option>
<option value="msc">M.SC</option>
</select><br>
<p>안내 사항:</p>
<textarea rows="5" cols="30" disabled>
위에 명시된 학위에 대한 증명서도 함께 지참해 주시기 바랍니다.
</textarea>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML textarea disabled 속성 – 텍스트 영역 비활성화 방법과 예제

코드 분석

위 예제에서는 드롭다운 목록(<select>)과 텍스트 영역(<textarea>)을 함께 구성했습니다.

<select>
<option value="mca">MCA</option>
<option value="mtech">M.Tech</option>
<option value="mcom">M.COM</option>
<option value="msc">M.SC</option>
</select><br>
<p>안내 사항:</p>
<textarea rows="5" cols="30" disabled>
위에 명시된 학위에 대한 증명서도 함께 지참해 주시기 바랍니다.
</textarea>

핵심은 <textarea> 태그에 disabled 속성을 추가한 부분입니다. 이 속성이 설정되면 방문자는 해당 텍스트 영역을 클릭하거나 편집할 수 없습니다.

<textarea rows="5" cols="30" disabled>
위에 명시된 학위에 대한 증명서도 함께 지참해 주시기 바랍니다.
</textarea>

정리 및 활용 팁

disabled vs readonly: disabled 속성은 텍스트 선택과 편집이 모두 불가능하고, 폼 제출 시 값도 전송되지 않습니다. 반면 readonly 속성은 텍스트 선택은 가능하지만 편집만 막히며, 값은 정상적으로 전송됩니다.
CSS 스타일링: 비활성화된 텍스트 영역은 브라우저 기본 스타일로 회색 배경에 표시되며, 필요하다면 CSS의 :disabled 가상 클래스로 원하는 디자인을 적용할 수 있습니다.
JavaScript 제어: 자바스크립트에서 element.disabled = true 또는 false를 사용하면 특정 조건에 따라 텍스트 영역을 동적으로 활성화하거나 비활성화할 수 있습니다.