jsp + html : 로그인, 회원가입 창

html 조건

모두 한 페이지에 작성하며, process.jsp 파일과 연결하여 값을 넘겨준다.

1. 보여질 형상은 아래와 같다

로그인 : 아이디 (입력창) 비밀번호 (입력창)
회원가입
: 아이디 ( * 필수 표시) (입력창)
: 비밀번호 ( * 필수 표시) (입력창)
: 비밀번호 확인 ( * 필수 표시) (입력창)
: 이름 ( * 필수 표시) (입력창)
: 메일주소 ( * 필수 표시) (입력창)
: 전화번호 (입력창)
텍스트 입력창
(기본입력)
텍스트 입력창 입니다.
기본 입력입니다.
가입하기 / 다시쓰기 버튼

2. 조건

회원가입의 아이디, 비밀번호, 비밀번호 확인는 자동완성하고 필수이다.
회원가입의 이름, 메일주소는 필수이다.
텍스트 입력창의 줄수는 5줄이고 칸수는 60칸이다.
가입하기는 input으로 한다
다시쓰기는 input으로 한다.

CSS 조건

form의 fieldset은 마진은 10px 0
로그인, 가입하기, 텍스트 입력창 폰트 사이즈 18px, color는 #0066ff, 두께는 600
회원가입에서 아이디 비밀번호, 비밀번호 확인, 이름, 메일 주소, 전화번호는 폰트사이즈 14px, 너비 120px, 위치는 float:left
* 은 강조 태그를 사용한다. 크기 15px, 색은 빨강색 굵기는 800
회원가입에서 아이디 비밀번호, 비밀번호 확인, 이름, 메일 주소, 전화번호는 목록태그로 만들고 점은 감춘다.
가입하기, 다시쓰기 버튼은 가운데에 맞춘다.

html 작성하기

같은 곳에 파일을 넘겨 줄 것이기 때문에 폼태그의 구분없이
<form action="process.jsp" method="post" /> 연결해 주었다.
method 로 값을 넘기는 방식은 post 또는 get 으로 두 가지가 있는데,

일단 get방식으로 넘기면 값이 주소에 줄줄히 붙어 나오기때문에.. 비밀번호나 번호와 같이 중요한 개인정보가 있는 이번 경우에는 post로 넘겨주는 방식을 사용하였다.

로그인 창 만들기

먼저 fieldset 으로 묶어주었다. 만들어 줘야할 것이 3가지이기 때문에 구역을 구분할 수 있도록 아래와 같이 표시하고 싶었기 때문이다.

<legend> 로그인 </legend>
구역을 표시해 주었으니 이 곳이 어떤 구역인지 표시해주고자 하였다. 제목을 달아주는 것이다.
<label for="user_id"> 아이디 </label>
라벨을 달아주었다. for로 넘기는 것은 식별자이다. 다른 값과 겹치지 않게 임의로 작성해 주면 된다.
<input type="text" id="user_id" name="user_id" size="10" autofocus>
type = 넘겨줄 값은 text 이다
id = 넘겨줄 식별자, lable의 for랑 연결된 부분
name = jsp에서 받아서 사용할 값, 다른 파일로 넘겨줄 파라미터 명
size = 최대 입력 갯수
autofocus = 바로 작성할 수 있도록 포커스가 자동 위치

입력창이 작성되었고, 따로 클릭하지 않아도 포커스가 깜박이며 기다리고 있는 것을 확인 할 수 있다.
같은 방법으로 비밀번호 창을 작성한다.
단, input type을 password로 작성한다. 그렇게 하면 자동으로 * 처리되어 입력시 화면에 노출되지 않는다.
<label for="user_pw"> 비밀번호 </label>
<input type="password" id="user_pw" name="user_pw">

회원가입 창 만들기

fieldset 으로 묶어주고 <legend> 회원가입 </legend> 으로 제목을 달아준다.
목록처럼 출력해줄 것이기 때문에 먼저 <ul>로 묶어주고 <li>로 상세 내역을 달아준다. 아래는 6개를 작성해준 것이고, 이와 같이 필요한 만큼 <li>를 작성해주면된다.
<label class="reg" for="new_id">
<li> 에 라벨을 달아주는데, css로 디자인 해야하니 class도 달아준 것이다.

