본문 바로가기
코딩/php

[PHP/HTML] form태그를 사용하여 다른 페이지로 값 넘겨주기 (hidden/입력 받은 값)

by 우월한하루 2022. 12. 19.
728x90
반응형

서문

홈페이지를 사용하다 보면 현재 페이지의 값들을 다른 페이지로 넘겨주어 작업하고 싶을 때가 많습니다.

예를 들면 로그인이나, id값이나, 현재 선택한 값들을 처리할 때입니다.

 

여러 가지 방법들이 있지만 먼저는 hidden을 사용하여 보이지 않게 넘겨주는 방법부터 살펴보도록 하겠습니다.


hidden을 이용하여 값 넘겨주기

hidden을 사용하면 text박스처럼 사용자에게 직접적으로 보여주지 않고, 보이지 않게 다른 페이지로 값을 넘겨줄 수 있어서 유용하게 사용이 많이 됩니다.

 

예제를 통해서 자세한 설명 하도록 하겠습니다.

 

test_page.php

<?

//php에서 변수에 값 저장
$box1 = "첫번째 박스";
$box2 = "두번째 박스";
$box3 = "세번째 박스";

?>

<html lang="kr">
	<head>
		<meta charset="euc-kr">
	</head>
	<body>
		<form name="reqForm" method="post" action="test_page2.php">
			<!-- hidden을 통해 post 방식으로 action페이지로 값 넘김-->
			<input type="hidden" name="box1" value = "<?=$box1?>">
			<input type="hidden" name="box2" value = "<?=$box2?>">
			<input type="hidden" name="box3" value = "<?=$box3?>">
			
			<div style="margin: 30px;">
				<span style="display:block">hidden 값 넘기기</span>
				<input type="submit" value="다음페이지로 ->" style="margin-top:10px;">
			</div>
		</form>
	</body>
</html>

 

php에서 먼저 변수나 값들을 지정해 줍니다.

 

그다음 form 태그 안에 method를 post로 지정해 줍니다.

action에다가 자신이 넘겨주고 싶은 페이지의 경로를 적어줍니다.

저는 같은 폴더 내의 test_page2.php 파일로 값을 넘겨주려고 합니다.

 

아래쪽에 submit 버튼을 만들어주어 submit 버튼을 클릭했을 때, form태그 안의 값들을 다음페이지로 넘겨주도록 합니다.

 

test_page.php 페이지 이미지
test_page.php 페이지 이미지

 

test_page.php의 페이지는 이런 식으로 나오게 됩니다.

다음페이지로 버튼을 누르면 다음페이지로 값을 전송하게 됩니다.

 

 

test_page2.php

<?
	//$_POST로 값을 가져옴
	$box1 = $_POST["box1"];
	$box2 = $_POST["box2"];
	$box3 = $_POST["box3"];
?>
<html>
	<body>
		<div style="font-size:30px; padding:20px;">
			<?=$box1?>
		</div>
		<div style="font-size:30px; padding:20px;">
			<?=$box2?>
		</div>
		<div style="font-size:30px; padding:20px;">
			<?=$box3?>
		</div>
	</body>
</html>

 

다음은 값을 넘겨받은 test_page2.php의 페이지입니다.

post로 넘겨줬기 때문에 값을 받을 때도 $_POST ["name"]으로 넘겨받아줘야 됩니다.

저는 hidden의 name를 box1,2,3으로 지정했기 때문에 저렇게 받아주었습니다.

 

간단하게 값들이 제대로 받아와 졌는지만 확인하기 위해 div 박스에 값들을 넣어 주었습니다.

 

위의 코딩에 대한 결과 이미지
위의 코딩에 대한 결과 이미지

 

결과 값은 이런 식으로 잘 나오는 것을 확인할 수 있습니다.

이렇게 넘겨받은 값들을 css를 통해 예쁘게 꾸며서 받아 두고 사용할 수 있겠죠.

 

입력받은 값을 넘겨주기

이번에는 직접 사용자에게 값을 입력받아보고, 그 입력받은 값들을 다음 페이지로 넘겨주도록 하겠습니다.

 

test_page.php

<html lang="kr">
	<head>
		<meta charset="euc-kr">
	</head>
	<body>
		<style>
			.block_box {
				display:block;
				margin:10px;
			}
		</style>
		<form name="reqForm" method="get" action="test_page2.php">
			<!-- hidden을 통해 post 방식으로 action페이지로 값 넘김-->
			<div style="margin: 30px;">
				<input type="text" name="text_box" value = "" placeholder="값을 입력해주세요." class="block_box"/>
				<textarea name="textarea_box" placeholder="값을 입력해주세요." class="block_box"></textarea>
				<select name="select_box" class="block_box">
					<option value="">옵션을 선택해주세요</option>
					<option value="가">가</option>
					<option value="나">나</option>
					<option value="다">다</option>
				</select>
			
				<span class="block_box">입력받은 값 넘기기</span>
				<input type="submit" value="다음페이지로 ->" style="margin-top:10px;">
			</div>
		</form>
	</body>
</html>

 

예시는 위와 같이 적었습니다.

입력받을 수 있는 종류는 3가지로 text, textarea, select 태그로 설정했습니다.

 

이번에는 POST방식이 아닌 GET 방식으로 전송해 보겠습니다.

 

 

get 방식의 결과 페이지
get 방식의 결과 페이지

 

 

결과 페이지는 이렇게 나옵니다.

 

 

값을 넣어준 상태

 

위와같이 값을 넣어주고 submit 버튼을 눌러, 다음페이지로 값을 넘겨주겠습니다.

 

test_page2.php

<?
	//$_GET로 값을 가져옴
	$box1 = $_GET["text_box"];
	$box2 = $_GET["textarea_box"];
	$box3 = $_GET["select_box"];
?>
<html>
	<body>
		<div style="font-size:30px; padding:20px;">
			<?=$box1?>
		</div>
		<div style="font-size:30px; padding:20px;">
			<?=$box2?>
		</div>
		<div style="font-size:30px; padding:20px;">
			<?=$box3?>
		</div>
	</body>
</html>

 

 

이전과 동일한 코드에 POST방식이 아닌 GET 방식이므로 값을 가져올 때 GET을 사용했습니다.

 

 

get 방식으로 넘겨줄 때 주소창에 표기되는 이미지
get 방식으로 넘겨줄 때 주소창에 표기되는 이미지

 

test_page.php에서 입력받은 값들이 잘 넘어온 것을 확인할 수 있습니다.

하지만 GET방식으로 보내주었기 때문에 주소창에 제가 입력한 값들이 다 적혀 있는 것을 확인해 볼 수 있습니다.

그냥 노출되어도 상관없는 값들, 예를 들면 네이버 검색창에 검색해도 위와 같이 주소창에 다 나옵니다.

이런 값들은 GET방식으로 전송해도 상관없지만, id나 비밀번호, 혹은 개인정보 등등,

노출되기 꺼려지는 값들은 주소창에 표시되지 않게 POST 방식으로 전송하는 것이 좋습니다.

 

다음 포스팅은 현재 코드를 활용해서 자바스크립트를 사용하여 값이 입력되었는지 아닌지 판단해서 경고창을 띄워보도록 하겠습니다.

 

728x90
반응형

댓글