[JSP] form태그 이용해서 페이지 이동 (1)

728x90

기본적으로 다른 페이지로 데이터를 전달하는 방식은 크게 두 가지가 있다.

1. a태그 사용하는 방법
2. form 태그를 사용하는 방법

이번엔 form태그를 이용하여 다른 페이지에 데이터를 전달하는 방식을 공부해보았다.

form 태그를 사용할 때에는 반드시 <form ~~ > </form> 안에 출력할 내용을 위치시켜야 한다.
form 태그를 통해 페이지를 이동하면 필요한 데이터를 가져갈 수 있다.

아래 코드를 통해 input으로 받아온 값들을 다른 페이지에 데이터를 전달받는 방법을 구현해보았다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="result2.jsp" method="post"> 
    <table>
        <tr>
            <td>아이디  <br></td>
            <td><input type="text" name="id"></td>
        </tr>
        <tr>
            <td>비밀번호</td>
            <td><input type="password" name="pw"> </td>
        </tr>
        <tr>
            <td>이름</td>
            <td><input type="text" name="name"> </td>
        </tr>
        <tr>
            <td>연락처</td>
            <td> <br></td>
        </tr>
        <tr>
            <td>이메일</td>
            <td><input type="email" name="email"></td>
        </tr>
        <tr>
            <td>생일</td>
            <td><input type="date" name="date"></td>
        </tr>
        
        <tr>
            <td></td> 
            <td><input type="submit" value ="로그인"></td>
        </tr>
    </table>
    두 수의 합 <br>
    첫 번째 수 : <input type="date" name="one"> <br>
    두 번째 수 : <input type="text" name="two"> <br>
</form>
</body>
</html>
Colored by Color Scripter
cs

submit 버튼을 클릭하면 form 태그의 action 속성의 값으로 페이지가 이동하게 된다.

form 태그 안에 만들어진 input 태그의 (Value)값을 가져간다.

전달되는 데이터를 구분하는 방법은 input태그 안의 name 속성 값으로 구분할 수 있다.

10번째 줄의 form 태그 끝에 있는 method="get"으로 입력 받게 되면, 주소창에 정보들이 노출된다.

따라서 method="post"와 같은 방법으로 감춰줄 수 있다.

이전 servlet에 포스팅한 내용에서 doGet과 doPost 두개가 있다는걸 알아보았다.

일단 doGet과 doPost의 관계는 잘 모르지만, method는 무조건 post로 받도록 하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
    String id = request.getParameter("id");
    String pw = request.getParameter("pw");
    String name = request.getParameter("name");
    String email = request.getParameter("email");
    String date = request.getParameter("date");
    
    int one = Integer.parseInt(request.getParameter("one"));
    int two = Integer.parseInt(request.getParameter("two"));
    
%>
 
<%=id%> <br>
<%=pw%> <br>
<%=name%> <br>
<%=email%> <br>
<%=date%> <br>
 
<%=one+two %>
</body>
</html>
Colored by Color Scripter
cs

위와 같이 form action이 result2.jsp 파일에서 불러온 값들을 정의 해주었다.

<% %> 안에 Java 문법을 적어주었고,

<%= %> 안에 출력될 데이터들을 적어주어서 결과물이 실행됬다.

*input 태그에 필수 입력값은 required를 줄 수 있다.

이와 같은 방법으로 자바스크립트에서 정말 중요한 form태그에 대해서 공부해보았다.
회원 가입 폼을 더 이쁘게 꾸며서 위와 같은 방법으로 정보를 받아
입력한 정보가 맞다면 로그인 할 수 있도록 더 공부를 해보려고한다.

728x90

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

'✨ Back-end > JSP' 카테고리의 다른 글

[JSP] 스크립트 기반 태그 5가지 (스크립트릿, 표현식, 선언문, 지시자, 주석문) (0)	2023.08.13
[JSP] 기본객체(Page, Request, Session, Application), 서블릿 스코프(Scope) (0)	2023.08.09
[JSP] 한글 깨짐 현상 에러 해결하기 (0)	2023.02.18
[JSP] form태그 이용해서 페이지 이동 (2) (0)	2023.02.10
[JSP] JSP 기초 - 오징어 문법 - (0)	2023.02.10