[jsp] 폼 태그

jsp 2023. 4. 25. 17:33

폼?

은 사용자가 웹 브라우저를 통해 입력한 모든 데이터를 한 번에 웹 서버로 전송하는 양식이다.

전송한 데이터는 웹 서버가 처리하고, 처리 결과에 따라 다른 웹 페이지를 보여준다.

폼은 사용자와 웹 서버가 상호작용하는 중요한 기술이다. 사용자의 요구사항을 파악할 때 가장 많이 사용하는 필수적 요소인것이다.

폼을 구성하는 태그

form	폼을 정의하는 태그로 최상위 태그
input	사용자가 입력할 수 있는 태그
select	항목을 선택할 수 있는 태그
textarea	여러 줄을 입력할 수 있는 태그

form 태그는 단독으로 쓰이지 않고, 사용자가 다양한 정보를 입력하는 양식을 포함하는 최상위 태그로 형식은 다음과 같다.

form 태그의 속성을 이용하여 폼 데이터를 어디로 보낼지, 어떤 방식으로 보낼지 결정할 수 있다. 모든 속성은 필수가 아니라 선택이다.

<form action="url" method="get" name="login" accept-charset="utf-8">
	<input type="text" name="id">
</form>

속성	설명
action	폼 데이터를 받아 처리하는 웹 페이지의 URL 설정
method	폼 데이터가 전송되는 HTTP방식설정 (기본값 : GET 이므로 생략가능)
name	폼을 식별하기 위한 이름설정
target	폼 처리 결과의 응답을 실행할 프레임 설정
enctype	폼을 전송하는 콘텐츠 MIME 유형 설정
accept-charset	폼 전송에 사용할 문자 인코딩 설정

form 태그의 method 속성

웹 브라우저에서 웹 서버로 정보를 전송하는 방법으로 . GET, POST 방식이있다.

GET방식은 폼데이터를 HTTP패킷의 헤더를 통해 전달한다 . URL 끝에 붙여서 전송하므로 웹 브라우저의 주소 표시줄에 그대로 나타난다. 구분자로 ?를 사용하여 URL 뒤에 name=value와 같은 요청 파라미터 형식으로 데이터를 전달한다. 여러개의 파라미터를 전송할 경우 &로 구분한다.

POST방식은 header로 전달하는게 아니라 body로 전달하기 때문에 웹 브라우저의 주소 표시줄에 데이터정보가 나타나지않는다.

GET방식은 데이터가 외부에 노출되어, 보안에 취약하다. 따라서 개인정보등을 보호해야 할때는 POST방식을 사용해야 한다. 또한 GET방식은 지정된 리소스에서 데이터를 요청할때 즉 읽을때 사용한다. 반면 POST 방식은 지정된 리소스에서 데이터를 처리할때(쓰기,수정,삭제 등)사용한다.

input 태그

input 태그는 사용자가 텍스트 입력이나 선택 등을 다양하게 할 수 있는 공간을 만드는 태그이다. 종료태그없이 단독 사용 가능

<input type="text" name="hi">

다음은 아이디와 비밀번호를 입력받을 수 있도록 input 태그를 설정하는 예이다.

text : 일반 텍스트 입력 받음 / password : 입력된 글자 가림

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<form action="#" method="post">
		<p> 아이디 : <input type="text" name="id">
		<p> 비밀번호 : <input type="password" name="passwd">
		<p> <input type="submit" value="전송">
	</form>
</body>
</html>

form태그와 input태그로 회원가입 양식만들기

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h3>회원 가입</h3>
	<form action='#' name ="member" method="post">
		<p> 아이디 : <input type="text" name="id"> <input type="button" value="아이디 중복 검사">
		<p> 비밀번호 : <input type="password" name="passwd">
		<p> 이름 : <input type="text" name="name">
		<p> 연락처 : <input type="text" maxlength="4" size="4" name="phone1">-
		<input type="text" maxlength="4" size="4" name="phone2">-
		<input type ="text" maxlength="4" size="4" name="phon3">
		<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
		<%-- checked는 초기값을 설정함 --%>
				  <input type="radio" name="sex" value="여성">여성
				  
				  
		<p> 취미 : 독서<input type="checkbox" name="hobby1" checked>
			 	 독서<input type="checkbox" name="hobby2">
			  	독서<input type="checkbox" name="hobby3">
			  	
		<p>		  <input type="submit" value="가입하기">
				  <input type="reset" value="다시쓰기">
				
		
	</form>
</body>
</html>

select 태그

select 태그는 여러 개의 항목이 나타나는 목록 상자에서 항목을 선택하는 태그이다.

시작 태그와 종료 태그가 있으며, 리스트 박스에 항목을 추가하기 위해 반드시 option 태그를 포함한다.

<select name="city" size="3>
	<option value="서울시">서울특별시</option>
    <option value="인천시">인천광역시</option>
    <option value="충청도">충청도</option>
</select>

