coyojo10의 개발블로그!
<input> 태그 속성 - type="hidden" 본문
<input type="hidden">는 사용자에게는 보이지 않는 숨겨진 입력 필드이다.
hidden 속성을 정리해보면
hidden
- input 태그의 type 속성으로 지정하는 옵션
- body 영역에 숨겨져서 name 속성의 변수명으로 value의 값으로 넘겨줌
- 사용자에게 보이지 않는 숨겨진 입력 필드를 정의
- 화면에 출력은 되지 않지만, 데이터를 보낼 때 사용됨
- input 태그를 hidden 속성으로 지정하면 화면에 보이지는 않지만 value에 이미 값이 저장되어 있음
그렇다면, hidden 속성을 사용하는 이유는 무엇일까?
폼 제출(submit) 시 사용자가 변경해서는 안 되는 데이터를 함께 보낼 때 유용하게 사용된다.
예를 들면, 수정할 게시글이 데이터베이스 테이블에서 가지고 있는 Primary Key 값이 이에 해당될 수 있다.
이 값이 입력 필드에 포함되어 있어야 사용자가 다른 수정사항을 폼에 입력하여 제출할 때 ( 보이지 않아 사용자는 인지하지 못하지만) 같이 제출되는 이 Primary Key 값을 통해 DB에서 해당 레코드를 식별하여 정보를 알맞게 수정할 수 있는 것이다. 이러한 입력 필드는 앞서 말한 것처럼 업데이트 되어야 하는 데이터베이스의 레코드를 저장하거나, 고유한 보안 토큰 등을 서버로 보낼 때 주로 사용된다고 한다.
'프론트엔드' 카테고리의 다른 글
네트워크 기본 지식 (0) | 2023.01.18 |
---|---|
프론트엔드 - css 적용 방법 3가지 (0) | 2023.01.18 |
자바스크립트 내장 객체 (0) | 2022.10.01 |
자바스크립트 함수 실습 (0) | 2022.10.01 |
프론트엔드 - 자바스크립트 전역변수,지역변수 (0) | 2022.10.01 |