JSP 8강 - form 태그

voilà!·2022년 1월 16일
0

JSP 스프링

목록 보기
8/31

1. Form 태그 속성

1) action(필수) : 폼 데이터를 받아 처리하는 웹 페이지 URL
2) method(필수) : 폼 데이터가 전송되는 HTTP 방식(GET, POST)
3) name(필수) : 폼 식별 이름
4) id(필수) : 폼 식별 아이디
5) onsubmit(선택) : submit 버튼 클릭 시 거쳐야 할 function
-> function에서 true가 리턴되야만 submit된다
6) enctype(선택) : 폼 전송 콘텐츠 MIME 유형, multipart/form-data를 사용하여 파일 업로드 처리
7) target(선택) : 폼 처리 결과의 응답을 실행할 frame 설정
8) accept-charset(선택) : 폼 전송 시 사용할 문자 인코딩 설정

2. Input 태그 기본 속성

1)type

  • text : 한 줄 텍스트 입력
  • radio : 라디오 버튼(단일 선택)
  • checkbox : 체크박스(다중 선택), 배열형
  • password : 암호 입력
  • hidden : 숨김
  • file : 파일 업로드
  • button : 버튼 모양
  • reset : 폼에 입력된 값 초기화
  • submit :폼에 입력된 값 모두 서버로 전송
    2) value : 입력 양식 식별 이름
    3) name : 입력 양식 초기값
    4) readonly : 읽기 전용
    5) disabled : 비활성화 설정(true/false)
    6) maxlength : 최대 입력 글자 수
    7) size : 입력 양식의 너비
    8) checked : checkbox, radio에서 사용
    ---------------HTML5에서 추가된 내용들-----------------
    9) required : 필수 태그로 설정, submit 버튼 클릭 시 체크해줌
    10) autofocus : 웹 페이지 로딩 시 포커스 됨
    11) placeholder : 입력 양식의 힌트
    12) pattern : 정규 표현식을 통한 유효값 입력

CKEDITOR
https://ckeditor.com/ckeditor-4/download/
압축 풀어서 WebContent 폴더에 넣기

form01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<h3>회원 가입</h3>
<form name="member" action="#" method="post">
	<p>아이디 : <input type="text" name="id" />&nbsp;
			  <input type="button" value="아이디 중복검사" /></p>
	<p>비밀번호 : <input type="password" name="passwd" /></p>
	<p>이름 : <input type="text" name="name" /></p>
	<p>연락처 : <input type="text" maxlength="4" size="4" name="phone1" />
			- <input type="text" maxlength="4" size="4" name="phone1" />
			- <input type="text" maxlength="4" size="4" name="phone1" /></p>
	<p>성별 : <input type="radio" name="gender" value="남성" checked />남성		
			<input type="radio" name="gender" value="여성" />여성</p>
	<p>취미 : 독서<input type="checkbox" name="hobby1" checked />		
		   	운동<input type="checkbox" name="hobby2" />		
		   	영화<input type="checkbox" name="hobby3" /></p>
	<p>
		<select name="city" size="3">
			<optgroup label="대전광역시">
				<option value="동구">동구</option>
				<option value="중구">중구</option>
				<option value="서구">서구</option>
				<option value="유성구">유성구</option>
				<option value="대덕구">대덕구</option>
			</optgroup>
			<optgroup label="대전이외의 도시">
			<option value="서울시">서울특별시</option>
			<option value="경기도">경기도</option>
			<option value="인천시">인천광역시</option>
			<option value="충청도">충청도</option>
			<option value="전라도">전라도</option>
			<option value="경상도">경상도</option>
			</optgroup>
		</select>
	</p>
	<p>
		<input type="submit" value="가입하기" /> 	   			
		<input type="reset" value="다시 쓰기" /> 	   			
	</p>			  	
</form>
</body>
</html>

form02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html>
<html>
<head>
<title>Form Processing</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
<body>
<h3>회원 가입</h3>
<form name="member" action="form02_process.jsp" method="post">
	<p>아이디 : <input type="text" name="id" />&nbsp;
			  <input type="button" value="아이디 중복검사" /></p>
	<p>비밀번호 : <input type="password" name="passwd" /></p>
	<p>이름 : <input type="text" name="name" /></p>
	<p>연락처 : <select name="phone1"><!-- multiple="multiple" 다중 선택 가능 -->
				<option value="010" selected>010</option>
				<option value="011">011</option>
				<option value="016">016</option>
				<option value="017">017</option>
				<option value="019">019</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="여성" />여성</p>
	<p>취미 : 독서<input type="checkbox" name="hobby" value="독서" checked/>		
		   	운동<input type="checkbox" name="hobby" value="운동"/>		
		   	영화<input type="checkbox" name="hobby" value="영화"/></p>
	<p>
		<textarea name="comment" rows="3" cols="30" placeholder="가입 인사를 입력해주세요"></textarea>
	</p>	   	
	<p>
		<select name="city" size="3">
			<optgroup label="대전광역시">
				<option value="동구">동구</option>
				<option value="중구">중구</option>
				<option value="서구">서구</option>
				<option value="유성구">유성구</option>
				<option value="대덕구">대덕구</option>
			</optgroup>
			<optgroup label="대전이외의 도시">
			<option value="서울시">서울특별시</option>
			<option value="경기도">경기도</option>
			<option value="인천시">인천광역시</option>
			<option value="충청도">충청도</option>
			<option value="전라도">전라도</option>
			<option value="경상도">경상도</option>
			</optgroup>
		</select>
	</p>
	<p>
		<input type="submit" value="가입하기" /> 	   			
		<input type="reset" value="다시 쓰기" /> 	   			
	</p>
	<script type="text/javascript">
	CKEDITOR.replace("comment")
	</script>			  	
