HTML - input 태그 비활성화 readonly, disabled

닌니디자인 HTML 썸네일

 

input 태그 비활성화

input 태그는 사용자로부터 정보를 입력 받는 데 사용된다. 이 태그를 비활성화하면 사용자가 해당 입력 필드를 편집할 수 없다. 일반적으로 이 기능은 사용자가 입력을 할 필요가 없거나, 입력 필드의 사용을 제한해야 할 때 유용하다.  

 

readonly

input 태그에 readonly 속성이 존재하는 경우 입력필드가 읽기 전용임을 지정한다. 읽기 전용 입력 필드는 수정할 수 없다. 그러나 입력되어 있는 값은 form으로 전송 가능하다. 즉, 입력 및 수정은 금지되지만 필드에 이미 입력되었거나 자동으로 입력되는 값은 DB로 전달된다.

<form>
    <input type="text" readonly>
</form>

 

 

disabled

input 태그에 disabled 속성이  존재하는 경우 입력필드를 비활성화한다. 비활성화 된 요소는 사용할 수 없으며, 클릭할 수 없다. 또한 값이 입력되어있거나 자동으로 입력되더라도 form으로 전송되지 않는다. 

<form>
    <input type="text" disabled>
</form>

 

check_circle Check

disabled 은 언제 필요할까?

1. 어떤 경우에는 사용자가 특정 입력 필드를 수정하거나 값을 변경할 필요가 없을 수 있다. 예를 들어, 정보가 이미 이전에 입력되어야 하거나, 특정 조건이 충족되어야만 편집할 수 있는 경우 등이 있다.
2. 특정 정보나 설정을 사용자로부터 보호하고자 할 때, 해당 입력 필드를 비활성화할 수 있다. 예를 들어, 시스템 설정이나 관리자 권한이 필요한 설정 등을 사용자가 실수로 변경하지 않도록 방지할 수 있다.
3. 어떤 경우에는 일관된 UI를 유지하기 위해 특정 상황에서만 사용자 입력을 허용하고 다른 상황에서는 비활성화할 수 있다. 이는 사용자 경험을 향상시키고 오류를 방지하는 데 도움이 될 수 있다.
4. 특정 필드에 대한 부정확한 데이터가 제출되는 것을 방지하기 위해 중요한 입력 필드를 비활성화할 수 있다. 이는 보안 및 데이터 유효성을 강화하는 데 도움이 된다.
5. 비활성화된 필드는 스크린 리더 등의 보조 기술에게 비활성화된 상태임을 알려주어 사용자 경험을 향상시킬 수 있다.

 

 

---

 

domain_verification Source

HTML input tag