input 태그 type에서 hidden 설명을 읽었는데 언제 사용하는 건지 궁금했다.
hidden type은
사용자가 시각적으로 보거나 직접 수정할 수 없는 값을 나타내는 숨겨진 필드이다.
라고 설명이 나온다.
사용자가 볼 수 없는데 누가 사용하는 건가?
찾아보자..
.
.
.
.
-> hidden은 개발자가 미리 정해둔 값을 숨겨서 서버로 같이 보내고 싶을 때 사용한다.
예시 상황: 상품 주문 페이지
상품명 | 색상선택 | 수량 선택
티셔츠 | 흰색, 검은색 | 1, 2, 3개
내가 '흰색 티셔츠 2개"를 골랐고, '주문하기'버튼을 눌러서 주문 정보를 서버에 보낼 예정이다.
이때 개발자 입장에서는 상품의 ID(번호)도 같이 보내고 싶어 한다.
왜냐하면 서버에서는 '티셔츠'라는 글자가 헷갈릴 수 있으므로
상품 ID 1001번 -> 흰색 티셔츠
상품 ID 1002번 -> 검은색 티셔츠
이런 식으로 데이터가 관리되고 있을 수 있다.
여기서 상품 ID 같은 정보는 사용자가 입력하거나 볼 필요가 없다.
action값은 #으로 하겠다^^
<form action ="#" method = "post"> <input type = "hidden" name = "product_id" value = "1001"> <!--색상 선택, 수량 선택--> </form>이렇게 코드를 실행하면 사용자는 '색상', '수량'만 고르고 주문하기를 누르지만 서버로는 product_id = 1001, 사용자가 선택한 색상, 수량 값이 넘어간다.
->사용자는 product_id가 넘어가는 걸 전혀 모르게 된다.
여기까지.. hidden에 대하여 알아보았다.
body 태그 안에는 화면에 보이는 부분이라고 알고 있어서 무조건 화면에 보이는 요소들만 태그가 있는 줄 알았다.
hidden 같은 태그도 존재한다는 걸 잊지 말자!