36일차. HTML Form 태그와 input 그리고 JSP

Form태그는 우리가 알게 모르게 방문하고 있는 웹사이트에서 아주 많이 사용되고 있는 태그이다. 사용자가 입력한 데이터를 한번에 서버로 전송한다. 전송된 데이터는 웹 서버가 처리하고 결과에 따른 또 다른 웹페이지를 보여준다

우리가 쇼핑을 하러 쇼핑몰을 들어가거나, 어떠한 사이트에 회원가입을 할때도 다 Form 태그가 사용되어 우리 눈에 보이지 않지만(보여질때도 있지만) 데이터가 전송되고 또 그 전송된 결과에 따라 페이지가 이동되는것이다.

Form 태그의 기본 문법부터 살펴보자.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form 태그입니다.</title>
</head>
<body>
	<h1>Form 태그입니다.</h1>
	<form action="폼의 데이터를 전송할 파일위치" method="폼을 전송할 서버의 http 방식을 정한다 get or post" name="폼의 이름">
	
	
	</form>
</body>
</html>

좀더 쉽게 설명하자면 action에는 폼 형식의 html 파일에서 데이터가 입력되면 그 데이터를 "어디로 넘겨줄지" 정하는것이다. 페이지 -> 페이지 간의 이동을 설정한다고 이해하면 쉬울것이다.

Method는 get방식과 post 방식이 있는데. 데이터를 넘겨받을 ok.jsp파일을 생성해 경로를 정해주고, method를 get방식으로 먼저 살펴보겠다. 그리고 데이터를 입력할 input 태그도 이용하여 틀을 생성해보겠다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form 태그입니다.</title>
</head>
<body>
	<h1>Form 태그입니다.</h1>
	<form action="ok.jsp" method="get" name="name" id="name" target="_blank">
		입력란:<input type="text" name="test" id="test"/>
		<input type="submit" name="name" value="확인"/>
	</form>
</body>
</html>

Form 태그입니다.

데이터를 입력하는 Form 태그 부분을 완성했으니 데이터를 받을 ok.jsp 파일도 만들어주었다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여기는 데이터를 받는 page</title>
</head>
<body>
	<h1>데이터를 받는 ok.jsp page</h1>
</body>
</html>

input type = "text" 는 보이는것과 같이 text를 입력할수 있는 text bar를 생성해준다. 그리고 type submit은 입력받은 값을 받아 submit 버튼을 누르면 form 태그의 action이 실행되어 입력받은 값을 가지고 ok.jsp로 이동된다.

이제 확인을 눌러보면

JSP 파일로 정상적으로 이동한것을 확인할수 있다. 자 여기서 주소표시줄을 보자

ok.jsp? 하고 물음표 뒤에 test = 중요한건꺾이지않는마음, name=확인 이라는 parameter 값이 전송되었다.

이렇게 사용자가 입력한 값을 주소표시줄에 나타내주는것을 Form태그의 method "get" 방식이다. 따라서 비밀번호같은 민감한 정보를 페이지와 페이지로 넘겨줄때는 get방식이 아닌 post 방식으로 method를 설정해줘야한다.

보통 개발자들이 개발할때 get방식을 많이 이용한다.(데이터의 이동을 보기 원할하기때문에), 하지만 상용화나 개발 완성 단계에서 구동이 잘 되는지 테스트를 마쳤다면 get방식으로 작성된것도 post로 변경을 많이 한다.

사용자가 입력한값을 노출해서는 좋지 않기 때문이다.

input 태그의 속성들에 대해서는 상당히 다뤄야할 내용이 많기때문에 이부분만 별도로 다뤄 HTML 카테고리에서 별도로 포스팅 할 예정이다.

이제 데이터가 넘어가는것을 알았으니. 이 넘어온 데이터를 화면에 출력해주기 위해서 jsp파일에 java코드를 이용하여 변수를 선언해주고 이를 출력해보는것을 알아보겠다.

