romworld

JSP 10 - form 태그 (회원가입양식) 본문

WEB/JSP

JSP 10 - form 태그 (회원가입양식)

inderrom 2022. 12. 29. 12:50

폼(form)

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

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

▪ 사용자와 웹 애플리케이션이 상호 작용하는 중요한 기술 중 하나

▪ 사용자가 어떤 내용을 원하는지,

  사용자의 요구 사항이 무엇인지 파악할 때 가장 많이 사용하는 웹 애플리케이션의 필수적인 요소

 

 

<form 태그>

action : 폼 데이터를 받아 처리하는 웹 페이지의 URL을 성정

method : 폼 데이터가 전송되는 HTTP 방식을 설정

name : 폼을 식별하기 위한 이름 설정

target : 폼 처리 결과의응답을 실행할 프레임을 설정

enctype : 폼을 전송하는 콘텐츠 MIME 유형을 설정

accept-charset : 폼 전송에 사용할 문자 인코딩을 설정

 

 

<input 태그>

*type

text : 기본 값으로 한줄의 텍스트 입력

radio : 라디오 버튼으로 열거된 것 중 하나만 선택할 때 사용

checkbox : 체크박스로 열거된 것 중 다중 선택 할 때 사용

password : 암호 입력할 때 사용

hidden : 보이지 않게 숨겨서 값을 전송할 때 사용

file : 파일 업로드를 위한 파일 선택 시 사용

button : 버튼 모양을 출력할 때 사용

reset : 폼에 입력된 값을 모두 초기화 할 때 사용

submit: 폼에 입력된 값을 모두 서버에 전송할 때 사용

---------------------------------------------------------------------------

*name : 입력 양식을 식별하는 이름을 설정

*value : 입력 양식의 초깃값을 설정

 

 

 

회원가입양식

<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>

<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>

<title>Form Processing</title>

<script type="text/javascript">

// document의 요소들이 모두 로딩(메모리에 올라감)된 후에 실행



	function fn_chk(){

		alert("롬");

		let phone1 = $("input[name='phone1']").val();

		let phone2 = $("input[name='phone2']").val();

		let phone3 = $("input[name='phone3']").val();

		

		let phone = phone1 + "-" + phone2 + "-" + phone3;

		

		console.log("phone : " + phone);

	

		// id="phone"인 요소를 선택한 후 그 요소의 value값으로 입력

		$('#phone').val(phone);

		

		// false : form01_process.jsp로 요청이 안됨

		// true : form을 submit함

		return true;

	}

	



</script>

</head>

<body>

	<h3>회원 가입</h3>

	<!-- 폼 태그 -->

	<!-- submit 할 때 (on) ==> onSubmit -->

	<form action="form01_process.jsp"  name="member" method="post" 

	onsubmit="return fn_chk()">

		<p>

			아이디 : <input type="text" name="id" required>

			<input type="button" value="아이디 중복검사" >

		</p>

		<p>비밀번호 : <input type="password" name="passwd" required ></p>

		<p> 이름  : <input type="text" name="name" required	></p>

		<p>	

			<!-- j/s의 phone변수에 담긴 결과값을 phone 요소의 value로 넣어보자 -->

			<input type="text" name="phone" id="phone" value="">

			연락처 : <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="phone3">

		</p>

		<p>

			성별 : <input type="radio" name="gender" value="male" checked /> 남성

				   <input type="radio" name="gender" value="female" checked /> 여성

		</p>

		<p>

			취미 : 독서 <input type="checkbox" name="hobby" value="독서" checked />

			 	   운동 <input type="checkbox" name="hobby" value="운동"  />

				   영화 <input type="checkbox" name="hobby" value="영화" />

		</p>

		<p>

			<!-- size 속성 : 해당 개수대로 미리 보여줌 -->

			<select name="city" size="3">

				<option value="대전" selected>대전광역시</option>

				<option value="서울" >서울특별시</option>

				<option value="경기">경기도</option>

				<option value="인천">인천광역시</option>

				<option value="충청">충청도</option>

				<option value="전라">전라도</option>

				<option value="경상">경상도</option>

			</select>

		</p>

		<p>

			<select name="food">

				<optgroup label="분식류">

					<option value="ddeukboki">떡볶이</option>

					<option value="sundai">순대</option>

					<option value="tyigim">튀김</option>

				</optgroup>

				<optgroup label="안주류">

					<option value="ddarkbal" selected>닭발</option>

					<option value="golbaengi">골뱅이</option>

				</optgroup>

				<optgroup label="찌개류">

					<option value="kimchi">김치찌개</option>

					<option value="sundubu">순두부찌개</option>

				</optgroup>

			</select>

		</p>

		<p>

			<input type="submit" value="가입하기">

			<input type="reset" value="다시 쓰기">

		</p>

	</form>

</body>

</html>

 

<form01_process.jsp>


  

    
    
    
    
  
<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<% // 스크립틀릿

	request.setCharacterEncoding("UTF-8");

	// form01_process.jsp를 요청 시 폼데이터가 request 객체에 들어가고

	// form01_process.jsp로 값들이 전달됨(name=value&name2=value2...)

	String id = request.getParameter("id");

	String passwd  = request.getParameter("passwd");

	String name = request.getParameter("name");

	String phone = request.getParameter("phone");

	String gender = request.getParameter("gender");

	String[] hobby = request.getParameterValues("hobby"); // 여러개의 값을 배열로 받자

	String city = request.getParameter("city");

	String food = request.getParameter("food");

