폼(form)
◎ 사용자가 웹 브라우저를 통해 입력된 모든 데이터를 한 번에 웹 서버로 전송하는 양식
- 전송한 데이터는 웹 서버가 처리하고 처리 결과에 따라 다른 웹 페이지를 보여줌
◎ 사용자와 웹 애플리케이션이 상호 작용하는 중요한 기술 중 하나
◎ 사용자가 어떤 내용을 원하는지, 사용자의 요구 사항이 무엇인지 파악할 때 가장 많이 사용하는 웹 애플리케이션의
필수적인 요소
폼 데이터 처리 과정
폼을 구성하는 태그의 종류
form 태그
- 사용자가 다양한 정보를 입력하고 서로 전달할 때 사용하는 태그
- 단독으로 쓰이지 않고 사용자가 다양한 정보를 입력하는 양식을 포함하는 최상위 태그
- 속성을 이용하여 폼 데이터를 전송할 때 어디로 보낼지, 어떤 방식으로 보낼지 설정
- form 태그의 모든 속성은 필수가 아니라 선택적으로 사용
input 태그
- 사용자가 텍스트 입력이나 선택 등을 다양하게 할 수 있도록 공간을 만드는 태그
- 종료 태그 없이 단독으로 사용할 수 있음
select 태그
- 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그
- 시작 태그와 종료 태그가 있으며, 리스트 박스에 여러 항목을 추가 삽입하기 위해 반드시 option 태그를 포함해야 함
* select 태그의 속성
* option 태그의 속성
textarea 태그
- 여러 줄의 텍스트를 입력할 수 있는 태그
- 기본 값은<textarea>와 </textarea> 태그 사이에 설정
- 입력 폼 안에 사용된 태그와 띄어쓰기가 그대로 출력됨
textarea 태그의 속성
요청 파라미터의 값 받기
request 내장 객체는 웹 브라우저가 서버로 보낸 요청에 대한 다양한 정보를 담고 있어 getParameter( ) 메소드를 이용하여 요청 파라미터의 값을 얻을 수 있음
요청 파라미터의 전체 값 받기
- 요청 파라미터를 설정하지 않아도 모든 값을 전달받을 수 있음
- 텍스트 박스, 라디오 버튼, 드롭다운 박스와 같은 다양한 유형에 대해 한 번에 폼 데이터를 전달받을 수 있음
폼 데이터의 일괄 처리 메소드
예제 1
더보기
form01.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<title>Form Processing</title>
<script type="text/javascript">
//document 내의 모든 요소가 로딩된 후에 실행
//하나에 jsp 하나의 $(function())만 존재
$(function(){
console.log("개똥이");
//셀렉터
$("#btnAuto").on("click",function(){
$("input[name='id']").val("a001");
$("input[name='passwd']").val("java");
$("input[name='name']").val("개똥이");
$("input[name='phone1']").val("010");
$("input[name='phone2']").val("1111");
$("input[name='phone3']").val("2222");
$("textarea[name='comment']").val("안녕하세요?\n개똥이 잘 부탁드립니다.");
})
})
</script>
</head>
<body>
<h3>회원 가입</h3>
<!--
요청URI : form01_process.jsp
요청파라미터 :{id=a001,passwd=java,name=개똥이,phone1=010,phone2=1111,phone3=2222,
gender=여성,hobby=reading,movie}
요청방식 : post
-->
<form action="form01_process.jsp" name="member" method="post">
<p>
아이디 : <input type="text" name="id"/>
<input type="button" value="아이디 중복 검사"/>
</p>
<p>
비밀번호 : <input type="password" name="passwd"/>
</p>
<p>
이름 : <input type="text" name="name"/>
</p>
<p>
<!-- maxlength : 최대 4글자까지 가능, size : 4정도의 크기 -->
<!--
select 태그 : 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그
disabled : 항목을 비활성화
selected : 미리 선택됨
-->
연락처 :
<select name="phone1">
<option value="" disabled selected>선택해주세요</option>
<option vlaue="010">010</option>
<option vlaue="042">042</option>
<option vlaue="02">02</option>
</select>
- <input type="text" maxlength ="4" size="4" name="phone2"/>
- <input type="text" maxlength ="4" size="4" name="phone3"/>
</p>
<p>
성별 : <input type="radio" name="gender" value="남성" checked />남성
<input type="radio" name="gender" value="여성" checked />여성
</p>
<p>
취미 : 독서<input type="checkbox" name="hobby" value="reading" checked/>
운동<input type="checkbox" name="hobby" value="exercise" />
영화<input type="checkbox" name="hobby" value="movie" />
</p>
<p>
최애 음식 : <select name="food">
<optgroup label="한식">
<option value="baekban">태평소 국밥</option>
<option value="kimchi">변동 김치찜</option>
</optgroup>
<optgroup label="중식">
<option value="jajang">홍콩반점</option>
<option value="jjampong">소림반점</option>
</optgroup>
<optgroup label="양식">
<option value="steak">아웃백</option>
<option value="spagetti">빕스</option>
</optgroup>
</select>
</p>
<p>
<!-- 여러줄을 입력. cols="열의 수" rows="행의 수" -->
<textarea name="comment" rows="3" cols="30" placeholder="가입 인사말"></textarea>
</p>
<p>
<input type="submit" value="가입하기"/>
<input type="reset" value="다시 쓰기"/>
<input type="button" id="btnAuto" value="자동 입력"/>
</p>
</form>
</body>
</html>
form01_process.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!--
요청URI : form01_process.jsp
요청파라미터 :{id=a001,passwd=java,name=개똥이,phone1=010,phone2=1111,phone3=2222,
gender=여성,hobby=reading,movie}
요청방식 : post
-->
<%! //선언문
//전역 메소드
String engToKor(String eng){
String kor ="";
switch(eng){
case "baekban": kor="백반"; break;
case "kimchi" : kor="김치찌개"; break;
case "jajang" : kor="홍콩반점"; break;
case "jjampong" : kor="소림반점"; break;
case "steak" : kor="아웃백"; break;
case "spagetti" : kor="빕스"; break;
default: kor="아무거나"; break;
}//end switch
return kor;
}//end engToKor
%>
<%
//request객체의 encoding 처리
request.setCharacterEncoding("UTF-8");
/*
사용자가 웹 브러우저(크롬,엣지,파이어폭스, 오페라,웨일)의 홈페이지(form~form)에 입력한
데이터를 서버(톰켓 컨테이너)로 전달하여(submit) 서버(톰켓 컨테이너)가 이를 처리
request 내장 객체를 이용하여 폼 페이지(form~form)에서 전달된 값을 얻을 수 있음
*/
/* 모든 파라미터값은 String 형식으로 받아옴 */
String id = request.getParameter("id");
String pass = request.getParameter("passwd");
String name = request.getParameter("name");
String phone1 = request.getParameter("phone1");
String phone2 = request.getParameter("phone2");
String phone3 = request.getParameter("phone3");
String gender = request.getParameter("gender");
//배열에 저장된 취미 값을 문자형 배열로 저장
String[] hobby = request.getParameterValues("hobby");
String comment = request.getParameter("comment");
String food = request.getParameter("food");
%>
<p>아이디 : <%=id %></p>
<p>비밀번호 : <%=pass %></p>
<p>이름 : <%=name %></p>
<p>전화번호 : <%=phone1%>-<%=phone2 %>-<%=phone3 %></p>
<p>성별 : <%=gender %></p>
<p>취미 : <%
//체크박스의 특성 체크를 하지 않았을 경우(null) 실행 안함
String str="";
if(hobby!=null){
for(String hby : hobby){
str+= hby + ",";
// out.print(hby + ",");
}
str = str.substring(0,str.length()-1);
out.print(str);
}
//다른방법
// if(hobby!=null){
// for(int i=0;i<hobby.length;i++){
// out.print(hobby[i]);
// if(i!=hobby.length-1){
// out.print(",");
// }
// }
// }
%>
</p>
<p>
가입인사말 : <%=comment %>
</p>
<p>
최애 음식 : <%=engToKor(food)%>
</p>
</body>
</html>결과
 |
 |
 |
