//Google AdSense

<Form Tag 실습>

html에서는 데이터 받기가 안됨.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Tag</title>
</head>
<body>

	<!--  
		###############################################
		<< form tag >>
		데이터를 전송하기 위한 태그
		form 태그의 속성에 method, action을 설정하여
		전송방식 및 전송경로를 지정해야한다.
		또한 form 태그의 자식 요소에 input, select, textarea 등
		데이타 입력 태그를 두고 submit을 실행하면 데이타가 전송된다.
		
		method 속성의 값은 post와 get으로 설정이 가능
			- post : 데이터를 body에 숨겨 전송  →등록, 수정
			- get : url로 전송 →검색 등
					url에서 ?~~~ : url query
				 	ex: ?sm=tab_hty.top&where=nexearch&query=Merge+Cells&oquery=Merge+Cells&tqi=UDmpLlprvxsssBYYx4VsssssteK-098759 
				 		== ?sm=tab_hty.top
				 			&where=nexearch
				 			&query=Merge+Cells
				 			&oquery=Merge+Cells
				 			&tqi=UDmpLlprvxsssBYYx4VsssssteK-098759
				 		→	키 = 값
				 			(이어서&)키 = 값
				 			(이어서&)키 = 값
				 		 
			- action : 전송될 경로를 입력 
			
		1. input - 텍스트 등록 및 수정 태그 (type 속성에 text, radio(단일 체크), checkbox(다중체크) 설정 가능)
			1) input 속성
				- type : input의 형태 지정
					+text - 일반적인 텍스트 입력
					+radio - 같은 name 값 중 1개만 선택
					+checkbox - 같은 name 값 다중 선택
					+date, number 등
				- name : 서버에 전송될 key의 명칭
				- value : 서버에 name의 key값으로 전송될 값
				- placeholder : 안내글
		2. select - 테이터 선택 태그
		3. textarea - 장문의 텍스트 등록 태그
		4. button - 이벤트 실행 및 submit
			1) button 속성
				- type : 이벤트 형태 지정 
					+button - javascript와 연동하여 이벤트 동작
					+submit - 데이터 전송
			
			
		###############################################
	 -->

	<form action="./form2.jsp" method="get"> <!-- html에서는 데이터 받기가 안됨 -->
		<label>
			유저명 :
			<input type="text" name="memberName" value="" placeholder="유저명 입력">
		</label>
		<button type="submit">전송</button>
	</form>

</body>
</html>

 

<만들어진 폼>

 

 



 

 

 

<jsp 파일 만들기>

데이터를 주고받기 위해 jsp 파일을 만든다.

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



<%
	//주석
	/* 주석 */
	
	//자바코드 기록
	
	/***************************************************************
	request 객체는 요청에 해당하는 정보를 담고있다.
	request의 getParameter라는 메서드를 활용하여
	데이터를 받을 수 있다.
	
	getParameter의 메서드 인수값을 전송된 key의 명으로 넣어 해당 key의 값을 받을 수 있다.
	***************************************************************/
	request.setCharacterEncoding("UTF-8");
	
	String memberName = request.getParameter("memberName"); //parameter > 문자열
		
	out.println(memberName);

	
%>

<!-- html 작성 -->

html 파일에서 action 속성의 경로를 jsp파일의 상대경로로 설정해준다.

 

<form action="./getData.jsp" method="get"> <!-- html에서는 데이터 받기가 안됨 -->
		<label>
			유저명 :
			<input type="text" name="memberName" value="" placeholder="유저명 입력">
		</label>
		<button type="submit">전송</button>
	</form>

<form 의 method 속성을 post로 설정할 경우>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Tag</title>
</head>
<body>

	<form action="./getData.jsp" method="post">
		<label>
			유저명 :
			<input type="text" name="memberName" value="" placeholder="유저명 입력">
		</label>
		<button type="submit">전송</button>
	</form>

</body>
</html>

폼에 홍길동을 입력 후 전송

