[HTML5] 히든 필드(Hidden field) 사용하는 이유

Hidden Field란?

화면의 폼에는 보이지 않지만(사용자는 볼 수 없음), 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소

 

(예제) 

히든 필드를 사용해 사용자가 사이트에서 로그인하는 정보를 서버로 넘겨줌

<input type = "hidden" value = "사이트를 통한 직접 로그인">
<label> 아이디: <input type = "text" id= "user_id"></label>
<label> 비밀번호: <input type = "password" id= "user_pw"></label>
<input type = "submit" value = "로그인">

실행하면 아래와 같이, hidden filed의 내용은 보이지 않는다.

 

아이디: 비밀번호:

 

 

하지만,, 위의 예제로는 도대체 hidden field를 왜 사용하는지 이해가 되지 않아서 찾아봤는데,,

위의 예제는 hidden field의 내용은 실제로 사용자의 눈에 보이지 않는다는걸 알려주기 위해 나온듯 하고

 

Hidden field에 대해 좀 더 정확히?자세히 말하면

사용자가 입력할 필요가 없는 정보/ 사용자가 몰라도 되는 정보,,이지만 폼 전송과 같이 전송해주어야 하는 정보를 담기 위한 것

어떤 블로그에서는 사용자가 변경해서는 안되는 데이터를 함께 보낼때 사용한다고 정의하였다

예를들면,, 회원가입 시 사용자의 아이피를 받는 경우 히든필드에 넣는 경우도 있고

또,,

어떤 정보를 수정하고자 할때, 데이터베이스 테이블에서 가지고 있는 Primary Key값을 hidden field에 같이 전송하면, 이 primary key값을 통해 DB에서 해당 레코드를 식별하여 업데이트를 쉽게 할 수 있다.

 

 

참고

https://velog.io/@gndan4/HTML-input-typehidden-%EC%96%B8%EC%A0%9C-%EC%93%B0%EC%9D%B4%EB%8A%94-%EA%B1%B8%EA%B9%8C

http://www.homejjang.com/05/HiddenField.php

http://tcpschool.com/html-input-types/hidden

https://codedragon.tistory.com/5438