Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

coyojo10의 개발블로그!

<input> 태그 속성 - type="hidden" 본문

프론트엔드

<input> 태그 속성 - type="hidden"

coyojo 2022. 12. 12. 22:32

<input type="hidden">는 사용자에게는 보이지 않는 숨겨진 입력 필드이다.

 

hidden 속성을 정리해보면

 

hidden 


  • input 태그의 type 속성으로 지정하는 옵션
  • body 영역에 숨겨져서 name 속성의 변수명으로 value의 값으로 넘겨줌 
  • 사용자에게 보이지 않는 숨겨진 입력 필드를 정의
  • 화면에 출력은 되지 않지만, 데이터를 보낼 때 사용됨
  • input 태그를 hidden 속성으로 지정하면 화면에 보이지는 않지만 value에 이미 값이 저장되어 있음

그렇다면, hidden 속성을 사용하는 이유는 무엇일까?

폼 제출(submit) 시 사용자가 변경해서는 안 되는 데이터를 함께 보낼 때 유용하게 사용된다.

예를 들면, 수정할 게시글이 데이터베이스 테이블에서 가지고 있는 Primary Key 값이 이에 해당될 수 있다.
이 값이 입력 필드에 포함되어 있어야 사용자가 다른 수정사항을 폼에 입력하여 제출할 때 ( 보이지 않아 사용자는 인지하지 못하지만) 같이 제출되는 이 Primary Key 값을 통해 DB에서 해당 레코드를 식별하여 정보를 알맞게 수정할 수 있는 것이다. 이러한 입력 필드는 앞서 말한 것처럼 업데이트 되어야 하는 데이터베이스의 레코드를 저장하거나, 고유한 보안 토큰 등을 서버로 보낼 때 주로 사용된다고 한다.