<input type="text" id="new_id" name="new_id" size="20" autocomplete="on" required>
required : 필수입력
autocomplete="on" : 자동완성을 켜주겠다
이런 식으로 비밀번호, 비밀번호 확인, 이름, 메일주소, 전화번호를 모두 작성해준다.
단, 비밀번호는 type="password" / 메일주소 type="email" / 전화번호 type="tel" 로 작성해주면 좋다.
필수입력에는 * 을 붙여주기로 하였다.
사용하는게 <small>도 있고 여러개 있겠지만 여기서는 css로 작성시 편하게 하기 위해 <em> * </em> 을 사용해 주었다.
<label class="reg" for="new_id"> 아이디 <em> * </em> </label>
이런 식으로 위치를 잡아주면 된다.

텍스트 입력창 만들기

간단하다! textarea를 사용하면 된다.
<fieldset class="easys">
fieldset으로 묶어준 후, css 적용을 위해 class로 구분자를 달아준다.
<legend> 텍스트 입력창 </legend>
라벨로 제목을 달아주고
<textarea rows="intro" cols="60" rows="5" name="intro">
조건에서 줄수와 칸수를 지정해주었으니 그대로 작성해주고
텍스트 입력창 입니다.
기본 입력입니다.
기본값으로 작성될 내용을 그냥 적어준다.

가입하기 / 다시쓰기 버튼

<fieldset class="sendform">
fieldset으로 묶어주고
<input type="submit" value="가입하기">
값을 전송할 버튼이니 type을 'submit'로 설정한다. value는 버튼에 적힐 글자이다.
<input type="reset" value="다시쓰기">
값을 초기화시킬 버튼이니 타입을 'reset'으로 설정

작성모습

html 만 작성했을 때의 전체 모습은 이렇다.

css 작성하기

중구난방한 모습을 깔끔히 정리하기 위해 css를 사용할 것이다.

fieldset에 마진주기

조건 1. form의 fieldset은 마진은 10px 0

form fieldset {
    margin: 10px 0px;
}

위와 비교해 fieldset 끼리 틈이 생겼다.

legend 조건주기

조건 2인 로그인, 가입하기, 텍스트 입력창의 설정은 제목으로 달아준 legend에 대한 조건이다.

폰트 사이즈 18px, color는 #0066ff, 두께는 600

form legend {
    font-size: 18px;
    color: #0066ff;
    font-weight: 600;
}

회원가입에 조건주기

조건 3. 회원가입의 목록이름에 조건을 주기위해 class로 묶었던 reg로 값을 넣어준다.

폰트사이즈 14px, 너비 120px, 위치는 float:left

form lable.reg {
    font-size : 14px;
    width : 120px;
    float : left;
}

회원가입 창의 배열이 깔끔해졌다.

* 에 조건 걸기

조건 4. * 은 크기 15px, 색은 빨강색 굵기는 800로 강조표시 할 것이다.

form label em {
	font-size : 15px;
	color: red;
	font-weight: 800;
}

목록태그의 점 감추기

조건 5. 가입하기에서 아이디 비밀번호, 비밀번호 확인, 이름, 메일 주소, 전화번호는 목록태그로 만들고 점은 감춘다.

form ul li {
	list-style: none;
}

버튼 가운데 맞추기

조건 6. 가입하기, 다시쓰기 버튼의 위치는 center
감싸준 fieldset class에 값을 설정한다.

form fieldset.sendform {
	text-align: center;
}

html + css 전체

화면 모습

코드

    <title> 연습하기 </title>
    <style>
        form fieldset {
            margin: 10px 0px;
        }

        form legend {
            font-size: 18px;
            color: #0066ff;
            font-weight: 600;
        }

        form label.reg {
            font-size: 14px;
            width: 120px;
            float: left;
        }

        form label em {
            font-size: 15px;
            color: red;
            font-weight: 800;
        }

        form ul li {
            list-style: none;
        }

        form fieldset.sendform {
            text-align: center;
        }
    </style>
