💡 새로 알게 된 것

HTML에서 폼 요소(input, textarea 등)의 상태를 제어할 때 자주 사용하는 두 가지 속성, readonly와 disabled의 차이점에 대해 알아보겠습니다. 두 속성 모두 사용자가 값을 수정하거나 입력하지 못하도록 제한하는 데 사용되지만, 동작 방식과 의미에는 분명한 차이가 있습니다. 이를 쉽게 이해할 수 있도록 비교하여 정리해 보겠습니다.

1. readonly 속성

• 설명

  readonly는 입력 필드의 값을 읽기 전용(수정 불가) 상태로 만듭니다. 사용자는 필드의 값을 수정할 수 없지만, 선택하거나 복사할 수 있습니다.

  또한, 폼을 제출할 때 해당 필드의 데이터는 서버로 전송됩니다.

• 적용 대상

  readonly는 **텍스트 입력 필드(input[type="text"], textarea)**에서만 사용할 수 있습니다.

• 특징

  • 값 수정 불가: 사용자가 값을 입력하거나 변경할 수 없습니다.
  • 폼 제출 가능: 값은 제출 폼 데이터에 포함됩니다.
  • 선택 가능: 사용자가 내용을 복사할 수 있습니다.
  • 시각적 변화 없음: 기본적으로 일반 입력 필드처럼 보입니다.

• 예제

  <label for="readonlyInput">회원 ID:</label>
  <input type="text" id="readonlyInput" value="sseulnim" readonly>
  

  • 사용자는 "sseulnim" 값을 수정할 수 없지만, 선택하거나 복사할 수 있습니다.
  • 폼 제출 시, 해당 값이 서버로 전송됩니다.

2. disabled 속성

• 설명

  disabled는 입력 필드를 완전히 비활성화합니다. 사용자는 필드와 어떤 상호작용도 할 수 없으며, 폼을 제출할 때 해당 필드의 데이터는 서버로 전송되지 않습니다.

• 적용 대상

  disabled는 모든 폼 요소에서 사용할 수 있습니다. (예: input, textarea, select, button 등)

• 특징

  • 값 수정 불가: 사용자가 값을 입력하거나 변경할 수 없습니다.
  • 폼 제출 불가: 데이터는 폼 제출 시 제외됩니다.
  • 선택 불가: 사용자가 내용을 선택하거나 복사할 수 없습니다.
  • 시각적 변화 있음: 브라우저에서 기본적으로 필드를 흐릿하게 표시(비활성화 상태로 표시).

• 예제

  <label for="disabledInput">회원 ID:</label>
  <input type="text" id="disabledInput" value="sseulnim" disabled>
  

  • 사용자는 "sseulnim" 값을 수정하거나 선택할 수 없으며, 폼 제출 시 이 값은 전송되지 않습니다.

3. readonly와 disabled 비교

4. 언제 사용해야 할까?

readonly를 사용하는 경우

• 데이터를 수정할 필요는 없지만, 사용자가 내용을 읽고 복사할 수 있도록 허용해야 하는 경우.