입력 양식 - 로그인 폼

입력 양식, 폼 태그, 폼 객체

사용자에게 정보를 입력받는 요소

 

사용자에게 입력받은 데이터를 전달하는 방식에는 

GET, POST 두 가지가 있는데,

주소를 변경하지 않고 보안을 유지하며 데이터를 전달하는 POST 양식을 좀 더 많이 쓴다.

 

 

 

 

 

로그인 폼

가장 쉬운 양식.

ID란과 PW란 두개를 만들어 보았다.

 

 

 

 

 

login.jsp 라는 파일은 생성하지 않았지만 임의로 지정했다.

 

<form method="post" action="login.jsp">
<!-- action: 웹 프로그램 명, method: 값을 전송하는 방식 get / post>
생성할 로그인폼

</form>

 

 

 

 

이제 위의 form 태그 사이에 들어갈 내용을 작성해야 한다.

 

 

폼은 <input type> 이라는 태그로 생성하는데,

input type만 입력해도 어떤 양식을 쓸 수 있는지 목록이 나온다.

 

그러니 모든 목록을 외울 필요는 없지만

어떤 타입이 어떤 기능을 수행하는지는 기억해둘 필요가 있다.

 

 

 

 

먼저 ID 폼을 작성한다.

 

ID

<input type="text" size=20 maxlength=10 autofocus="autofocus" required="required">

 

size :  text 폼이 담을 수 있는 바이트 크기

maxlength=10 : 최대입력수를 10글자로 제한

autofocus : 페이지에 진입하자마자 이 폼이 활성화되어 커서가 깜빡거린다.

required : SQL의 not null 같은 유효성 검사 기능을 수행한다.

null 값으로 로그인 하려 하면 다음과 같은 메시지가 뜨며 넘어가지 않는다.

 

 

 

 

 

 

다음은 비밀번호 폼이다.

 

PW

<input type="password" size=20>

 

값을 입력하지 않으면 id에 쓰인 text 타입의 폼과 같은 것처럼 보이지만,

password 폼은 입력하는 내용이 노출되지 않는다.

 

 

 

 

 

 

 

 

 

로그인과 취소 버튼을 만든다.

 

로그인 버튼

<input type="submit" value="로그인">

취소 버튼

<input type="reset" value="취소">

 

 

submit 타입은 전송 기능이 있다.

 

이 코드를 작성하며 가장 상단에 다음과 같은 코드를 적었는데

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

login.jsp 라는 파일은 존재하지 않지만 임의로 작성했다고 서술했다.

저 파일이 존재한다면 사용자가 입력한 로그인 정보가 데이터베이스에 저장되어 유효성을 검사하고 

일치/불일치 여부에 따라 어떤 페이지를 출력할지 결정할 것이다.

 

또, submit 타입은 값을 입력하지 않아도 무조건 값이 넘어간다.

그것을 방지하기 위해 ID란에 not null 과 같은 기능을 수행하는 required 기능을 추가한 것이다.

 

취소 버튼은 말 그대로 reset 타입이다.

이것을 누르면 ID와 PW란의 모든 값이 지워지며 초기화된다.

 

 

 

 

 

 

 

전체 코드는 다음과 같은 모습이다.

레이아웃을 제어하기 쉽도록

테이블을 생성해서 그 안에 폼을 넣는 방식으로 하였다. (border 값을 지정하지 않아서 투명하게)

 

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

<table align=center>
	<caption>로그인</caption> <!-- 표의 타이틀 값. h 태그를 써도 상관x -->
	<tr>
		<td align=center>ID</td>
		<td>
			<input type= size=20 maxlength=10 autofocus="autofocus" required="required">
		</td>
	</tr>
	<tr>
		<td align=center>PW</td>
		<td>
			<input type="password" size=20>
		</td>
	</tr>
	<tr><td><br></tr>
	<tr>
		<td colspan=2 align=center>
			<input type="submit" value="로그인">
			<input type="reset" value="취소">
		</td>
	</tr>
</table>

</form>

 

 

 

 

 

로그인 정보를 처리할 login.jsp 파일을 생성하지 않았기 때문에

로그인 버튼을 누르면 다음과 같은 에러 메시지가 뜬다. ☺