Input type text의 속성 readonly와 disabled의 사용법 그리고 차이점

 

웹개발을 하다보면 View 단에서 <form> 태그를 사용하게 된다. 일일히 사용자의 입력 데이터를 하나하나 넘기지않고, form 태그 안에서의 사용자의 입력값들은 사용자가 submit(확인) 버튼을 누르는 순간 개발자가 정해놓은 Method 타입에 따라 Get 방식이나 Post 방식으로 Controller 클래스로 전송되게 된다.

 

<form action="<%=request.getContextPath()%>/practice/select" method="post">
		<table border="1">
			<tr>
				<td>상품코드</td>
				<td>
					<input type="text" name="product_code" readonly="readonly" id="product_code"/>
				</td>
			</tr>
			<tr>
				<td>상품명</td>
				<td><input type="text" name="product_name" id="product_name"/></td>
			</tr>
			<tr>
				<td>제조사명</td>
				<td><input type="text" name="manufacturer" id="manufacturer"/></td>
			</tr>
			<tr>
				<td>단위명</td>
				<td><input type="text" name="unit_name" id="unit_name"/></td>
			</tr>
			<tr>
				<td>입고수량</td>
				<td><input type="text" name="stock_quantity" id="stock_quantity"/></td>
			</tr>
		</table>
		<br/>
		<button type="submit">수정</button>

 

이 <form> 태그 안에서 상품코드는 reanonly 속성을 지니고 있다.

사용자에게 노출이될뿐, 사용자가 임의로 수정할수 없게 수정동작을 방지하고자 readonly로 설정을 해두었다

 

 

상품코드
상품명
제조사명
단위명
입고수량

 

반응형

 

사용자가 표출된 Text의 값을 수정할수없게 하는 방법엔 크게 2가지가 있는데 바로 readonly와 disabled이다.

 

이 두 속성의 공통점은 사용자가 text 필드를 조작할수 없게 방지해주는것인데. 차이점때문에 두가지의 사용법이 완전히 갈린다.

 

차이점이란 바로 form에서 submit으로 Parameter 값들을 컨트롤러로 전달할때

 

readonly는 값이 넘어가는 반면, disabled는 값이 넘어가지 않는다는것이다.

 

이는 엄청난 차이라고 생각된다. 보통 parameter 값을 전달하기 위해서 form 태그 안에 각종 input type의 여러 태그들을 사용해서 넘기는데 ( 회원가입 폼을 생각해보면 좋다 ) 

 

사용자에게 필드를 수정할수 없게 블러 처리 해주는것은 좋지만 값이 넘어가지 않는 disabled 같은 경우에는 별도의 hidden 태그를 추가로 이용해주어야 한다는 불편함이 있다.

 

그리고 다른 차이점이란 바로 심미적인 요소이다.

 

 

 

시각적으로 표시될때 disabled는 필드가 어두운 배경으로 표시가 되는 반면, readonly는 필드에 아무 변화가 없다.

 

다만 사용자가 필드를 수정할수 없도록 클릭이나 마우스 입력이 먹히지 않을뿐이다. 따라서 심미적으로 사용자에게 혼란을 줄수도 있다.

 

이를 CSS 적인 요소로 접근하여 readonly 속성을 지닌 태그를 disabled처럼 보여주게 적용할수도 있다.

 

<style>
input[readonly] {
	background-color: #f2f2f2;
  	color: #b3b3b3;
  	cursor: not-allowed;
}
input[readonly]:hover {
 	 box-shadow: none;
}
</style>


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

 

 

 

이런식으로 마치 disabled 처리 된것처럼 꾸며 사용자에게 보여줄수도 있다.

 

이러한 차이점으로 readonly와 disabled의 쓰임새가 달라지니 알고 있는 만큼 오류를 줄일수 있는 요소들이 된다고 생각한다.