JSP 이용해서 간단한 회원가입 화면 만들기
가입 버튼 눌렀을때 웹페이지에 작성한 내용이 나오게 출력하기
화면에 어떤게 들어갈지 먼저 생각해본다.
아이디
이름
비밀번호
성별
핸드폰번호
이메일
가입경로
메일/SMS 정보수신
결혼여부
가입인사창
가입버튼
이렇게 만들어 볼려고 한다.
JSP 파일은 2개 만들어서
하나는 회원가입 페이지, 또 하나는 가입버튼 눌렀을때 입력한 내용을 출력할 페이지
회원가입창은 JSP파일에서 HTML <body> 안에 <form> 내부태그와 속성들을 이용해서 만들었다.
아이디 이름 비번은 <input> 태그 사용
<!-- 긁지않은개발자 -->
아이디 : <input type="text" name="id" id="id" placeholder="아이디를 입력해주세요" required="required"/> <br />
이름 : <input type="text" name="name" id="name" placeholder="이름을 입력해주세요" required="required"/> <br />
비번 : <input type="password" name="password" id="password" placeholder="비번을 입력해주세요" required="required"/> <br />
성별은 <input>태그안에 type은 radio로 만들었다. (단일 선택)
<!-- 긁지않은개발자 -->
성별 :
<label> <input type="radio" name="gender" value="1"/>남자</label>
<label> <input type="radio" name="gender" value="0"/>여자</label> <br />
핸드폰번호, 이메일 만들기
<!-- 긁지않은개발자 -->
핸드폰번호 : <input type="tel" id="phone" name="phone" placeholder=" ( - )빼고 입력해주세요"><br /><!-- 긁지않은개발자 -->
이메일 : <input type="text" name="email" value=""> @
<input type="text" name="email2" value=""><br />가입경로도 단일선택해야하기 때문에 <input>태그 type은 radio로 만들었다.
<!-- 긁지않은개발자 -->
가입경로 :
<label> <input type="radio" name="ga" value="1"/>검색</label>
<label> <input type="radio" name="ga" value="2" />소개</label>
<label> <input type="radio" name="ga" value="3" />기타</label> <br />메일/SMS 정보 수신 (중복선택가능) checkbox
<!-- 긁지않은개발자 -->
메일/SMS 정보 수신 :
<%
String hobbys[] = "E-mail,SMS".split(",");
for(int i=0;i<hobbys.length;i++){
%>
<label> <input type="checkbox" name="hobby" value="<%=i%>"/><%=hobbys[i] %></label>
<% } %>결혼여부 <select> 이용
<!-- 긁지않은개발자 -->
결혼여부 :
<select name="m">
<option value="미">미혼</option>
<option value="기">기혼</option>
</select>
<br>기본
열었을때
가입인사 적을수있는 <textarea>
<!-- 긁지않은개발자 -->
가입인사 <br>
<textarea rows="5" cols="70" name="note"></textarea> <br>
<input type="submit" value=" 가 입 " />
가입버튼 만들기
<!-- 긁지않은개발자 -->
<input type="submit" value=" 가 입 " />실행 결과
이제 여기서 가입을 눌렀을때
입력했던 정보가 작성된 페이지를 출력할 JSP파일을 하나더 만든다 .
톰캣 버전에 따라서 한글이 깨질수 있다 GET/POST
<body>
<% request.setCharacterEncoding("UTF-8"); %> 꼭써주기 (한글깨짐방지)
</body>
<!-- 긁지않은개발자 -->
request.setCharacterEncoding("UTF-8");
// 이렇게 추가하면 POST방식인 경우만 처리해준다.
if(!request.getMethod().equals("POST")){
return;
}// 이렇게 추가하면 POST방식인 경우만 처리해준다.
if(!request.getMethod().equals("POST"))
<!-- 긁지않은개발자 -->
// 모든 내용을 한번에 맵으로 받기
Map<String, String[]> map = request.getParameterMap();
// 반복
for(String key : map.keySet()){
String[] paramValues = map.get(key);
out.println(key + " : ");
if(paramValues!=null && paramValues.length>0){
for(String value : paramValues){
out.println(value + " ");
}
}else{
out.println("없다.");
}
out.println("<br>");
}
실행해서
정보를 입력해보자 .
다 입력한후 가입 버튼을 누르면
만들어놓은 JSP 두번째 파일 페이지로 넘어가서
밑에처럼 웹브라우저에 출력되서 나온다.
https://h0-0cat.tistory.com/28
[HTML] HTML form 내부 태그와 속성들( input, textarea, label, select)
HTML form 내부의 태그와 속성들 ( input, textarea, label, select) 태그 입력 양식 전체를 감싸는 태그로, 텍스트/버튼/라디오 등의 컨트롤 요소 (control element)로 구성된다. name : form의 이름, 서버로 보내
h0-0cat.tistory.com
HTML FORM 내부 태그와 속성들 설명된 포스팅
참고하면 좋을듯 합니다.
[HTML] HTML form 내부 태그와 속성들( input, textarea, label, select)
HTML form 내부의 태그와 속성들 ( input, textarea, label, select) 태그 입력 양식 전체를 감싸는 태그로, 텍스트/버튼/라디오 등의 컨트롤 요소 (control element)로 구성된다. name : form의 이름, 서버로 보내
h0-0cat.tistory.com
'JSP > JSP 이용하기' 카테고리의 다른 글
| [JSP] JSP 이용해서 달력 만들기 (양력 + 음력) (0) | 2023.06.08 |
|---|---|
| [JSP] request 내장 객체 종류와 쓰는 방법 (0) | 2023.06.08 |
| [JSP] JSP파일로 Cookie(쿠키) 정보 읽어보기 (0) | 2023.06.07 |
| [JSP] JSP URL에 입력해서 메세지 출력 (이름,나이) (0) | 2023.06.07 |
| [JSP] JSP contentType 변경해서 사용해보기 (0) | 2023.06.07 |