JAVA/JSP
[JSP] form 태그
아잠만_
2024. 7. 2. 17:37
form 태그
- form
- input
- select
- textarea
회원가입 예제
form01.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Form Processing</title>
<script src="/js/jquery.min.js"></script>
<script>
$(function(){
$('#btnAuto').on('click',function(){
$('#id').val('a001');
// $('input[name="id"]').val('a001');
$('#pw').val('java');
$('#name').val('홍길동');
$('#phone1').val('010');
$('#phone2').val('1234');
$('#phone3').val('4567');
$('textarea').val('안녕하세요\n반갑습니다');
})
})
</script>
</head>
<body>
<h3>회원 가입</h3>
<!--
요청URI : form01_process.jsp
요청파라미터 : {id=a001,pw=java,name=개똥이
,phone1=010,phone2=111,phone3=2222
,gender=여성,hobby=reading,movie}
요청방식 : post
-->
<form action="form01_process.jsp" name="member" method="post">
<p>
아이디 : <input type="text" name="id" id="id"/>
<input type="button" value="중복 검사"/>
</p>
<p>
비밀번호 : <input type="password" name="pw" id="pw"/>
</p>
<p>
이름 : <input type="text" name="name" id="name"/>
</p>
<p>
<!-- maxlength : 최대 글지 지정 , size : 너비 지정 -->
연락처 :
<!-- select 태그 : 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그 -->
<select name="phone1" id="phone1">
<option value="" disabled selected>선택</option>
<option value="010">010</option>
<option value="011">011</option>
</select>
- <input type="text" maxlength="4" size="4" name="phone2" id="phone2"/> -
<input type="text" maxlength="4" size="4" name="phone3" id="phone3"/>
</p>
<p>
성별 : <input type="radio" name="gender" value="남성" checked />남성
<input id="women" type="radio" name="gender" value="여성" />여성
</p>
<p>
취미 : 독서<input type="checkbox" name="hobby" value="reading" />
운동<input type="checkbox" name="hobby" value="exercise" />
영화<input type="checkbox" name="hobby" value="movie" />
</p>
<p>
<!-- 여러줄을 입력 cols="열의 수" rows="행의 수" -->
<textarea rows="3" cols="30" placeholder="가입 인사말" name="comment"></textarea>
</p>
<p>
좋아하는 음식 : <select name="food">
<optgroup label="한식">
<option value="김치찌개">김치찌개</option>
<option value="밥버거">밥버거</option>
</optgroup>
<optgroup label="중식">
<option value="짜장면">짜장면</option>
<option value="짬뽕">짬뽕</option>
</optgroup>
<optgroup label="양식">
<option value="피자">피자</option>
<option value="스파게티">스파게티</option>
</optgroup>
</select>
</p>
<p>
<input type="submit" value="가입">
<input type="reset" value="초기화">
<input type="button" value="자동입력" id="btnAuto">
</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
요청파라미터 : request{id=a001,pw=java,name=개똥이
,phone1=010,phone2=111,phone3=2222
,gender=여성,hobby=reading,movie}
요청방식 : post
-->
<%
/*
사용자가 웹브라우저의 폼페이지에 입력한 데이터를 서버(톰캣 컨테이너)로 전달하여(submit)
서버가 이를 처리
request 내장 객체를 이용하여 폼페이지에서 전달된 값을 얻을 수 있음
*/
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
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 hobbyStr = "";
if(hobby!=null){
for(String a : hobby){
hobbyStr += a + ", ";
}
hobbyStr = hobbyStr.substring(0, hobbyStr.length()-2);
}
String comment = request.getParameter("comment").replaceAll("[\n]", "<br>");
String food = request.getParameter("food");
%>
<p>아이디 : <%=id %></p>
<p>비밀번호 : <%=pw %></p>
<p>이름 : <%=name %></p>
<p>연락처 : <%=phone1 %>-<%=phone2 %>-<%=phone3 %></p>
<p>성별 : <%=gender %></p>
<p>취미 : <%=hobbyStr %></p>
<p>인사말<br><%=comment %></p>
<p>좋아하는 음식 : <%=food %></p>
</body>
</html>Parameter이름 가져오기
form02.jsp
(form01.jsp와 거의 동일)
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Form Processing</title>
<script src="/js/jquery.min.js"></script>
<script>
$(function(){
$('#btnAuto').on('click',function(){
$('#id').val('a001');
// $('input[name="id"]').val('a001');
$('#pw').val('java');
$('#name').val('홍길동');
$('#phone1').val('010');
$('#phone2').val('1234');
$('#phone3').val('4567');
$('textarea').val('안녕하세요\n반갑습니다');
$('#genW').prop('checked', true);
$('#hR').prop('checked', true);
$('#hM').prop('checked', true);
});
})
</script>
</head>
<body>
<h3>회원 가입</h3>
<!--
요청URI : form01_process.jsp
요청파라미터 : {id=a001,pw=java,name=개똥이
,phone1=010,phone2=111,phone3=2222
,gender=여성,hobby=reading,movie}
요청방식 : post
-->
<form action="form02_process.jsp" name="member" method="post">
<p>
아이디 : <input type="text" name="id" id="id"/>
<input type="button" value="중복 검사"/>
</p>
<p>
비밀번호 : <input type="password" name="pw" id="pw"/>
</p>
<p>
이름 : <input type="text" name="name" id="name"/>
</p>
<p>
<!-- maxlength : 최대 글지 지정 , size : 너비 지정 -->
연락처 :
<!-- select 태그 : 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그 -->
<select name="phone1" id="phone1">
<option value="" disabled selected>선택</option>
<option value="010">010</option>
<option value="011">011</option>
</select>
- <input type="text" maxlength="4" size="4" name="phone2" id="phone2"/> -
<input type="text" maxlength="4" size="4" name="phone3" id="phone3"/>
</p>
<p>
성별 : <input id="genM" type="radio" name="gender" value="남성" checked /><label for="genM">남성</label>
<input id="genW" type="radio" name="gender" value="여성" /><label for="genW">여성</label>
</p>
<p>
취미 :
<label for="hR">독서</label><input id="hR" type="checkbox" name="hobby" value="reading" />
<label for="hE">운동</label><input id="hE" type="checkbox" name="hobby" value="exercise" />
<label for="hM">영화</label><input id="hM" type="checkbox" name="hobby" value="movie" />
</p>
<p>
<!-- 여러줄을 입력 cols="열의 수" rows="행의 수" -->
<textarea rows="3" cols="30" placeholder="가입 인사말" name="comment"></textarea>
</p>
<p>
좋아하는 음식 : <select name="food">
<optgroup label="한식">
<option value="김치찌개">김치찌개</option>
<option value="밥버거">밥버거</option>
</optgroup>
<optgroup label="중식">
<option value="짜장면">짜장면</option>
<option value="짬뽕">짬뽕</option>
</optgroup>
<optgroup label="양식">
<option value="피자">피자</option>
<option value="스파게티">스파게티</option>
</optgroup>
</select>
</p>
<p>
<input type="submit" value="가입">
<input type="reset" value="초기화">
<input type="button" value="자동입력" id="btnAuto">
</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>
<table border="1">
<thead>
<th>요청 파라미터 이름</th>
<th>요청 파라미터 값</th>
</thead>
<tbody>
<!--
요청URI : form02_process.jsp
요청파라미터 : request{id=a001,pw=java,name=개똥이
,phone1=010,phone2=111,phone3=2222
,gender=여성,hobby=reading,movie}
요청방식 : post
-->
<%
request.setCharacterEncoding("utf-8");
// Parameter이름은 Enumeration(열거형) 으로 가져올 수 있음
Enumeration name = request.getParameterNames();
// 열거형 요소가 있다면 true 반환
// hasMoreElements 메서드 : 전송된 요청 파라미터가 없을 때까지 반복
while(name.hasMoreElements()){
// object 타입
// nextElement 메서드 : 각 요청 파라미터의 이름을 가져옴
String key = (String)name.nextElement();
String value = "";
if(!key.equals("hobby")){
value = request.getParameter(key);
} else{
String[] hobby = request.getParameterValues(key);
if(hobby!=null){
for(String a : hobby){
value += a + ", ";
}
value = value.substring(0, value.length()-2);
}
}
out.print("<tr><td>"+key + "</td><td>" +value+"</td></tr>");
}
%>
</tbody>
</table>
</body>
</html>