[JSP]폼 태그

 

폼 처리의 개요

폼(form)

• 사용자가 웹 브라우저를 통해 입력된 모든 데이터를 한 번에 웹 서버로 전송하는 양식
  • 전송한 데이터는 웹 서버가 처리하고 처리 결과에 따라 다른 웹 페이지를 보여줌
• 사용자와 웹 애플리케이션이 상호 작용하는 중요한 기술 중 하나
• 사용자가 어떤 내용을 원하는지, 사용자의 요구 사항이 무엇인지 파악할 때 가장 많이 사용하는 웹 애플리케이션의 필수적인 요소

폼을 구성하는 태그의 종류

form 태그의 기능과 사용법

form 태그

• 사용자가 다양한 정보를 입력하고 전달할 때 사용하는 태그
• 단독으로 쓰이지 않고 사용자가 다양한 정보를 입력하는 양식을 포함하는 최상위 태그
  • 속성을 이용하여 폼 데이터를 전송할 때 어디로 보낼지, 어떤 방식으로 보낼지 설정
  • form 태그의 모든 속성은 필수가 아니라 선택적으로 사용

데이터 전달 방식

• 태그는 method 속성의 방식으로 action 속성 장소에 데이터 전달

<form action=”전송 위치” method=”전송 방식”>  

• 전송 위치 : 데이터를 전달할 목적지
• 전송 방식 : GET, POST 방식이 있다.
  • GET : 주소에 데이터를 직접 입력해 전달
  • POST : 별도의 방법을 사용해 데이터를 해당 주소로 전달
• GET 방식 : URL 끝에 데이터를 붙여 전달, method 생략하면 GET 방식
  • 예) www.naver.com/search?value=데이터GET전달&date=230920
  • 쿼리 스트링(Query String) : ?와 함께 이름과 값의 쌍을 이루는 요청 파라미터
  • 요청 파라미터가 여러 개인 경우 &로 연결
• POST 방식 : 주소 변경 없이 데이터를 HTTP 메시지에 담아서 전송 데이터 별도 전송하기 때문에 데이터 용량 제한 없고, 보안성이 GET보다 향상 대부분 POST 방식 사용

연습문제 HTML에 네이버, 구글 검색창 만들기

<form name="n_search" action="https://search.naver.com/search.naver" method="get">
	<input name="query" type="text" placeholder="네이버 검색창">
	<input type="submit" value="검색">
	</form>
	
	<br>

	
	<form name="g_search" action="https://www.google.com/search" method="get">
	<input name="q" type="text" placeholder="구글 검색창">
	<input type="submit" value="검색">
	</form>

• 검색 버튼 클릭시 action URL + ?(input name)=(input value)

input 태그의 기능과 사용법

input 태그

• 사용자가 텍스트 입력이나 선택 등을 다양하게 할 수 있도록 공간을 만드는 태그
• 종료 태그 없이 단독으로 사용할 수 있음

<input 속성1=”값1” [속성2 = “값2” … ]>

input 태그의 기본 속성

input 태그 기본 속성 외에 사용되는 속성

예제 - 회원 가입 폼 작성

<h3>회원가입</h3>
	<form action="form_process.jsp" name="member" method="post">
	<fieldset style="max-width:500px;">
	<legend>회원가입 양식</legend>
	<p>아이디 : <input type="text" name="id">
				<input type="button" value="아이디 중복검사">
	<p>비밀번호 : <input type="password" name="passwd">
	<p>이름 : <input type="text" name="name">
	<p>연락처 : <select name="phone1">
					<option value="010">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>성별 : <input type="radio" name="gender" value="남성" checked>남성
			<input type="radio" name="gender" value="여성">여성
	<p>취미 : 독서<input type="checkbox" name="hobby" value="독서" checked>
			운동<input type="checkbox" name="hobby" value="운동">
			영화<input type="checkbox" name="hobby" value="영화">
	<p> <textarea rows="3" cols="30" placeholder="가입 인사를 입력해주세요."  name="comment"></textarea>
	<p><input type="submit" value="가입하기">
		<input type="reset" value="다시쓰기">
	</fieldset>
	</form>

• 폼 데이터 받아와서 출력하기

 	<%
  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");
	String gender = request.getParameter("gender");
	String[] hobby = request.getParameterValues("hobby"); // 동일한 이름을 사용하는데 값이 여러개 일때 사용되는 메소드
	String comment = request.getParameter("comment");
	
	%>
	<p>아이디 : <%=id %>
	<p>비밀번호 : <%=passwd %>
	<p>이름 : <%=name %>
	<p>연락처 : <%=phone1 %>-<%=phone2 %>-<%=phone3 %>
	<p>성별 : <%=gender %>
	<p>취미 : <%
				if (hobby != null) { // hobby가 null이 아닐때 hobby의 길이만큼 hobby를 출력함
					for (int i=0; i<hobby.length; i++) {
						out.println(" " + hobby[i]);
					}
				}
				%>
	<p>가입 인사 : <%=comment %>

 

- 모든 값 일괄로 받아서 처리 + 테이블 형식으로 출력

<h1>요청 파라미터 </h1>
	<table border="1">
	<tr><th>요청파라미터이름</th><th>요청파라미터값</th></tr> <!-- th는 테이블 헤더 -->
	<% // tr은 table row 가로줄
	   // td는 table data 셀을 만드는 역할
	request.setCharacterEncoding("UTF-8");

	Enumeration paraNames=request.getParameterNames();
	while(paraNames.hasMoreElements()) {
	String name=(String) paraNames.nextElement();
	String paraValue=request.getParameter(name);
	out.print("<tr><td>" + name + "</td>");
	out.println("<td>" + paraValue + "</td></tr>");
	} 
	%> 
</table>

폼 데이터 처리하기

요청 파라미터의 전체 값 받기

• 요청 파라미터를 설정하지 않아도 모든 값을 전달받을 수 있음
• 텍스트 박스, 라디오 버튼, 드롭다운 박스와 같은 다양한 유형에 대해 한 번에 폼 데이터를 전달받을 수 있다

폼 데이터의 일괄 처리 메소드

<%@ page import ="java.io.*, java.util.*" %>

Enumeration paraNames=request.getParameterNames();
	while(paraNames.hasMoreElements()) {
		String name=(String) paraNames.nextElement();
		String paraValue=request.getParameter(name); 
		out.println(name + ":" + paraValue + "<br>");