Back/JSP
2장 폼 태그 활용
잘잔디
2023. 4. 9. 20:51
폼 태그
- 웹 애플리케이션을 개발하는 과정에서 많이 사용된다.
- 폼 양식을 통해 클라이언트에서 입력된 데이터는 한꺼번에 웹 서버로 전송되고 웹 서버는 JSP 웹 컨테이너에게 전송된 데이터를 전달하여 처리 의뢰한다.
회원가입 폼 만들기
Info JSP 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href = "login.css" rel = "stylesheet">
</head>
<body>
Home > Join the Membership
<hr>
<form action = "form_membership02.jsp" name = "person_info" method = "get">
<fieldset>
<legend>개인 정보 입력</legend>
아이디 : <br>
<input type="text" name = "p_id" size = "16"><br><br>
비밀번호 : <br>
<input type="password" name = "p_pw" size = "16"><br><br>
이름 : <br>
<input type="text" name = "p_name" size = "16"><br><br>
연락처 : <br>
<select name = "choice">
<option value="choice">선택</option>
<option value="KT">KT</option>
<option value="SKT">SKT</option>
<option value="LGU+">LGU+</option>
</select>
<input type="text" maxlength = "3" size = "3" name = "phone1">
<input type="text" maxlength = "4" size = "4" name = "phone2">
<input type="text" maxlength = "4" size = "4" name = "phone3"><br><br>
성별 :
<input type="radio" name = "gender" value = "남성">남
<input type="radio" name = "gender" value = "여성">여 <br><br>
취미 :
<input type="checkbox" name = "hobby" value = "운동">운동
<input type="checkbox" name = "hobby" value = "독서">독서
<input type="checkbox" name = "hobby" value = "여행">여행
<input type="checkbox" name = "hobby" value = "음악감상">음악감상
본인 소개 : <br>
<textarea name = "Introduction" cols = "50" rows = "3"></textarea>
<hr>
<div>
<input type="submit" value = "가입하기">
<input type="reset" value = "다시작성">
</div><br>
</fieldset>
</form>
</body>
</html>Info CSS 파일
fieldset{
width:330px;
}
select{
width: 60px;
height:20.5px;
}
파라미터 전송받는 form_membership02 jsp 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력한 개인 정보</title>
</head>
<body>
HOME > Personal Information Inquiry
<hr>
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("p_id");
String pw = request.getParameter("p_pw");
String name = request.getParameter("p_name");
String choice = request.getParameter("choice");
String ph01 = request.getParameter("phone1");
String ph02 = request.getParameter("phone2");
String ph03 = request.getParameter("phone3");
String sex = request.getParameter("gender");
String[] hob = request.getParameterValues("hobby");
String intro = request.getParameter("Introduction");
%>
<p> 아이디 : <%= id %>
<p> 비밀번호 : <%= pw %>
<p> 이름 : <%= name %>
<p> 연락처 : <%= choice %> <%= ph01 %>-<%= ph02 %>-<%= ph03 %>
<p> 성별 : <%= sex %>
<p> 취미 :
<%
if(hob != null)
{
for(int count = 0; count < hob.length; count++)
{
out.println(" " + hob[count]);
}
}
%>
<p> 본인 소개 : <%= intro %>
</body>
</ht
데이터 전송 방식
GET 방식과 POST 방식
- GET 방식은 URL에 다 보이기 때문에 중요하지 않은 정보만 GET 방식을 사용하는 것이 좋음.
- 폼 태그에게는 get 방식이냐 post 방식이냐 action은 무엇을 할 것인지 설정해 주는 것이 중요하다.
GET 전송 방식
- form 태그 속성에 method = “GET” 방식으로 선언
- GET 방식은 웹 서버로부터 정보를 조회하기 위해 설계된 메서드로 요청할 때
- 필요한 데이터를 Body에 담지 않고 Header만 쿼리스트링을 통해
전송 - URL 주소 끝에 ?와 함께 이름과 값으로 쌍을 이루는 요청 파라미터
를 ‘쿼리스트링’이라고 하며 - GET 전송 과정에서 요청 파라미터가 여러 개일 경우 &(앰퍼샌드)로
연결함 - EX) localhost:8080/resources?name1=value1&name2=value2
- 요청 파라미터명은 name1, name2이고 각각 파라미터는 value1, value2의 값으로 서버에 요청을 보냄
- GET 방식은 불필요한 요청을 제한하기 위해 요청에 대한 캐시를 해두며
- 웹페이지를 열어보거나 게시글을 읽는 행위 또는 조회하는 과정에서 주로 사용
POST 전송 방식
- 폼 화면에서 데이터를 전송할 때 태그 안에 method=“post” 방식으로 선언하며 리소스 생성 또는 변경하기 위해 설계됨
- GET 방식과 달리 전송 대상인 데이터를 HTTP 메시지의 Body에 담아 전송
- Body 영역 데이터 타입을 Header Content-Type에 명시해야 함
- POST 방식은 게시글 저장 또는 삭제 등 서버의 상태나 데이터를 변경시킬 때 주로 사용
- POST 방식이라고 보안성이 좋은 것이 아님 결국에 패킷을 가로채 확인해보면 body안에 다 내용이 있기 때문임.
- 결국 보안을 위해선 암호화 과정이 추가적으로 필요하다.
GET POST 방식의 장단점
- GET 방식은 Header만 이용하므로 파라미터를 전송할 때 크기에 제약이 있지만 POST 방식에 비해 메시지의 크기가 작아 전송속도가 빠르다는 장점이 있다.
- 반면 POST 방식은 Body를 통해 서버에 전송할 수 있는 데이터의 크기에 제약이 없다는 장점이 있다.
- 하지만 전송속도는 GET 방식보다 느리다는 단점 또한 존재한다.