예순일곱 번째 수업

정혅·2024년 10월 6일

더 조은 아카데미

목록 보기

71/76

JSP 초기 세팅

Apache Tomcat 설치 > 9버전 다운로드 받았음
- 압축 해제 후 C드라이브에 위치 시킨다.
Eclipse 에서 Eclipse IDE for Java EE Developers 다운로드(설치 파일에서! [나는 class > dev안에)
- eclipse 에서 프로젝트(Dynamic Web Project -> Generate Web.xml) 만들고 우클릭으로 properties 들어가서 Server에서 Apache 서버 선택

Eclipse에서 Window - Preferences - Web - JSP Files - Editor - Templates > New > Name : HTML5 JSP / Context : New JSP / Description : HTML5 JSP 기본템플릿 / Pattern에 아래 코드 내용 복사

  <%@ page language="java" contentType="text/html; charset=${encoding}" pageEncoding="${encoding}"%>
  
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="${encoding}">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Insert title here</title>
  </head>
  <body>
  ${cursor}
  </body>
  </html>

New - JSP File을 선택 후 Finish를 누르지 않고 Next를 눌러 다음 화면으로 넘어간다. 거기서 위에서 만 파일을 선택

Eclipse 기본 인코딩 변경
- Window - Preferences - General - Workspace - Text file encoding - Other UTF-8
- Window - Preferences - Web - CSS Files - Encoding : UTF - 8 선택
- Window - Preferences - Web - HTML Files - Encoding : UTF - 8 선택
- Window - Preferences - Web - JSP Files - Encoding : UTF - 8 선택
- Window - Preferences - General - Content Types - Text - Default encoding UTF - 8
Eclipse 크롬 브라우저로
- Window - Preferences - General - Web Browser - Use external web browser - Chrome

반복문 예제

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<%
    for(int i=0;i<5;i++){
        out.print("hi"+"<br>");
    }
%>

<hr>
<%
    for(int i=0;i<5;i++){
%>    
    hi<br>
<%
    }
%>    


</body>
</html>

첫 번째 for 문은 java코드를 직접 실행하므로, 복잡한 로직을 처리하는데 유용하다 <> html, java 코드가 섞여 있어 가독성이 떨어질 수 있다.
두 번째 for 문은 html과 java 코드를 분리하므로, 가독성이 좋다. <> 이 방식은 복잡한 로직을 처리하는데 한계가 있다.

구구단 출력하기

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<%!
    public int sum(int num1, int num2){
    return num1 * num2;
}
%>
<table border = "1">
<%
    out.print("<caption>구구단</caption>");
    for(int i = 1; i < 10; i++){
        out.print("<tr>");
        for(int j = 2; j < 10; j++){
            out.print("<td> " + i + " * " + j + " = " + sum(i, j) + "</td>");
        }
        out.print("</tr>");
    }
%>
</table>
<%="이것은 표현식예제" %>
</body>
</html>
<%-- 이것은 jsp 주석입니다.--%>
<!-- 이것은 html 주석입니다. -->

JSP 구성 요소

지시자(Directive) : <%@ %> : 페이지의 전반적인 설정 담당(언어, 타입, 인코딩 등)
- <@ page 속성 명 = "속성 값"속성 명 = "속성 값"... %>
주석(Comment) : <%-- --%> , : JSP페이지에서 주석을 작성
- JSP 엔진에 의해 무시되며, 웹브라우저에서 소스를 보더라도 보이지 않는다.
선언(Declaration) : <%! %> : 전역변수, class, function 선언 > 반드시 ;(세미콜론)이 존재해야 한다.
- 이 태그 안에서 선언된 변수나 메소드는 JSP페이지 전체에서 사용 가능
- 이곳에서 선언된 변수, 메소드는 처음 요청이 있을 때 한 번만 호출된다.
표현식(Expression) : <%= %> : JSP 페이지에서 결과 값을 출력하는데 사용 세미콜론 작성 X > 반환 코드 밖에 기술할 수 없다.
- 표현식 안 코드의 결과값을 문자열로 변환하여 html로 출력한다. html태그 사용 가능
- <%= "Hello, World!" %> : Hello, World 라는 문자열 출력
스크립트릿(Scriptlet) : <% %> : JSP 페이지에서 실제 코드들(JAVA) 을 실행하는데 사용 > 반드시 ;(세미콜론) 사용
- 서버에서 실행되며, 이를 통해 동적인 웹 페이지 생성 가능
- 스크립트 릿에서 선언된 변수는 요청 때마다 호출 > 그 요청이 있을 때 마다 변수의 값 초기화
- 코드를 서블릿 코드로 변환시켜 실행 > html태그를 사용하면 문자열로 취급되어 원하는 동작 x
- <% for(int i = 0; i < 10; i++) {%> <%= i %> <% } %> 0~9까지 숫자 출력
액션태그(Action tag) : <jsp:action> </jsp:action> : JSP 페이지에서 서버 측 작업을 관리하는데 사용
- 다른 파일을 포함하거나, 요청을 전달하거나, 세션 속성을 조작하는 등의 작업을 수행할 수 있다.

JSP 내장 객체 (암시 객체)

new를 사용하지 않고, 바로 사용이 가능한 객체

request

웹 브라우저를 통해 서버에 어떤 정보를 요청하는 것 > 요청 정보는 request 객체가 관리
메서드
1. getMethod() : get방식과 post방식을 구분할 수 있다.
2. getSession() : 세션 객체를 얻는다.
3. getProtocol() : 해당 프로토콜을 얻는다.
4. getRequestURL() : 요청 URL을 얻는다.
5. getParameter(String=파라미터 이름) : 클라이언트로부터 전송된 요청의 특정 파라미터 값을 받을 때 사용 > 매개변수가 없는 경우는 Null이 반환
  - 인자 안에 파라미터 이름을 넣고 메소드를 호출하면, 해당 이름의 첫 번째 값만을 문자열로 반환한다.
  - http://example.com?username=son&age=25 라는 url에서 ?뒤에 오는 username, age는 파라미터 이름 / son, 25는 각 파라미터의 값
6. getParameterValues(String) : 동일한 이름의 모든 파라미터 값을 문자열 배열로 반환한다. > 매개변수가 없는 경우 Null이 반환
7. setAttribute(String name, Object value) : 데이터 이름, 데이터 값을 지정하고 세션 범위의 데이터 값을 등록한다. > 이미 존재하면 새로 지정된 데이터 값을 덮어 쓴다.
8. getAttribute(String name) :인수에 있는 데이터 이름에 해당하는 세션 범위의 데이터 값을 반환한다. > 이름이 없는 경우 null 반환

response

서버가 클라이언트에게 보내는 응답을 나타낸다. > 인터페이스 객체 변수 > 클라이언트에 대해 헤더 정보, HTTP 상태, Cookie등을 반환 할 때 사용

cookie는 웹사이트가 사용자의 컴퓨터에 저장하는 작은 텍스트 파일(사용자의 장치 인식)
메서드
1. sendRedirect(String) : 인수에 저장된 URL로 리디렉션(이동) 한다.

pageContext

JSP페이지와 관련된 모든 네임스페이스에 대한 액세스를 제공한다. > 페이지 속성에 액세스하고, 애플리케이션 세부 정보 위에 레이어를 제공할 수 있다.

application : 웹 애플리케이션의 컨텍스트

웹 애플리케이션의 전반적인 정보를 얻는데 사용된다.

out

JSP 페이지의 출력 스트림을 나타낸다. > html, 마크업 등의 동적으로 생성된 텍스트를 웹 브라우저에 출력하는 데 사용된다.

page : 현재의 서블릿 인스턴스

현재의 JSP페이지(=서블릿)을 참조하는데 사용된다. > java.lang.Object의 인스턴스

config : 현재의 서블릿 구성

현재의 JSP페이지에 대한 구성 정보를 얻는데 사용

session : 현재의 세션

사용자의 세션 데이터를 저장하고, 다른 JSP페이지에서 사용할 수 있도록 사용

exception : 에러 페이지에서만 사용

현재 페이지에서 발생환 예외를 나타낸다. > 예외 정보를 얻어오는데 사용

response 내장 객체

사용자의 요청을 처리한 결과를 서버에서 웹 브라우저로 전달하는 정보를 저장한다. >> 서버는 응답 헤더와 요청 처이 결과 데이터를 웹 브라우저로 보낸다.

sendRedirect()

sendRedirect() : 설정한 URL 페이지로 강제 이동한다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
    <%
response.sendRedirect("http://www.google.com");
%>
</body>
</html>

파일을 실행시켜 보면 구글 웹 페이지로 강제 이동된것을 볼 수 있다.

form 처리 >> form태그, input 태그

form 태그

사용자가 다양한 정보를 입력하고, 서로 전달할 때 사용하는 태그로, 사용자가 다양한 정보를 입력하는 양식을 포함하는 최상위 태그이다.

속성	설명
action	폼 데이터를 받아 처리하는 웹 페이지의 URL설정
method	폼 데이터가 전송되는 HTTP 방식을 설정
name	폼을 식별하기 위한 이름을 설정
target	폼 처리 결과의 응답을 실행할 프레임을 설정
enctype	폼을 전송하는 콘텐츠 MIME유형을 설정
accept-charset	폼 전송에 사용할 문자 인코딩을 설정

method의 Get / Post 방식의 차이점

웹 브라우저와 서버간에 정보를 주고 받을 때 사용하는 방법

폼을 전송할 HTTP 방식의 기본값은 GET으로, method속성 생략 가능(get메소들 사용할 것이라면)

POST 메소드 : 서버에 데이터를 전송하여 리소스를 생성하거나 업데이트 하는데 사용된다.HTTP요청 본문에 저장되며, 브라우저 기록에 남지 않는다.
- request.setCharacterEncoding("UTF-8"); >> post는 body안에
GET 메소드 : 서버에서 데이터를 요청하는데 사용된다. URL에 쿼리 문자열(이름/값 쌍)을 포함해 서버로 전송된다.GET요청은 브라우저 기록에 남는다.(보안에 취약)
- get은 아파치가 자동으로 인코딩을 처리해주기 때문에 위처럼 명시해 줄 필요 없다. >> url을 보면 파일 뒤에 ? 물음표 형식으로 들어가서 넘어간다. 여러 개의 요청 파라미터를 전송할 경우 앰퍼샌드(&)를 사용해 연결 길이 제한이 있고, 민감한 데이터를 다룰 때는 사용하지 않아야 한다.
자동 Import는 기존 java와 유사

메소드를 사용할 때는 form태그를 반드시 써야하는데, 아무것도 적지 않으면 get이 Default다.

폼 데이터 처리를 이용해 값 주고받기 getParameter()

입력받는 부분(요청 파라미터)은 form태그로 묶어서 post해줄 파일을 action에 명시해주고, method의 post를 이용해 서버에 데이터를 전송한다.
여기서 서버에 데이터를 전송해 프로퍼티를 받아올 이름은 name으로 명시한다.
- id는 프론트엔드(css, javascript)에서 요소를 조작하거나 참조하는데 사용되고, name은 주로 서버 측에서 폼 데이터를 처리하는데 사용된다.
getParameterValues() : 폼 페이지에서 입력된 체크박스에 다중 선택된 값들을 배뎔로 얻어오도록 하는 메소드 > for문 이용해서 out.print()해서 출력하면 됌
사용자에게 입력받는 코드

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
    <form action="practice2.jsp" method="post">
        <p>
            아 이 디 : <input type="text" id="id" name="name" required>
        </p>
        <p>
            비밀번호 : <input type="password" id="passwd" name="passwd" required>
        </p>
        <p>
            <input type="submit" value="전송">
        </p>
    </form>
</body>
</html>

입력받은 값을 요청해서 출력하는 코드

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
    <%
    request.setCharacterEncoding("utf-8");
    String userid = request.getParameter("name");
    String userPw = request.getParameter("passwd");

    if (userid != null && userPw != null && userid.equals("관리자") && userPw.equals("1234")) {
        out.print("아이디 : " + userid);
        out.print("비밀번호" + userPw);
    } else {
        out.print("로그인을 실패하셨습니다. 올바른 아이디와 비밀번호를 입력해주세요.");
    }
    %>
</body>
</html>

userid와 userPw가 null인 경우 NullPointerException예외가 발생하므로, null인지 아닌지 검증을 반드시 해줘야한다.
post방식으로 전달받은 데이터는 request.setCharacterEncoding()을 이용해 인코딩을 반드시 해야하며, request.getParameter()을 이용해 name속성을 이용하여 사용자가 입력한 폼 파라미터 값을 받아올 수 있다.

요청 파라미터의 전체 값 받기

메소드	형식	설명
getParameterNames()	java.util.Enumeration	모든 입력 양식의 요청 파라미터 이름을 순서에 상관없이 Enumeration(열거형) 형태로 전달받는다.
hasMoreElements()	boolean	Enumeration(열거형)요소가 있으면 true를 반환하고, 그렇지 않으면 false를 반환
nextElement()	E(Enumeration 객체를 생성할 때의 타입)	Enumeration(열거형) 요소를 반환

HTML에서 메타 데이터 : meta name 태그

이 태그는 웹 페이지에 대한 메타데이터를 제공하는 역할을 한다.
- 메타 데이터는 데이터에 대한 정보로, 웹 브라우저, 검색 엔진, 다른 웹 서비스들이 웹 페이지의 내용을 이해하고, 표시하는데 도움된다.
- html에서 사용되는 태그
name의 속성 값에 따라 메타 데이터의 종류가 결정된다.

application-name : 웹 페이지에서 실행 중인 애플리케이션의 이름을 지정한다.
charset : 문자 코드의 종류를 설정한다. > 인코딩 방식 선언
author : 웹 페이지의 저자를 지정한다.
description : 웹 페이지의 내용에 대한 짧고 정확한 요약을 제공한다. > 검색 결과에 표시되는 문자 지정
generator : 웹 페이지를 생성한 소프트웨어의 식별자를 지정한다.
keywords : 웹 페이지를 내용과 관련된 키워드를 쉼표로 구분해 나열한다. > 검색 엔진에 의해 검색되는 단어 지정
viewport : 웹 페이지가 모바일 장치에서 어떻게 보여질지를 제어한다.
robots : 자신의 사이트 중 일부 페이지가 구글에 노출되길 원치 않을 때 사용한다.
- noindex : 검색 결과에 이 페이지를 표시하지 않는다.
- nofollow : 이 페이지의 링크를 따라가지 않는다.
- noarchive : 검색 결과에 저장된 페이지 링크를 표시하지 않는다.

🏷️ 메타(meta) 태그 종류 & 사용법 (tistory.com)

JDBC API 이용해 MYSQL에 접속하기

JDBC 드라이버 로드 : 데이터베이스에 접속하기 위한 라이브러리로, com.mysql.jdbc.Driver 클래스를 로드해야한다. 예외가 발생할 수 있기 때문에 예외처리를 해줘야한다.
- String driver = "com.mysql.cj.jdbc.Driver";
- Class.forName(driver);

try {
    Class.forName(driver);
} catch (ClassNotFoundException e) {
    out.write("mysql driver load fail!");
    e.printStackTrace();
}

데이터베이스 연결 : DriverManager.getConnection() 메서드를 사용해 데이터베이스에 연결 > DB URL, 해당 계정 사용자 이름, 비밀번호를 인자로 받는다. 이 또한 예외가 발생할 수 있기 때문에 예외처리를 해줘야 한다.

private String final driver = "com.mysql.cj.jdbc.Driver";
private String final url = "jdbc:mysql://localhost:3306/project?serverTimeZome=UTC";
private String final sqlId = "root";
private String final sqlPw = "1234";


try{
    Class.forName(dirver); //1번 jdbc드라이버 로드
}catch(ClassNotFoundException e){
    out.write("드라이브 로드 실패");
    e.printStackTrace();
}
try (Connection conn = DriverManager.getConnection(url, user, psword); //2번 데이터베이스 연결
       {

} catch (SQLException e) {
    out.write("mysql 연결 실패");
    e.printStackTrace();
}

SQL 쿼리 실행 / 결과 처리 : Connection 객체에서 PreparedStatement 객체를 생성해 SQL 쿼리를 실행한다. > PreparedStatement 는 SQL 쿼리에 파라미터를 동적으로 설정할 수 있게 해준다.

executeUpdate() : DDL로, 데이터를 수정, 변경하거나, 삭제할 때 사용된다. int값을 반환한다. >> SQL문에 의해 영향 받은 레코드의 수를 나타낸다.
- executeQuery() : SELECT문을 실행하는데 사용된다. 즉, 데이터를 조회할 때 사용한다. ResultSet객체를 반환해, SQL쿼리의 결과를 나타내며, 이를 통해 결과 데이터를 순회하고 읽을 수 있다.
아래 url 문장에 localhost:3306 은 포트번호를 의미하고 그 뒤에 project는 sql의 데이터베이스를 의미한다.
- sql에 문장을 넣을 때 insert into ~ 이 물결 부분에는 테이블 명을 입력한다.
setString() 메소드를 이용해 몇번째 물음표에 무슨 값을 넣을지 지정해준다.

//method=post 방식으로 데이터를 넘겨주면 반드시 인코딩 해야함
request.setCharacterEncoding("UTF-8");

private String final driver = "com.mysql.cj.jdbc.Driver";
private String final url = "jdbc:mysql://localhost:3306/project?serverTimeZome=UTC";
private String final sqlId = "root";
private String final sqlPw = "1234";

//사용자에게 폼 태그를 이용해 입력받은 값들을 가져오기
String name = request.getParameter("name");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String sql = "insert into member (name, id, pw) values(?,?,?)";

try{
    Class.forName(dirver); //1번 jdbc드라이버 로드
}catch(ClassNotFoundException e){
    out.write("드라이브 로드 실패");
    e.printStackTrace();
}
try (Connection conn = DriverManager.getConnection(url, user, psword); //2번 데이터베이스 연결
      PreparedStatement pstmt = conn.prepareStatement(sql)) {//3번 sql쿼리 실행

    pstmt.setString(1, name); //PreparedStatement 객체를 이용해 파라미터를 동적으로 설정
    pstmt.setString(2, id);
    pstmt.setString(3, pw);
    int i = pstmt.executeUpdate();//SQL에 사용자에게 받은 입력값 삽입 > int로 반환
    if (i > 0) {
        System.out.println("insert success");
        response.sendRedirect("welcom.htm");
    } else {
        System.out.println("insert fail");
        response.sendRedirect("fail.htm");
    }
} catch (SQLException e) {
    out.write("mysql 연결 실패");
    e.printStackTrace();
}

위에서 try-with-resouces 를 사용해 자동으로 자원을 정리하고 있기 때문에 개발자가 직접 close()를 호출할 필요가 없다.

JSP 에서 mysql 연결해 회원가입 폼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <form action="InputOK.jsp" method="post">
        이름 : <input type="text" name="name"><br>
        아이디 : <input type="text" name="id"><br>
        비밀번호 : <input type="text" name="pw"><br>
        <input type="submit" value="회원가입"> <input type="reset" value="취소">
    </form>
</body>
</html>

method = "post" : 사용자가 입력한 데이터를 서버로 전송하는 방식 post
- 사용자가 입력한 데이터를 http 요청 본문에 포함시켜 서버로 전송한다.
- 데이터 크기에 제한이 없다.
- 데이터를 url에 포함시키지 않으므로, 민감한 정보 전송에 적합하다.
- 모든 유형의 데이터를 전송할 수 있다.

<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
%>
<%!private final String driver = "com.mysql.cj.jdbc.Driver";
    private final String url = "jdbc:mysql://localhost:3306/project?serverTimezone=UCT";
    private final String user = "root";
    private final String psword = "1234";%>

<%
String name = request.getParameter("name");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String sql = "insert into member (name, id, pw) values(?,?,?)";
try {
    Class.forName(driver);
} catch (ClassNotFoundException e) {
    out.write("mysql driver load fail!");
    e.printStackTrace();
}
try (Connection conn = DriverManager.getConnection(url, user, psword);
        PreparedStatement pstmt = conn.prepareStatement(sql)) {
    pstmt.setString(1, name);
    pstmt.setString(2, id);
    pstmt.setString(3, pw);
    int i = pstmt.executeUpdate();
    if (i > 0) {
        System.out.println("insert success");
        response.sendRedirect("welcom.htm");
    } else {
        System.out.println("insert fail");
        response.sendRedirect("fail.htm");
    }
} catch (SQLException e) {
    out.write("mysql connect fail!");
    e.printStackTrace();
}
%>

request.setCharacterEncoding("UTF-8") : 클라이언트로부터 전송된 데이터를 UTF-8로 인코딩하여 읽어들이라는 의미 > post요청의 본문을 인코딩하는데 사용 (get은 사용x 아파치에서 자동으로 인코딩 해줌 )

회원가입 성공

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
<h1>환영합니다.</h1>
</body>
</html>
</html>

회원가입 실패

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원가입에 실패했습니다.</h1>
</body>
</html>

response.sendRedirect() : 메소드가 호출되면, 웹 브라우저는 새로운 요청을 생성하여 지정된 url로 리다이렉트 한다. >> 메소드가 호출된 후에도 아래 jsp코드들은 계속 실행된다.

sentRedirect() : 를 이용해 페이지 이동

예제

유효성 검사

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<style>
table, tr, td {
    border: 1px solid black;
}

table {
    width: 800px;
    margin: 0 auto;
}

#submit {
    text-align: center;
}

#pwChkTxt {
    color: red;
}

