[attribute] HTML - readonly 속성 - 읽기전용 설정 (= readonly속성 = 리드온리속성) ※ (읽기만 가능 / 쓰기는 불가) 지정

1. readonly 예제 - <input> 경우
2. readonly 정의
3. readonly 구문
4. readonly 예제 - <textarea> 경우

readonly 예제 - <input> 경우

 

<form action="/action_page.php">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name"><br>

  <label for="site">사이트:</label>  

  <input type="text" id="site" name="site" value="Homzzang.com" readonly><br><br>

  <input type="submit" value="확인">

</form>

 

결과보기

readonly 정의

 

읽기 전용 설정하는 참거짓 속성.

 

---

 

1. readonly 속성 사용 가능 태그 종류

<input>, <textarea>

 

2.

• readonly 지정 시 읽기만 가능하고 글쓰기나 수정은 안 됨. (단, Tab이동, 하이라이트, 내용복사 등은 가능함.)
• JS 이용해 일정 조건(예: 체크박스 체크) 충족 전까지는 쓰기 막았다가, 조건 충족 시 글쓰기 허용 가능.
• CSS 경우,  :read-only 선택자 이용해 읽기전용요소 선택.

 

3.

주요 브라우저 모두 지원.

 

4. MDN readonly 예제보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly

 

readonly 구문

 

• <input readonly>
• <textarea readonly>...</textarea>

 

---

[속성값]

 

없음.

 

readonly 예제 - <textarea> 경우

 

<textarea rows="4" cols="50" readonly>

홈짱닷컴 Homzzang.com 홈페이지 제작관리강의

</textarea>

 

결과보기