본문 바로가기
개발/HTML

input disabled와 readOnly 차이

by 안뇽! 2022. 8. 1.
반응형

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 연습</title>
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="reset.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
  </head>
  <body>
    <form id="form">
    <!-- disabled : value가 form 값에 포함 안된다. -->
    <input name="disabled" disabled value="disabled"/>
    <!-- readOnly : value가 form 값에 포함 된다. -->
    <input name="readOnly" readonly value="readOnly"/>
    <button>전송</button>
  </button>
  <div id="result"></div>
</body>
</html>

둘 다 input안의 값을 변경할 수 없으므로 차이가 없어보인다.

 

하지만 차이점이 있다!

  • disabled는 '사용 불가' 상태이므로 form값에 value가 포함되지 않는다.
  • readOnly는 '읽기만 가능' 상태이다. form값에 value가 포함된다.

참고자료

반응형

'개발 > HTML' 카테고리의 다른 글

HTML이 가지는 의미 : 시맨틱태그  (0) 2023.01.20
pre태그  (0) 2022.09.26
<input type = file> 에서 동일한 파일 재업로드 하기  (0) 2022.07.11
html , 이메일 링크 작성하기  (0) 2022.05.26
SEO에 효율적인 HTML작성법  (0) 2022.02.25