select 태그로 이전에 input으로 만들었던 회원가입 양식의 연락처를 조금 수정해보겠다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h3>회원 가입</h3>
	<form action='#' name ="member" method="post">
		<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="013">013</option>
					</select>
		<input type="text" maxlength="4" size="4" name="phone1">-
		<input type="text" maxlength="4" size="4" name="phone2">-
		<input type ="text" maxlength="4" size="4" name="phon3">
		<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
		<%-- checked는 초기값을 설정함 --%>
				  <input type="radio" name="sex" value="여성">여성
				  
				  
		<p> 취미 : 독서<input type="checkbox" name="hobby1" checked>
			 	 독서<input type="checkbox" name="hobby2">
			  	독서<input type="checkbox" name="hobby3">
			  	
		<p>		  <input type="submit" value="가입하기">
				  <input type="reset" value="다시쓰기">
				
		
	</form>
</body>
</html>

textarea 태그

여러 줄의 텍스트를 입력할 수 있는 태그이다. 너비와 높이를 지정하기 위해 col와 row 속성을 설정한다.

여는 태그와 닫는 태그가 있다.

입력 폼안에 사용된 태그와 띄어쓰기가 그대로 출력된다는 특징이있다.

<textarea cols="너비값" rows="높이 값">

</textarea>

이전에 작성한 회원가입 양식에 가입 인사 textarea를 추가해보자

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h3>회원 가입</h3>
	<form action='#' name ="member" method="post">
		<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="013">013</option>
					</select>
		<input type="text" maxlength="4" size="4" name="phone1">-
		<input type="text" maxlength="4" size="4" name="phone2">-
		<input type ="text" maxlength="4" size="4" name="phon3">
		<p> 성별 : <input type="radio" name="sex" value="남성" checked>남성
		<%-- checked는 초기값을 설정함 --%>
				  <input type="radio" name="sex" value="여성">여성
				  
				  
		<p> 취미 : 독서<input type="checkbox" name="hobby1" checked>
			 	 독서<input type="checkbox" name="hobby2">
			  	독서<input type="checkbox" name="hobby3">
			  	
		<p> <textarea name="comment" cols="30" rows="3" placeholder="가입 인사를 입력하세요"></textarea>
		<!-- placeholder:기본값 아무것도 입력하지않았을때 표시할 문구, rows:높이 -->
		<p>		  <input type="submit" value="가입하기">
				  <input type="reset" value="다시쓰기">
				
		
	</form>
</body>
</html>

폼 데이터 처리하기

jsp에서 가장 많이 사용하는 기능중 하나는 사용자가 웹 브라우저의 폼페이지에 입력한 데이터를 -> 서버로 전달하여 이를 처리하는것이다.

이렇게 폼 데이터를 처리함으로써, 표현문이나 스클립틀릿 태그에 request내장 객체를 이용하여 폼 페이지에 전달된 값을 얻을 수 있다.

요청 파라미터 값 받기

request 내장객체는 웹 브라우저가 서버로 보낸 요청에 대한 다양한 정보를 담고 있다.

getParameter()메소드를 이용하여 요청 파라미터 값을 얻을 수 있다.

String a = request.getParameter(요청 파라미터 이름);

다음은 체크박스에 어떤 박스를 체크했는지, 서버에서 getParamter를 이용해 확인하는 방법니다.

index.jsp : check박스에 데이터를 저장하고 -> 전송 버튼 누르면 -> process.jsp에게 정보 전달

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<form action="process.jsp" method="post">
		<p> 독서<input type="checkbox" name="reading">
		<p> 운동<input type="checkbox" name="execise">
        <p> 영화<input type="checkbox" name="movie">
		<p> <input type="submit" value="전송">
	</form>
</body>
</html>

process.jsp : index.jsp의 폼 데이터로 부터 받은 데이터 정보를 처리하여 웹 브라우저에게 보여주는 jsp

위는 표현문으로 바로 출력하는 예시, 아래는 스클립틀릿 태그로 데이터를 받아서 표현문으로 출력하는 방법이다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>

	<p> 독서 : <%=request.getParamter("reading")%>
    <p> 운동 : <%=request.getParameter("exercise")%>
    <p> 영화 : <%=request.getParmaeter("movie")%>
    
    <%
    	 request.setCharacterEncoding("utf-8")l
         
         String hobby1 = request.getParameter("hobby1")
         //check한경우 on , 안한경우 null 출력
     %>
     <%= hobby1%>
</body>
</html>

요청 파라미터의 전체 값 받는 법

입력데이터가 다수거나 양식이 다양한 경우, 일괄 처리 메소드를 사용하면 웹 브라우저에서 서버로 전송되는 요청 파라미터를 설정하지 않아도 모든 값을 전달 받을 수 있다.

다음 예제는 getParameterNames()를 통해 모든 파라미터이름을 가져와 Enumeration 자료형으로 저장해주고, hasMoreElements()를 이용해 남은 리스트 요소가 없을때까지 반복하며, nextElement()를 통해 하나씩 요소를 가져와서 name에 저장한다. 파라미터 name에 따른 value값은 getParameter를 통해 가져와준다.