url에 키, 값이 보이지 않음을 확인할 수 있다.

 

<form 의 method 속성을 get으로 설정할 경우>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Tag</title>
</head>
<body>

	<form action="./getData.jsp" method="get"> 
		<label>
			유저명 :
			<input type="text" name="memberName" value="" placeholder="유저명 입력">
		</label>
		<button type="submit">전송</button>
	</form>

</body>
</html>

폼에 홍길동을 입력 후 전송

 

?키 = 값

?memberName=홍길동 url에 보인다.

**url 상에서 값을 변경하여도 변경된 내용이 출력된다!

 

<input type 속성 radio / checkbox>

 

	<form action="./getData.jsp" method="get"> 
		<div>		
			<label>
				유저명 :
				<input type="text" name="memberName" value="" placeholder="유저명 입력">
			</label>
		</div>
		<div>	
			<label>
				남: <input type="radio" name="memberGender" value="남"> <!-- name 속성이 같아야 한다. -->
			</label>
			<label>
				여: <input type="radio" name="memberGender" value="여"> 
			</label>
		</div>
		<div>
			<label>
				전주 : <input type="checkbox" name="memberAdd" value="전주"> <!-- name 속성이 같아야 한다. -->
			</label>
			<label>
				군산 : <input type="checkbox" name="memberAdd" value="군산">
			</label>
			<label>
				익산 : <input type="checkbox" name="memberAdd" value="익산">
			</label>
		</div>
		<button type="submit">전송</button>
	</form>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



<%

	request.setCharacterEncoding("UTF-8");
	
	String memberName = request.getParameter("memberName"); //parameter > 문자열1
	String memberGender = request.getParameter("memberGender"); 
	
	String[] memberAdd = request.getParameterValues("memberAdd"); //parameterValues > 배열값
	

	out.println(memberName);
	out.println(memberGender);
	
	if(memberAdd != null){
		for(int i=0; i < memberAdd.length; i++){
			out.println(memberAdd[i]);
		}
	}
	
	


	
%>

유저명 :

 



 

입력

 

 

출력

<input type 속성 date / number>

 

<form action="./getData.jsp" method="get"> <!-- html에서는 데이터 받기가 안됨 -->
		<div>		
			<label>
				유저명 :
				<input type="text" name="memberName" value="" placeholder="유저명 입력">
			</label>
		</div>
		<div>	
			<label>
				남: <input type="radio" name="memberGender" value="남"> <!-- name 속성이 같아야 한다. -->
			</label>
			<label>
				여: <input type="radio" name="memberGender" value="여"> <!-- name 속성이 같아야 한다. -->
			</label>
		</div>
		<div>
			<label>
				전주 : <input type="checkbox" name="memberAdd" value="전주">
			</label>
			<label>
				군산 : <input type="checkbox" name="memberAdd" value="군산">
			</label>
			<label>
				익산 : <input type="checkbox" name="memberAdd" value="익산">
			</label>
		</div>
		
		
		<div>
			<label>
				날짜 : <input type="data" name= "memberWriteDate">
			</label>
		</div>
		 <div>
			<label>
				나이 : <input type="number" name= "memberAge">
			</label>
		</div>
		
		
		
		
		<button type="submit">전송</button>
	</form>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



<%

	request.setCharacterEncoding("UTF-8");
	
	String memberName = request.getParameter("memberName"); //parameter > 문자열1
	String memberGender = request.getParameter("memberGender"); 
    
    String[] memberAdd = request.getParameterValues("memberAdd"); //parameterValues > 배열값
    
	String memberWriteDate = request.getParameter("memberWriteDate"); 
	String memberAge = request.getParameter("memberAge"); 
	

	
 

	out.println(memberName);
	out.println(memberGender);

	
	if(memberAdd != null){
		for(int i=0; i < memberAdd.length; i++){
			out.println(memberAdd[i]);
		}
	}
    
    	out.println(memberWriteDate);
	out.println(memberAge);
	
%>


유저명 :

남: 