%>

<!--  표현문 -->

<p> id : <%=id%></p>

<p> passwd : <%=passwd%></p>

<p> name : <%=name%></p>

<p> phone : <%=phone%></p>

<p>hobby :

	<%

		//list는 size, 배열은 length

		if(hobby != null){

			for(int i =0; i<hobby.length;i++){

				out.print(" " + hobby[i]);

			} // end for

		}// end if

	%>

<p>gender : <%=gender %></p>

<p>city : <%=city %></p>

<p>food : <%=food %></p>

 

글자수 제한 정규식이 들어간 로그인 창

 

 

<form0101.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>

<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>

<link rel="stylesheet" href="/css/bootstrap.min.css">

<title>form 연습</title>

<script type="text/javascript">

//1) submit 시 fn_check() 함수 실행 후 true일 때 submit 됨



//2) 비밀번호는 6자리 이상이어야 함



//3) 아이디는 3자리 이상이어야 함



//4) form0101_process.jsp로 폼 데이터를 전송하면

//	 request 객체에 들어있는 memId, password name에 매핑된 value를 받아서

//   화면에 출력해보자



function fn_check(){

	let password = $('#password').val();

	let memId = $('#memId').val();

	if(password.length >= 6 && memId.length >=3){

		return true;

	}else{

		alert("아이디 및 비밀번호 길이를 확인해주세요");

		//선택된 요소에 focus

		$('#memId').focus();

		return false;

	}

	

}



</script>

</head>

<body>

<div class="card" style="width: 18rem;">

  <div class="card-body">

   <div class="bd-example">

      <form action="form0101_process.jsp" method="post" onsubmit="return fn_check()">

         <div class="mb-3">

            <label for="mem_d" class="form-label">아이디</label>

             <input type="text" class="form-control"

               id="memId" name="memId" class="memId" aria-describedby="idHelp" 

               placeholder="아이디를 입력해주세요" required/>

         </div>

         <div class="mb-3">

            <label for="password" class="form-label">비밀번호</label>

            <input type="password" class="form-control"

               id="password" name="password" 

               placeholder="비밀번호를 입력해주세요" required>

         </div>

         <div class="mb-3 form-check">

            <input type="checkbox" class="form-check-input" id="remember-me"

            	name="remember-me" />

            <label class="form-check-label" for="remember-me">자동 로그인</label>

         </div>

         <button type="submit" class="btn btn-primary">로그인</button>

      </form>

   </div>

  </div>

</div>

</html>

<form0101_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>

<script type="text/javascript" src="/js/jquery-3.6.3.min.js"></script>

<link rel="stylesheet" href="/css/bootstrap.min.css">

<title>form 연습</title>

<script type="text/javascript">

//1) submit 시 fn_check() 함수 실행 후 true일 때 submit 됨



//2) 비밀번호는 6자리 이상이어야 함



//3) 아이디는 3자리 이상이어야 함



//4) form0101_process.jsp로 폼 데이터를 전송하면

//	 request 객체에 들어있는 memId, password name에 매핑된 value를 받아서

//   화면에 출력해보자



function fn_check(){

	let password = $('#password').val();

	let memId = $('#memId').val();

	if(password.length >= 6 && memId.length >=3){

		return true;

	}else{

		alert("아이디 및 비밀번호 길이를 확인해주세요");

		//선택된 요소에 focus

		$('#memId').focus();

		return false;

	}

	

}



</script>

</head>

<body>

<div class="card" style="width: 18rem;">

  <div class="card-body">

   <div class="bd-example">

      <form action="form0101_process.jsp" method="post" onsubmit="return fn_check()">

         <div class="mb-3">

            <label for="mem_d" class="form-label">아이디</label>

             <input type="text" class="form-control"

               id="memId" name="memId" class="memId" aria-describedby="idHelp" 

               placeholder="아이디를 입력해주세요" required/>

         </div>

         <div class="mb-3">

            <label for="password" class="form-label">비밀번호</label>

            <input type="password" class="form-control"

               id="password" name="password" 

               placeholder="비밀번호를 입력해주세요" required>

         </div>

         <div class="mb-3 form-check">

            <input type="checkbox" class="form-check-input" id="remember-me"

            	name="remember-me" />

            <label class="form-check-label" for="remember-me">자동 로그인</label>

         </div>

         <button type="submit" class="btn btn-primary">로그인</button>

      </form>

   </div>

  </div>

</div>

</html>

 

 

 

 

 

'WEB > JSP' 카테고리의 다른 글

JSP 13 - 쇼핑몰 사이트 만들기(4) [상품등록 (파일업로드)]  (0) 2023.01.03
JSP - 12 함수 (map(), prop())  (0) 2023.01.02
JSP 10 - 쇼핑몰 사이트 만들기(3) [상품 상세 정보]  (0) 2022.12.29
JSP 09 - out  (0) 2022.12.28
JSP 08 - response  (0) 2022.12.28
'WEB/JSP' Related Articles more
Comments