<%

	Enumeration paramnames = request.getParameterNames();
    while(paramnames.hasMoreElements()){
     	String name = (String) paramnames.nextElements();
        out.print(name);
        String paramValue = request.getParameter(name);
        out.println(paramValue);
        
 %>

참고

https://velog.io/@ansalstmd/JSP6.-%ED%8F%BC%ED%83%9C%EA%B7%B8

JSP(6. 폼태그)

사용자가 웹 브라우저를 통해 입력된 모든 데이터를 한번에 웹 서버로 전송하는 양식전송한 데이터는 웹 서버가 처리하고 처리 결과에 따라 다른 웹페이지를 보여줌사용자와 웹 애플리케이션

velog.io

[웹 쇼핑몰] 상품등록 페이지 만들기

addProduct.jsp - 상품 등록을 위한 폼 페이지 , 폼 작성 내용은 processAddProduct.jsp페이지로 전달

<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<link rel="stylesheet" 	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>상품 등록</title>
</head>
<body>
	<jsp:include page="menu.jsp" />	
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">상품 등록</h1>
		</div>
	</div>
	<div class="container">
		<form name="newProduct" action="./processAddProduct.jsp" class="form-horizontal" method="post">
			<div class="form-group row">
				<label class="col-sm-2">상품 코드</label>
				<div class="col-sm-3">
					<input type="text" name="productId" class="form-control" >
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상품명</label>
				<div class="col-sm-3">
					<input type="text" name="name" class="form-control" >
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">가격</label>
				<div class="col-sm-3">
					<input type="text" name="unitPrice" class="form-control" >
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상세 정보</label>
				<div class="col-sm-5">
					<textarea name="description" cols="50" rows="2"
						class="form-control"></textarea>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">제조사</label>
				<div class="col-sm-3">
					<input type="text" name="manufacturer" class="form-control">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">분류</label>
				<div class="col-sm-3">
					<input type="text" name="category" class="form-control" >
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">재고 수</label>
				<div class="col-sm-3">
					<input type="text" name="unitsInStock" class="form-control" >
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2">상태</label>
				<div class="col-sm-5">
					<input type="radio" name="condition" value="New " > 신규 제품 
					<input type="radio" name="condition" value="Old" > 중고 제품 
					<input type="radio" name="condition" value="Refurbished" > 재생 제품
				</div>
			</div>
			<div class="form-group row">
				<div class="col-sm-offset-2 col-sm-10 ">
					<input type="submit" class="btn btn-primary" value="등록" >
				</div>
			</div>
		</form>
	</div>
</body>
</html>

ProductRepository.java 수정 - 신규 상품 데이터를 저장하는 메소드 만들기

private static ProductRepository instance = new ProductRepository();
	
	public static ProductRepository getInstance() {
		return instance;
	}
	public void addProduct(Product product) {
		listOfProducts.add(product);
	}

processAddProduct.jsp - 상품 등록 처리 페이지, listOfProduct에 새로운 Product 객체를 추가하여 products.jsp로 보낸다

<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="dto.Product"%>
<%@ page import="dao.ProductRepository"%>

<%
	request.setCharacterEncoding("UTF-8");

	String productId = request.getParameter("productId");
	String name = request.getParameter("name");
	String unitPrice = request.getParameter("unitPrice");
	String description = request.getParameter("description");
	String manufacturer = request.getParameter("manufacturer");
	String category = request.getParameter("category");
	String unitsInStock = request.getParameter("unitsInStock");
	String condition = request.getParameter("condition");

	Integer price;

	if (unitPrice.isEmpty())
		price = 0;
	else
		price = Integer.valueOf(unitPrice);

	long stock;

	if (unitsInStock.isEmpty())
		stock = 0;
	else
		stock = Long.valueOf(unitsInStock);

	ProductRepository dao = ProductRepository.getInstance();

	Product newProduct = new Product();
	newProduct.setProductId(productId);
	newProduct.setPname(name);
	newProduct.setUnitPrice(price);
	newProduct.setDescription(description);
	newProduct.setManufacturer(manufacturer);
	newProduct.setCategory(category);
	newProduct.setUnitsInStock(stock);
	newProduct.setCondition(condition);

	dao.addProduct(newProduct);

	response.sendRedirect("products.jsp");
%>

'jsp' 카테고리의 다른 글

HTTP,쿠키,세션 (1)	2023.05.30
[jsp] 쿠키생성, 쿠키 정보 얻기, 쿠키 삭제 (0)	2023.05.24
[jsp] 유효성 검사 (3)	2023.04.25
[jsp] 파일 업로드 (0)	2023.04.25
[jsp] 스크립트 태그 (0)	2023.03.19

ABOUT ME

lee-ding lee-ding

폼?

폼을 구성하는 태그

form 태그의 method 속성

input 태그

select 태그

textarea 태그

폼 데이터 처리하기

요청 파라미터 값 받기

요청 파라미터의 전체 값 받는 법

'jsp' 카테고리의 다른 글

티스토리툴바

ABOUT ME

폼?

폼을 구성하는 태그

form 태그의 method 속성

input 태그

select 태그

textarea 태그

폼 데이터 처리하기

요청 파라미터 값 받기

요청 파라미터의 전체 값 받는 법

'jsp' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바