여: 

전주 :

군산 : 

익산 : 

날짜 :

나이 : 

 



입력

 

출력

<select>

		<div>
			<label>
				선택박스 : 
				<select name="memberTest">
					<option value=""> :: 선택 :: </option>
					<option value="testvalue1">test1</option> <!-- 넘어오는 값은 속성value에 지정된 값이다 -->
					<option value="testvalue2">test2</option>
					<option value="testvalue3">test3</option>
					<option value="testvalue4">test4</option>
					<option value="testvalue5">test5</option>
				</select>
			</label>
		</div>

 

입력

 

 

 

출력

select 에서 test3으로 보이는 option의 value로는 testvalue3이 입력되었다.

<textarea>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Tag</title>
</head>
<body>
	
	<form action="./getData.jsp" method="get">
		<div>		
			<label>
				유저명 :
				<input type="text" name="memberName" value="" placeholder="유저명 입력">
			</label>
		</div>
		<div>	
			<label>
				남: <input type="radio" name="memberGender" value="남">
			</label>
			<label>
				여: <input type="radio" name="memberGender" value="여">
			</label>
		</div>
		<div>
			<label>
				전주 : <input type="checkbox" name="memberAdd" value="전주">
			</label>
			<label>
				군산 : <input type="checkbox" name="memberAdd" value="군산">
			</label>
			<label>
				익산 : <input type="checkbox" name="memberAdd" value="익산">
			</label>
		</div>
			<div>
			<label>
				날짜 : <input type="date" name= "memberWriteDate">
			</label>
		</div>
		<div>
			<label>
				나이 : <input type="number" name= "memberAge">
			</label>
		</div>
		
		<div>
			<label>
				선택박스 : 
				<select name="memberTest">
					<option value=""> :: 선택 :: </option>
					<option value="testvalue1">test1</option>
					<option value="testvalue2">test2</option>
					<option value="testvalue3">test3</option>
					<option value="testvalue4">test4</option>
					<option value="testvalue5">test5</option>
				</select>
			</label>
		</div>
		
		<div>	
			<label>
				본문입력 : 
				<textarea name="memberContent" style="width: 100%; height: 100px;"></textarea> 
			</label>
		</div>
		
		<button type="submit">전송</button>
	</form>

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



<%
	
	request.setCharacterEncoding("UTF-8");
	
	String memberName = request.getParameter("memberName"); //parameter 
	String memberGender = request.getParameter("memberGender"); 
	
	String[] memberAdd = request.getParameterValues("memberAdd"); //parameterValues 
	
	String memberWriteDate = request.getParameter("memberWriteDate"); 
	String memberAge = request.getParameter("memberAge"); 
	String memberTest = request.getParameter("memberTest");
	String memberContent = request.getParameter("memberContent");
	
	out.println(memberName);
	out.println(memberGender);

	if(memberAdd != null){
		for(int i=0; i < memberAdd.length; i++){
			out.println(memberAdd[i]);
		}
	}

	out.println(memberWriteDate);
	out.println(memberAge);
	out.println(memberTest);
	out.println(memberContent);
	
%>

 

 

 

<div>	
	<label>
		본문입력 : 
		<textarea name="memberContent" style="width: 100%; height: 100px;">테스트입니다.</textarea> 
		<!-- <textarea>이 안에는 엔터를 포함한 모든 내용이 입력되어 호출됨!</textarea> -->	
	</label>
</div>

<textarea>와</textarea> 사이에는 엔터와 들여쓰기를 포함한 모든 내용이 입력된 채로 호출된다.

 

저작자표시

'UI／UX엔지니어링 > UI구현' 카테고리의 다른 글

폼과 레이아웃 실습  (0) 2020.02.28
Block element／Inline element／Merge Cells  (0) 2020.02.27
UI 구현 39~66p  (0) 2020.02.27
전세계에서 가장 멋 없는 레이아웃 실습 ③  (0) 2020.02.19

+ Recent posts

티스토리툴바