Form 태그 파일을 살짝 수정하여 ID와 PASSWORD 입력값을 ok.jsp 파일에서 넘겨받아, 화면에 출력해주는 코드를 작성해보겠다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form 태그입니다.</title>
</head>
<body>
	<h1>Form 태그입니다.</h1>
	<form action="ok.jsp" method="get" name="name" id="name" target="_blank">
		아이디:<input type="text" name="id" id="id" autofocus="autofocus" size="10" maxlength="10" placeholder="Id"/>
			<br/>
		비밀번호:<input type="password" name="pwd" id="pwd" required="required" placeholder="PWD"/>
		<input type="submit" value="확인"/>
	</form>
</body>
</html>

Form 태그입니다.

위와같이 코드를 작성해주었다. input 태그에 사용한 속성값에 대해서 간단하게 설명해보자면

autofocus - 커서를 자동으로 아이디 input 태그에서 시작되게 한다.
size - text bar의 size
maxlength - 최대글자길이
placeholder - 예시 문구? 라고 생각하면 될거같다. text bar의 반투명의 예시문구를 넣어주고, 클릭하거나 실제 값을 입력하면 이 문구는 사라진다.
required - 필수값으로 입력을 해야만 하는 SQL에서 Not Null과 같은 속성이다.

다음은 이제 데이터를 받아주는 JSP파일에서 Java 코드를 이용하여 데이터를 받아줄것이다.

JSP는 기본적으로 HTML문서에 JAVA 소스코드를 이용하는것이기때문에 Java 문법을 작성할때는

<% %>로 열고 닫으면서 그 안에 Java 코드를 입력해야한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여기는 데이터를 받는 page</title>
</head>
<body>
	<h1>데이터를 받는 ok.jsp page</h1>
	
	<%String id = request.getParameter("id");
   	  String pwd = request.getParameter("pwd");%>
   	  
   	  입력한 아이디:<%=id %><br/>
   	  입력한 비번:<%=pwd %>
</body>
</html>

HTML 문서는 숫자를 입력한다고 숫자타입 데이터를 전송하는게 아니다. 다 문자열로 전송하기때문에 당연히 Java에서 문자열을 의미하는 String 타입의 변수를 선언해준다. 그리고 Request.getParameter를 이용하여 parameter로 넘겨받은 ID와 값을 parameter의 id를 이용하여 String 타입의 변수에 담아준다.

좀전에 데이터를 넘겨주기위해서 TEST 했던 화면에서 주소표시줄을 보면 test가 parameter의 id인거고 그 뒤에 오는 문자열이 해당 parameter의 값(value)가 되는것이다.

따라서 변수에 parameter의 id를 이용하여 value를 변수에 대입시키는것이고.

그 변수를 <%= 를 이용하여 출력해주었다. 여기서 유의할점은 보통 Java에서는 코드 한 문장의 끝을 ; 로 마침처리해주는데 여기서 <%=에는 ;을 사용하지 않는다는것을 주의하자.

jsp 파일의 결과물이다. 주소표시줄에 id는 deft / pwd는 deftzzang으로 넘어왔고

이를 화면에서도 똑같이 보여주는것을 확인할수 있다.

이렇게 parameter와 parameter의 값을 서버로 전송하여 이동된 page에서 별도로 처리해주고 하는 방식을 앞으로는 jsp에서 수없이 다룰 예정이다.

저작자표시 비영리 변경금지

'Study > 중앙정보처리학원과정' 카테고리의 다른 글

38일차. JSP Output, 변수선언(variable) (0)	2022.12.18
37일차. JSP getParameterValues, getParameterNames, getParameterMap (0)	2022.12.15
35일차. JSP를 위한 이클립스(Eclipse) Enterprise 와 Tomcat 9설치 (0)	2022.12.13
34일차. HTML 이미지 삽입(img src) 그리고 링크삽입(a href) (0)	2022.12.11
33일차. HTML 그리고 Visual Studio Code 설치 (0)	2022.12.09