HTML에서 입력 요소를 읽기 전용으로 만들려면 readonly 속성을 사용하면 됩니다. 이 속성이 지정된 필드는 사용자가 값을 수정할 수 없지만, 화면에는 그대로 표시되고 폼 제출 시에도 값이 함께 전송됩니다.
아래 예제 코드를 실행하여 readonly 속성의 동작을 직접 확인해 보세요.
예제
<!DOCTYPE html> <html> <body> <h2>로그인</h2> <form action = "/new.php"> <input type = "text" value = "Amit" name = "sname" readonly/><br> <input type = "password" name = "password"> <br><br> <input type = "submit" value = "Submit"> </form> </body> </html>
참고 사항
위 예제에서 이름(name) 입력 필드에는 readonly 속성이 적용되어 있어 사용자가 내용을 편집할 수 없습니다. 반면 비밀번호 필드는 일반적으로 입력 가능한 상태로 유지됩니다.
readonly와 disabled의 차이도 알아두면 좋습니다. readonly는 값이 폼과 함께 전송되지만, disabled는 요소 자체가 비활성화되어 값이 전송되지 않습니다. 따라서 사용자에게는 보여주되 수정은 허용하지 않으려면 readonly를 사용하는 것이 적합합니다.