</form>
</body>
</html>

form02_process.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html>
<html>
<head>
<title>Form Processing</title>
</head>
<body>
<%
	request.setCharacterEncoding("UTF-8");
	
// 	String id = request.getParameter("id");
// 	String passwd = request.getParameter("passwd");
// 	String name = request.getParameter("name");
// 	String phone1 = request.getParameter("phone1");
// 	String phone2 = request.getParameter("phone2");
// 	String phone3 = request.getParameter("phone3");
// 	//속성이 여러개인 경우 getParameterValues() 이용해서 배열로 받는다.
// 	String gender = request.getParameter("gender");
// 	String[] hobby = request.getParameterValues("hobby");
// 	String comment = request.getParameter("comment");
// 	String city = request.getParameter("city");
%>

<jsp:useBean id="member" class="dto.Member" />
<jsp:setProperty name="member" property="*" />
<p>아이디 : ${member.id}</p>
<p>비밀번호 : ${member.passwd}</p>
<p>이름 : ${member.name}</p>
<p>연락처 : ${member.phone1}-${member.phone2}-${member.phone3}</p>
<p>성별 : ${member.gender}</p>
<p>취미 :
<!-- member.hobby : String[] -> 1개 추출 -> row : String -->
<c:forEach var="row" items="${member.hobby}">
	${row}&nbsp;
</c:forEach>
</p>
<p>가입인사 : ${member.comment}</p>
<p>도시 : ${member.city}</p>
</body>
</html>
  1. form 태그를 이용하여 다음을 처리해보자
    1) form03.jsp 파일 생성
  • input 태그 내에 text 유형을 이용하여 이름, 주소, 이메일 항목 작성
  • form 태그의 action 속성 값은 form03_process.jsp로 작성
    2) form03_process.jsp 파일 생성
  • request 내장 객체의 getParameter() 메소드를 이용하여 전송된 요청 파라미터 값을 받음
  • out.print를 통해 전송된 요청 파라미터 값을 화면출력해보자


form03.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<form name="form" action="form03_process.jsp" method="post">
	<p>이름 : <input type="text" name="name" placeholder="이름을 입력해주세요"/></p>
	<p>주소 : <input type="text" name="addr" placeholder="주소를 입력해주세요"/></p>
	<p>이메일 : <input type="text" name="email" placeholder="이메일을 입력해주세요"/></p>
	<p><input type="submit" value="전송하기" /></p>
</form>

</body>
</html>

form03_process.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<%
	request.setCharacterEncoding("UTF-8");
	String name = request.getParameter("name");
	String addr = request.getParameter("addr");
	String email = request.getParameter("email");
	
	out.print("이름 : " + name + "<br>");
	out.print("주소 : " + addr + "<br>");
	out.print("이메일 : " + email + "<br>");
%>
</body>
</html>
  1. form 태그를 이용하여 다음을 처리해보자
    1) form04.jsp 생성
  • input 태그 내에 checkbox 유형을 이용하여 오렌지, 사과, 바나나 항목 작성
  • form 태그의 action 속성의 값은 form04_process.jsp
    2) form04_process.jsp 파일 생성
  • request 내장 객체의 getParameterValues() 메소드를 이용하여 파라미터 값을 전달받아 화면에 출력해보자

form04.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
	<form name="frm" action="form04_process.jsp">
		<input type="checkbox" name="fruit" id="fruit1" value="Orange" />
			<label for="fruit1">오렌지</label>
		<input type="checkbox" name="fruit" id="fruit2" value="Apple" />
			<label for="fruit2">사과</label>
		<input type="checkbox" name="fruit" id="fruit3" value="Banana" />
			<label for="fruit3">바나나</label>
	
		<input type="submit" value=" 전송">
	</form>
</body>
</html>

form04_process.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<h3>선택한 과일</h3>
<%
	request.setCharacterEncoding("utf-8");
	String[] fruits = request.getParameterValues("fruit");
	
	for(String str : fruits){
		out.print(str + "&nbsp;");
	}
%>
</body>
</html>
profile
voilà!
이전 포스트

JSP 7강 - request, response 내장 객체

다음 포스트

JSP 9강 - FileUpload

0개의 댓글