예제 2
더보기
form02.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<title>Form Processing</title>
<script type="text/javascript">
//document 내의 모든 요소가 로딩된 후에 실행
//하나에 jsp 하나의 $(function())만 존재
$(function(){
console.log("개똥이");
//셀렉터
$("#btnAuto").on("click",function(){
$("input[name='id']").val("a001");
$("input[name='passwd']").val("java");
$("input[name='name']").val("개똥이");
$("input[name='phone1']").val("010");
$("input[name='phone2']").val("1111");
$("input[name='phone3']").val("2222");
$("textarea[name='comment']").val("안녕하세요?\n개똥이 잘 부탁드립니다.");
})
})
</script>
</head>
<body>
<h3>회원 가입</h3>
<!--
요청URI : form02_process.jsp
요청파라미터 :{id=a001,passwd=java,name=개똥이,phone1=010,phone2=1111,phone3=2222,
gender=여성,hobby=reading,movie}
요청방식 : post
-->
<form action="form02_process.jsp" name="member" method="post">
<p>
아이디 : <input type="text" name="id"/>
<input type="button" value="아이디 중복 검사"/>
</p>
<p>
비밀번호 : <input type="password" name="passwd"/>
</p>
<p>
이름 : <input type="text" name="name"/>
</p>
<p>
<!-- maxlength : 최대 4글자까지 가능, size : 4정도의 크기 -->
<!--
select 태그 : 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그
disabled : 항목을 비활성화
selected : 미리 선택됨
-->
연락처 :
<select name="phone1">
<option value="" disabled selected>선택해주세요</option>
<option vlaue="010">010</option>
<option vlaue="042">042</option>
<option vlaue="02">02</option>
</select>
- <input type="text" maxlength ="4" size="4" name="phone2"/>
- <input type="text" maxlength ="4" size="4" name="phone3"/>
</p>
<p>
성별 : <input type="radio" id="gender1" name="gender" value="남성" checked />
<label for="gender1">남성</label>
<input type="radio" id="gender2" name="gender" value="여성" checked />
<label for="gender2">여성</label>
</p>
<p>
취미 : <label for="hobby1">독서</label>
<input type="checkbox" id="hobby1"name="hobby" value="reading" checked/>
<label for="hobby2">운동</label>
<input type="checkbox" id="hobby2"name="hobby" value="exercise" />
<label for="hobby3">영화</label>
<input type="checkbox" id="hobby3"name="hobby" value="movie" />
</p>
<p>
최애 음식 : <select name="food">
<optgroup label="한식">
<option value="baekban">태평소 국밥</option>
<option value="kimchi">변동 김치찜</option>
</optgroup>
<optgroup label="중식">
<option value="jajang">홍콩반점</option>
<option value="jjampong">소림반점</option>
</optgroup>
<optgroup label="양식">
<option value="steak">아웃백</option>
<option value="spagetti">빕스</option>
</optgroup>
</select>
</p>
<p>
<!-- 여러줄을 입력. cols="열의 수" rows="행의 수" -->
<textarea name="comment" rows="3" cols="30" placeholder="가입 인사말"></textarea>
</p>
<p>
<input type="submit" value="가입하기"/>
<input type="reset" value="다시 쓰기"/>
<input type="button" id="btnAuto" value="자동 입력"/>
</p>
</form>
</body>
</html>
form02_process.jsp
<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!--
요청URI : form02_process.jsp
요청파라미터 :{id=a001,passwd=java,name=개똥이,phone1=010,phone2=1111,phone3=2222,
gender=여성,hobby=reading,movie}
요청방식 : post
-->
<table border="1">
<thead>
<th>요청 파라미터 이름</th>
<th>요청 파라미터 값</th>
</thead>
<tbody>
<%
request.setCharacterEncoding("UTF-8");
//id,passwd,name,phone1..
//getParameterNames 메소드 : 모든 요청 파라미터 명을 가져옴
Enumeration ParamNames = request.getParameterNames();
//열거형 요소가 있으면 true 반환
//hasMoreElements 메소드 : 전송된 요청 파라미터가 없을 때까지 반복
String name="";
String paramValue="";
String[] paramValues;
while(ParamNames.hasMoreElements()){
//nextElement 메소드 : 각 요청 파라미터의 이름을 가져옴
name = (String)ParamNames.nextElement();
out.print("<tr><td>"+ name+ "</td>");
if(name.equals("hobby")){
paramValues = request.getParameterValues(name);
out.print("<td>");
//paramValues : STring[]
for(String value : paramValues){
out.print(value+",");
}
out.print("</td></tr>");
}else{
paramValue = request.getParameter(name);
out.print("<td>"+paramValue+"</td></tr>");
}
}
%>
</tbody>
</table>
</body>
</html>
결과
 |
 |
'JSP 웹 프로그래밍 > 수업내용' 카테고리의 다른 글
| [JSP 웹 프로그래밍] 유효성 검사 (0) | 2024.07.08 |
|---|---|
| [JSP 웹 프로그래밍] 파일 업로드(file upload) (0) | 2024.07.04 |
| [JSP 웹 프로그래밍] reponse 내장 객체 (0) | 2024.07.01 |
| [JSP 웹 프로그래밍]내장 객체 예제 2 (0) | 2024.07.01 |
| [JSP 웹 프로그래밍] 내장 객체 - 예제 (0) | 2024.06.28 |
