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>전체 확인하기
아래와 같이 임의로 값을 넣어주고 가입하기를 누르면
입력 값이 제대로 넘어간 것을 확인할 수 있다.
