본문 바로가기

이클립스/게시판만들기

[java/html/js]게시판 프로젝트-로그인페이지 화면 만들기

게시판 화면으로 이동하기 전 로그인을 해야합니다.

사용자의 아이디와 비밀번호를 입력받을 화면을 html코드로 작성해보겠습니다.

 

 

생성한 다이나믹 웹 프로젝트에서 진행합니다.

 

1. WebContent - WEB-INF - html 우클릭 - New - HTML File 선택

 

2. 파일명을 Login.html으로 설정 후 Finish

 

3. 다음과 같이 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>LOGIN PAGE</h1>
<div>
	<table>
		<tr>
			<td><label>ID</label></td>
			<td><input type="text" id="userId" placeholder="아이디를 입력하세요."></td>
			<td rowspan="2"><button id="btnLogin">로그인</button></td>
		</tr>
		<tr>
			<td><label>PW</label></td>
			<td><input type="password" id="passwd" placeholder="비밀번호를 입력하세요."></td>
		</tr>
	</table>
</div>
</body>
</html>

 

4. 이클립스 코드 위에서 Alt+Enter 누르면 프로퍼티로 이동합니다.

아직 서버를 생성하지 않았기 때문에 경로를 복사해 웹브라우저에서 이동!

 

로그인페이지 생성 완료.

 

다음시간엔 js파일과 연결하여 페이지에 이벤트를 주고, 서버를 생성하여 실행해보겠습니다.