[JSP] 게시판 만들기 5 _ form태그와 input태그로 간단한 join.jsp 회원가입창 만들기

 

DB 위주로 할거라 화면은 부트스트랩으로 클래스만 먹여서 만들고 있어요. 데이터 넘어가는 것만 볼 거라서 화면 디자인은 신경 못 쓰고 있습니다!! 이쁘게 만들고 싶은 사람은 HTML/CSS 신경쓰면서 하셔도 좋습니다.

 

전 바빠서 디자인은 버렸지만,  여러분들은 이쁘게 만드시라고 간단한 회원가입/게시판 만들기 실습해 보실만한 무료 템플릿 사이트 가져왔습니다. 제가  추천하는 템플릿은 Forty입니다. Forty에서 회원가입/로그인/게시판 등 실습하시기 좋아요.

 

https://html5up.net/

HTML5 UP

 

 

저번에 로그인 처리해서 결과받아서 보여주는 화면 loginAction.jsp 까지 만들었고 오늘은 회원가입 페이지만 간단하게 만들것이다. 

 

저번에 DB에서 만든 회원 정보가 담긴 user 테이블의 모습

 

아이디, 비밀번호, 이름, 성별, 이메일 

입력받는 `join.jsp` 페이지 먼저 만들어 주자. 

 

그냥 기존에 만든 login.jsp 파일 Ctrl C, Ctrl V 로 복붙

소스를 복붙하는게 아니라 파일을 그대로 복붙. 

이름 login2.jsp 로 뜨는데 jon.jsp로 바꿔주자. 

 

로그인 화면 -> 회원가입 화면

로그인 -> 회원가입

버튼 이름도 고쳐줌

 

 

생각해보니까 from 태그의 action 속성도 바꿔줘야 한다.

 

회원가입 로직 처리해서 받아온 값 띄워줄 `joinAction.jsp`로 설정 해준다.

 

아이디, 비밀번호 입력받는 input태그는 그대로 쓰면 되고 

어차피 이 구조가 반복되니까 div 한 블럭 그대로 복사해서 3번 붙여넣기 해 준다. 

<div class="form-group">
    <input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20">
</div>

 

그리고 나서 이름, 성별, 이메일 입력용으로 입맛에 맛게 수정을 해 준다.

 

✅ 이름

`type="text"`로 바꾸고, `placeholder="이름"`으로 바꾸고 `name="userName"`으로 바꿔줌

<div class="form-group">
    <input type="text" class="form-control" placeholder="이름" name="userName" maxlength="20">
</div>

 

 

 

✅ 성별

성별은 아이디, 비밀번호, 이름이랑은 다르게 버튼 클래스랑 label 태그를 써서 만들어주었다.

그리고 input 태그 속성을 라디오 버튼으로 지정해 주었다.

`checked`는 기본으로 지정되는 값이다. 

<div class="form-group" style="text-align: center;">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-light" style="text-align: center;">
            <input type="radio" name="userGender" autocomplete="off" value="남자" checked>남자
        </label>
        <label class="btn btn-light" style="text-align: center;">
            <input type="radio" name="userGender" autocomplete="off" value="여자">여자
        </label>		
    </div>
 </div>

 

 

✅ 이메일

이메일은 input태그의 type을 email로 지정해 준다. maxlength는 50으로 바꿔주었다. 

<div class="form-group">
    <input type="email" class="form-control" placeholder="이메일" name="userEmail" maxlength="50">
</div>

 

실행시켜보자.

아래처럼 라디오버튼은 여러 개 항목 중 하나만 선택 가능!

 

 

그리고 input태그에 type속성을 email로 설정해주면?

아래처럼 @가 안 들어간 형식으로 입력하면 데이터가 들어가지 않는다.