이전 글에서 이어지는 포스트↓
입력 양식 - 로그인 폼
입력 양식, 폼 태그, 폼 객체 사용자에게 정보를 입력받는 요소 사용자에게 입력받은 데이터를 전달하는 방식에는 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 |