</head>

<body>

    <body>
        <!-- 주소에 줄줄이 붙어보내면 get / 값만 모내면 post -->
        <form action="2_process.jsp" method="post" />
        <fieldset>
            <legend> 로그인 </legend>
            <label for="user_id"> 아이디 </label>
            <input type="text" id="user_id" name="user_id" size="10" autofocus>

            <label for="user_pw"> 비밀번호 </label>
            <input type="password" id="user_pw" name="user_pw">
        </fieldset>

        <fieldset>
            <legend> 회원가입 </legend>
            <ul>
                <!-- em : 진하게, 강조 -->
                <!-- id : lable의 for랑 연결된 부분 / name은 다른 파일로 넘겨줄 파라미터 명 -->
                <li> <label class="reg" for="new_id"> 아이디 <em> * </em> </label>
                    <input type="text" id="new_id" name="new_id" size="20" autocomplete="on" required>
                </li>
                <li> <label class="reg" for="new_pw1"> 비밀번호 <em> * </em> </label>
                    <input type="password" id="new_pw1" name="new_pw1" size="20" required>
                </li>
                <li> <label class="reg" for="new_pw2"> 비밀번호 확인 <em> * </em> </label>
                    <input type="password" id="new_pw2" name="new_pw2" size="20" required>
                </li>
                <li> <label class="reg" for="user_name"> 이름 <em> * </em> </label>
                    <input type="text" id="user_name" name="user_name" size="20" required>
                </li>
                <li> <label class="reg" for="user_mail"> 메일주소 <em> * </em> </label>
                    <input type="email" id="user_mail" name="user_mail" size="20" required>
                </li>
                <li> <label class="reg" for="user_tel"> 전화 번호 </label>
                    <input type="tel" id="user_tel" name="user_tel" size="20">
                </li>
            </ul>
        </fieldset>

        <fieldset class="easys">
            <legend> 텍스트 입력창 </legend>
            <textarea rows="intro" cols="60" rows="5" name="intro">
텍스트 입력창 입니다.
기본 입력입니다.
                </textarea>
        </fieldset>

        <fieldset class="sendform">
            <input type="submit" value="가입하기">
            <input type="reset" value="다시쓰기">
        </fieldset>
    </body>
</html>

jsp 로 받는 페이지 만들기

name으로 넘겨준 값을 request.getParameter(""); 로 받아서 변수에 저장해 줄 것이다.

<%
	String id = request.getParameter("user_id");
	String pw = request.getParameter("user_pw");
	
	String new_id = request.getParameter("new_id");
	String new_pw1 = request.getParameter("new_pw1");
	String new_pw2 = request.getParameter("new_pw2");
	String user_name = request.getParameter("user_name");
	String user_mail = request.getParameter("user_mail");
	String user_tel = request.getParameter("user_tel");
		
	String intro = request.getParameter("intro");
%>

변수에 저장된 값을 원하는 위치에 출력하기
<%= > 사이에 변수명을 적어주면 된다.

<p> 가입이 완료되었습니다! </p>
<p> [입력하신 내용] <br>
	아이디 : <%= id %> <br>
	비밀번호 : <%= pw %> <br>
	새로 가입한 아이디 : <%= new_id %> <br>
	새로 가입한 비밀번호 : <%= new_pw1 %> <br>
	새로 가입한 비밀번호 확인 : <%= new_pw2 %> <br>
	새로 가입한 회원명 : <%= user_name %> <br>
	새로 가입한 메일주소 : <%= user_mail%> <br>
	새로 가입한 전화번호 : <%= user_tel %> <br>
	기입한 인트로 내용 : <%= intro %> </p>

전체 확인하기

아래와 같이 임의로 값을 넣어주고 가입하기를 누르면

입력 값이 제대로 넘어간 것을 확인할 수 있다.

Author And Source

이 문제에 관하여(jsp + html : 로그인, 회원가입 창), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cyhse7/jsp-html-로그인-회원가입-창

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)