04. JSP, form (form 관련 속성, 전송방식, 컨트롤 요소)
○ <form> 관련 다양한 속성들
- 사용자가 입력한 정보를 서버로 전송하기 위한 양식
- name : 폼이름, 서버에서 식별하기 위한 이름
- id : 폼아이디, Frontend단에서 식별자로 주로 사용
- method : 폼 전송방식, get | post 방식, 생략시 기본은 get
- action : 사용자가 요청한 정보를 서버가 받아서 처리할 결과 페이지
- enctype : 폼에서 파일을 첨부해서 서버로 전송하고자 할 때 "multipart/form-data" 추가
- 참고 : HTML 폼 관련 태그들
○ 폼 전송방식 (method)
① method=get 방식
- 생략했을 때 기본값
- 사용자가 입력 요청한 정보가 URL 그대로 노출
- 한글 안 깨짐
- ok.jsp?서버로전송되는값들
형식) 요청페이지명(또는 명령어)?변수=값&변수=값&변수=값
예) 06_ok.jsp?uname=john&kor=20&eng=100&mat=50
- 검색어 등에 사용
② method=post 방식
- 사용자가 입력 요청한 정보가 URL에 노출되지 않고 패키지화 되어서 서버로 전송
- 한글 깨짐
- 비밀번호, 주민번호, 계좌번호 등에 사용
○ form
① form.jsp : 사용자에게 값을 입력받을 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form.jsp</title>
</head>
<body>
<h3>* 성적 입력 *</h3>
<form name="sungjukfrm" id="sungjukfrm" method="post" action="ok.jsp">
이름:
<input type="text" name="uname" id="uname" size="10" maxlength="20" required>
<hr>
국어:
<input type="number" name="kor" id="kor" size="5" min="0" max="100">
<hr>
영어:
<input type="number" name="eng" id="eng" size="5" min="0" max="100">
<hr>
수학:
<input type="number" name="mat" id="mat" size="5" min="0" max="100">
<hr>
<input type="submit" value="전송">
<input type="reset" value="취소">
</form>
</body>
</html>
② ok.jsp : 사용자가 입력한 값을 받아 처리할 페이지
- request 내부객체 :
- request.getParameter("") 메소드 : 사용자가 입력한 정보를 개별적으로 가져올 때 (return값 String)
예) <input type="text" name="uname">
request.getParameter("uname");
- post방식 일때는 한글이 깨지므로 인코딩 필요함 : request.setCharacterEncoding("UTF-8"); → 조합형
request.setCharacterEncoding("EUC-KR"); → 완성형
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>06_ok.jsp</title>
</head>
<body>
<%
//한글 인코딩
request.setCharacterEncoding("UTF-8"); //조합형
//사용자가 입력 요청한 정보를 개별적으로 가져오기
String uname=request.getParameter("uname").trim();
int kor=Integer.parseInt(request.getParameter("kor").trim());
int eng=Integer.parseInt(request.getParameter("eng").trim());
int mat=Integer.parseInt(request.getParameter("mat").trim());
int aver=(kor+eng+mat)/3;
%>
<!-- 성적결과 테이블에 출력 -->
<div class="container">
<table class="table">
<tr>
<th class="info">이름</th>
<td><%=uname%></td>
</tr>
<tr>
<th class="info">국어</th>
<td><%=kor%></td>
</tr>
<tr>
<th class="info">영어</th>
<td><%=eng%></td>
</tr>
<tr>
<th class="info">수학</th>
<td><%=mat%></td>
</tr>
<tr>
<th class="info">평균</th>
<td><%=aver%></td>
</tr>
</table>
</div>
</body>
</html>
○ 다양한 컨트롤 요소들
- 입력페이지
<form method="post" action="08_ok.jsp">
아이디 : <input type="text" name="uid">
<hr>
비번 : <input type="password" name="upw">
<hr>
이름 : <input type="text" name="uname">
<hr>
내용 : <textarea rows="5" cols="20" name="content"></textarea>
<hr>
숫자1 : <input type="text" name="num"><br>
숫자2 : <input type="text" name="num"><br>
숫자3 : <input type="text" name="num"><br>
<hr>
성별 : <input type="radio" name="gender" value="M">남
<input type="radio" name="gender" value="F">여
<hr>
약관동의 : <input type="checkbox" name="agree" value="Y">
<hr>
SMS : <input type="checkbox" name="sms">
<hr>
통신회사 : <select name="telecom">
<option value="sk">SK
<option value="kt">KT
<option value="lg">LG U+
</select>
<!-- 폼컨트롤요소이지만 본문에 출력은 안되는 요소 -->
<input type="hidden" name="page" value="5">
<hr>
<!-- 파일을 첨부해서 서버에 전송하려면
<form enctype="multipart/form-data"> 속성을 추가해야 함 -->
첨부파일 : <input type="file" name="attach">
<hr>
<input type="submit" value="전송">
</form>
- 결과페이지
<%
request.setCharacterEncoding("UTF-8");
String uid = request.getParameter("uid").trim();
String upw = request.getParameter("upw").trim();
String uname = request.getParameter("uname").trim();
String content = request.getParameter("content").trim();
out.print(uid + "<hr>");
out.print(upw + "<hr>");
out.print(uname + "<hr>");
out.print(content + "<hr>");
//<textarea>값은 enter를 <br>치환해서 출력
content=content.replace("\n", "<br>");
out.print(content + "<hr>");
//name이 동일한 값을 request객체에서 가져오기
String[] num=request.getParameterValues("num");
for(int i=0; i<num.length; i++){
out.print(num[i] + "<br>");
}//for end
//
out.print("<hr>");
out.print("성별 : " + request.getParameter("gender"));
//<input type="checkbox" name="agree" value="Y">
//체크를 하면 Y, 체크하지 않으면 null
out.print("<hr>");
out.print("약관동의 : " + request.getParameter("agree"));
if(request.getParameter("agree")==null){
out.print("약관 동의하지 않음");
}else{
out.print("약관 동의함");
}
//type="radio" 또는 type="checkbox"에 value가 없는 경우
//체크를 하면 on, 체크하지 않으면 null
out.print("<hr>");
out.print("SMS : " + request.getParameter("sms"));
out.print("<hr>");
out.print("통신회사 : " + request.getParameter("telecom"));
out.print("<hr>");
out.print("페이지 : " + request.getParameter("page"));
out.print("<hr>");
out.print("첨부파일 : " + request.getParameter("attach"));
/*
첨부된 파일을 가려오려면 다른 방식으로 request객체에 접근해야 한다
request.getParameter("attach")는 실제 파일을 가지고 있는 것이 아니라
단순 파일명이 출력됐을 뿐이다
*/
%>