tr>td:first-child {
    width: 30%;
}

tr>td:last-child {
    width: 70%;
}
</style>
</head>
<body>
    <form method="post" action="JSPTTest5Result.jsp">
        <table>
            <caption>회원가입</caption>
            <tr>
                <td><label for="name">이름 </label></td>
                <td><input type="text" name="name" id="name" required></td>
            </tr>
            <tr>
                <td><label for="id">아이디 </label></td>
                <td><input type="text" name="id" id="id" required></td>
            </tr>
            <tr>
                <td><label for="pw">비밀번호 </label></td>
                <td><input type="password" name="pw" id="pw" required></td>
            </tr>
            <tr>
                <td><label for="pw2">비밀번호 확인 </label></td>
                <td><input type="password" name="pw2" id="pw2" required><span id="pwChkTxt"></span></td>
            </tr>
            <tr>a
                <td><label for="email">이메일 </label></td>
                <td><input type="email" name="email" id="email" required></td>
            </tr>
            <tr>
                <td>취미</td>
                <td><input type="checkbox" name="hobby" value="reading" id="reading"><label
                    for="reading">독서</label> <input type="checkbox" name="hobby" value="cooking" id="cooking"><label
                    for="cooking">요리</label> <input type="checkbox" name="hobby" value="running" id="running"><label
                    for="running">조깅</label> <input type="checkbox" name="hobby" value="swimming" id="swimming"><label
                    for="swimming">수영</label> <input type="checkbox" name="hobby" value="sleeping" id="sleeping"><label
                    for="sleeping">취침</label></td>
            </tr>
            <tr>
                <td>전공</td>
                <td><input type="radio" name="major" value="Korean" id="Korean" required><label
                    for="Korean">국어</label> <input type="radio" name="major" value="English" id="English"><label
                    for="English">영어</label> <input type="radio" name="major" value="Math" id="Math"><label
                    for="Math">수학</label> <input type="radio" name="major" value="Design" id="Design"><label
                    for="Design">디자인</label></td>
            </tr>
            <tr>
                <td><label for="aMobileCarrier">전화번호</label></td>
                <td><select name="aMobileCarrier">
                        <option value="SKT">SKT</option>
                        <option value="KT">KT</option>
                        <option value="LG">LG</option>
                </select></td>
            </tr>
            <tr>
                <td colspan="2" id="submit"><input type="submit" value="전송"> <input type="reset"
                    value="초기화"></td>
            </tr>
        </table>
    </form>
    <script>
var pw = document.getElementById("pw");
var pw2 = document.getElementById("pw2");
var pwChkTxt = document.getElementById("pwChkTxt");
pw.addEventListener('keyup', passwordCheck);
pw2.addEventListener('keyup', passwordCheck);
function passwordCheck()
{
    if(pw.value != pw2.value){
        pwChkTxt.innerHTML = "비밀번호가 다릅니다.";
    }
    else if(pw.value == pw2.value){
        pwChkTxt.innerHTML = "";
    }
}
</script>
</body>
</html>

입력 후 정보 출력

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
</head>
<body>
<%
    request.setCharacterEncoding("UTF-8");

    String name = request.getParameter("name");
    String id = request.getParameter("id");
    String pw = request.getParameter("pw");
    String email = request.getParameter("email");
    String[] hobby = request.getParameterValues("hobby");
    String major = request.getParameter("major");
    String aMobileCarrier = request.getParameter("aMobileCarrier");

    out.print("이름 : " + name + "<br>");
    out.print("아이디 : " + id + "<br>");
    out.print("비밀번호 : " + pw + "<br>");
    out.print("이메일 : " + email + "<br>");
    out.print("취미 : " + Arrays.toString(hobby) + "<br>");
    out.print("전공 : " + major + "<br>");
    out.print("통신사 : " + aMobileCarrier + "<br>");
%>
</body>
</html>