disabled 속성
disabled 속성은 HTML
폼 요소를
비활성화합니다, 즉 동작하지 않도록 만듭니다.
값 없는 속성입니다.
요소를 비활성화하는 것은 일반적으로 사용자가 일부 값을 변경하는 것을 금지하기 위해 필요합니다 (그러나 여전히 폼 요소의 형태로 사용자에게 표시되어야 하는 값들). 때로는 JavaScript를 사용하여 요소를 비활성화(및 활성화)합니다.
동작
버튼(button
또는 input
의 type 속성값이 button,
reset 또는 submit인 경우)의 비활성화는
버튼을 클릭할 수 없음을 의미합니다.
텍스트 입력 필드(input
또는 textarea)의 경우
텍스트를 변경하거나 복사할 수 없게 됩니다.
체크박스와
라디오 버튼의 경우
그 상태(선택됨 또는 선택 안 됨)를 변경할 수 없습니다.
드롭다운 목록 select의 경우
선택된 목록 항목을 변경할 수 없습니다.
비활성화된 요소는 기본적으로 회색 배경을 가집니다. 또한 Tab 키를 이용한 이동에 참여하지 않습니다.
예시 . 비활성화된 버튼
disabled 속성을 사용하여 버튼을 비활성화해 봅시다.
비교를 위해 옆에 비활성화되지 않은 버튼 예시를 둡니다
(클릭해 보세요):
<button disabled>text</button>
<button>text</button>
:
예시 . 비활성화된 체크박스
이제 비활성화된 체크박스를 살펴봅시다. 비교를 위해 옆에 비활성화되지 않은 체크박스 예시를 봅니다:
<input type="checkbox" disabled>
<input type="checkbox">
:
예시 . 비활성화되고 선택된 체크박스
checked 속성을 사용하여
선택된 상태로 비활성화된 체크박스가 어떻게 보이는지 살펴봅시다.
비교를 위해 옆에 비활성화되지 않은 선택된 체크박스 예시를 참조합니다:
<input type="checkbox" disabled checked>
<input type="checkbox" checked>
:
예시 . 비활성화된 텍스트 입력 필드
이제 입력 필드를 비활성화해 봅시다. 비교를 위해 옆에 비활성화되지 않은 입력 필드 예시를 봅니다:
<input type="text" value="text" disabled>
<input type="text" value="text">
:
예시 . 비활성화된 텍스트 영역
여기서는 비활성화된 텍스트 영역을 볼 수 있습니다 (비활성화된 textarea의 크기를 조정할 수 있다는 점에 유의하세요). 비교를 위해 옆에 비활성화되지 않은 텍스트 영역 예시를 참조합니다:
<textarea disabled>text</textarea>
<textarea>text</textarea>
:
예시 . 비활성화된 드롭다운 목록
비활성화된
select가 어떻게 동작하는지 살펴봅시다.
비교를 위해 옆에 비활성화되지 않은 드롭다운 목록 예시를 봅니다:
<select disabled>
<option>city1</option>
<option selected>city2</option>
<option>city3</option>
<option>city4</option>
</select>
<select>
<option>city1</option>
<option selected>city2</option>
<option>city3</option>
<option>city4</option>
</select>
:
