이전 글에서 이어지는 포스트↓

 

 

입력 양식 - 로그인 폼

입력 양식, 폼 태그, 폼 객체 사용자에게 정보를 입력받는 요소 사용자에게 입력받은 데이터를 전달하는 방식에는 GET, POST 두 가지가 있는데, 주소를 변경하지 않고 보안을 유지하며 데이터를

kiwikiwisae.tistory.com

 

 

 

 

 

 

1. 앞서 작성한 포스트의 로그인 폼, 비밀번호 폼 코드에 다음과 같은 내용을 추가한다.

name 속성으로 값을 전달한다.

 

 

 

 

 

변경된 내용이 포함된 전체 코드

 

<form method="post" action="login.jsp">

<table align=center>
	<caption>로그인</caption>
	<tr>
		<td align=center>ID</td>
		<td>
			<input type="text" 
				size=20 maxlength=10 
				autofocus="autofocus" 
				required="required"
                name="id"> <!-- ID를 변수로 설정 -->
		</td>
	</tr>
	<tr>
		<td align=center>PW</td>
		<td>
			<input type="password" 
				size=20
				required="required"
				name="passwd"> <!-- passwd를 변수로 설정 -->
		</td>
	</tr>
	
	<tr><td><br></td></tr>
	
	<tr>
		<td colspan=2 align=center>
			<input type="submit" value="로그인">
			<input type="reset" value="취소">
		</td>
	</tr>
</table>

 

 

 

 

2. jsp 파일 하나를 생성한다. 이름은 login.jsp

로그인 버튼을 누르면 입력한 아이디와 비밀번호를 출력하는 기능을 넣어볼 예정이다.

 

 

 

 

 

 

 

 

3. 다음과 같은 코드를 입력한다.

 

ID : <%=request.getParameter("id")%>			
<!-- 앞서 설정한 변수인 id를 매개변수로 넣어준다. --> <br>

비밀번호 : <%=request.getParameter("passwd")%>		
<!-- 앞서 설정한 변수인 passwd을 매개변수로 넣어준다. --> <br>

 

 

 

 

 

 

4.저장 후 로그인 폼을 실행시켜 아이디와 비밀번호를 1234로 입력 후 로그인했다.

어제는 로그인하면 페이지를 찾을 수 없다는 오류 창이 떴는데,

이제는 아이디와 비밀번호가 출력된다.

 

 

 

 

 

5. 지금까지는 값을 넘기는 방식이 post 방식이었다.

이번엔 get 방식으로 실행해 보았다.

최상단의 코드를 post -> get 으로 변경한다.

<form method="get" action="login.jsp">

 

 

 

 

 

6. 똑같이 로그인해본다

확실히 사용자가 입력한 데이터가 모두 노출되는 get 방식은 보안에 취약해보인다.

 

 

 

 

 

아직 jsp에 대해 배운 바가 없어 간략히 코드만 입력했지만,

get 방식과 post 방식의 차이점에 대해서 배울 수 있었다.

 

 

 

'웹표준 > HTML5' 카테고리의 다른 글

입력 양식 - 회원가입  (0) 2022.08.05
입력 양식 - 게시판  (0) 2022.08.05
입력 양식 - 로그인 폼  (0) 2022.08.04
기본 태그 - 테이블 table  (0) 2022.08.04
기본 태그 - 앵커 태그 a  (0) 2022.08.04

+ Recent posts