Html 회원가입 예제 - html hoewongaib yeje

Question

회원가입 페이지 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 페이지</title>
</head>
<style type="text/css">
table, th, td{
	border: 1px solid black;
	border-collapse: collapse;
	background-color: #D4F4FA;
	text-align: center;
}
</style>
<body>
<form name="form1" action="result.jsp" method="post">
<table width="280" height="300" align="center">
 	<tr>
 		<td>아이디</td>
 		<td><input type="text" name="id" value="id"></td>
 	</tr>
 	<tr>
 		<td>비밀번호</td>
 		<td><input type="password" name="pass"></td>
 	</tr>
 	<tr>
 		<td>비밀번호 확인</td>
 		<td><input type="password" name="passin"></td>
 	</tr>
 	<tr>
 		<td>Phone number</td>
 		<td><input type="text" name="phone"></td>
 	</tr>
 	<tr>
 		<td>주소</td>
 		<td><input type="text" name="address"></td>
 	</tr>
 	<tr>
 		<td>이메일</td>
 		<td><input type="text" name="email"></td>
 	</tr>
 </table>
 <div align="center">
	<input type="submit" name="전송" value="가입">
	<input type="reset" value="취소">
</div>
</form>
</body>
</html>

<form> 태그
주요 요소
action : 데이터가 보내질 위치를 지정
method : 전송 방식. GET/POST
name : 폼의 이름 결정 (css나 javascript에서 활용)
연동태그(기초)
<input> 태그 : 입력 필드 태그
주요 요소
type : 입력 태그의 모양을 지정(text, submit, reset 등)
주요 속성 값
- text : 문자열을 입력 받는 형식
- password : 문자열을 입력받는 형식(내용 숨김)
- submit : 버튼 형태. form 태그의 action 속성에
지정된 페이지로 input 태그의 값을 전송
- reset : input 태그에 입력한 값을 초기화

<input> 태그
    input 태그는 일종의 변수
    name 속성으로 변수의 이름을 지정
    value 속성에 변수의 초기값을 지정하거나 입력을 받음

회원가입 페이지 같은 경우 데이터를 java영역으로 넘겨줘야함.

그러기 위해선 jsp 파일로 만들어 줘야 한다.

JSP 파일 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>결과 화면</title>
</head>
<body>
<%
//여기는 자바 영역
//form 태그의 input 태그에서 넘어오는 데이터를
//받기 위한 변수.
String id = request.getParameter("id");
String pass = request.getParameter("pass");
String passin = request.getParameter("passin");
String address = request.getParameter("address");
String phone = request.getParameter("phone");
String email = request.getParameter("email");
out.println("아이디 : " + id + "<br>");
out.println("비밀번호 : " + pass+"<br>");
out.print("비밀번호 확인: " + passin +"<br>");
out.print("주소: " + address +"<br>");
out.print("전화번호: " + phone +"<br>");
out.print("이메일: " + email +"<br>");
%>
</body>
</html>

회원가입란 입력후 가입 결과 화면

뇌운동일지

HTML

[ HTML ] 간단한 유효성 검사를 추가한 회원가입 예제

purpleduck 2020. 8. 3. 18:17

1. 회원가입 유스케이스 작성

유스케이스명	회원가입
개요	협회 홈페이지에 접속하기 위한 회원가입 과정을 수행한다.
관련 액터	신규 협회 가입 희망자
선행조건	없음
흐름 (시나리오)	기본	1. 가입희망자는 메인화면에서 “회원가입”을 선택한다. 2. 시스템은 “회원가입”화면을 보여준다. 3. 가입희망자는 회원가입 메인화면에서 가입 양식에 자신의 정보를 입력한 후, 회원가입 버튼을 누른다. 4. 시스템은 가입희망자가 모든 필수정보를 기입했는지 확인한 후, 회원가입을 한다.
대안	3-1. 가입희망자가 가입취소 버튼을 클릭하는 경우, 시스템은 입력된 모든 내용을 삭제하고 초기화한다. 4-1. 가입희망자가 회원가입 버튼을 클릭하였으나, 가입 양식에서 비어있는 필수정보가 있을 경우, 재입력 메시지를 출력한다.
기타 요구사항	없음

2. 회원 가입 화면을 구현하고 폼 구성(HTML)과 데이터 검증하는 코드(자바스크립트)를 구현

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>CB 회원가입 페이지</title>
<style type="text/css">
	table {width:500px; height:500px; 
		border:5px solid #660066; background-color:#d0c1e1; 
		text-align:left; margin:10px; padding:20px}
	
</style>
<script>
	function formCheck(form){
		// 유효성 검사 
		if(form.id.value == ""){
			alert('아이디를 기입하세요');
			form.id.focus();
			return ;
		}
		if(form.myname.value == ""){
			alert('이름을 기입하세요');
			form.myname.focus();
			return ;
		}
		if(form.email.value == ""){
			alert('이메일을 기입하세요');
			form.email.focus();
			return ;
		}
		if(form.pswd.value == ""){
			alert('암호를 기입하세요');
			form.pswd.focus();
			return ;		
		}
		if(form.contents.value == ""){
			alert('자기소개를 기입하세요');
			form.contents.focus();
			return ;
		}

		alert( form.id.value+'('+
			form.myname.value + ") 님의 \n 회원가입이 완료되었습니다."
			);
		
	}

	function passwordCheckFunc(){
		var password = document.getElementById("pw").value;
		var passwordCheck = document.getElementById("pwck").value;

		if(passwordCheck==""){
			document.getElementById("passwordCheckText").innerHTML=""
		}
		else if (password!=passwordCheck)
		{
			document.getElementById("passwordCheckText").innerHTML="일치하지 않습니다."
		}
		else{
			document.getElementById("passwordCheckText").innerHTML="일치합니다. "
		}
	}
		

</script>
 </head>
 <body>
 <center>
 <h2> <font color="#3300cc">회원가입</font></h2>
 <form>
 <table>
	<tr><p>*는 필수입력사항 입니다.</p></tr>
  <tr>

   <td>아이디* </td>
   <td>
   <input name="id" type = "text" >
   <input type = "button" value = "중복확인">
   </td>
  </tr>



  <tr>
   <td> 비밀번호* </td>
   <td> <input type = "password" id="pw" name="pswd"> </td>
  </tr>


  <tr>
   <td> 비밀번호 확인 </td>
   <td> <input type = "password"  id="pwck" name="pswdCheck" onkeyup="passwordCheckFunc()">&nbsp;*비밀번호를 다시입력해주세요. </td>
	
  </tr>
	<tr>
		<td></td>
		<td id="passwordCheckText">
	</tr>

  <tr>
   <td> 이름* </td>
   <td> <input type = "text" name="myname"> </td>
  </tr>


  <tr>
   <td> 성별 </td>
   <td>
    <input type = "radio" name = "gender" checked> 여자
    <input type = "radio" name = "gender"> 남자
   </td>
  </tr>




  <tr>
   <td> 이메일* </td>
   <td>
    <input name="email" type = "text"> @ <input type = "text"> &nbsp;&nbsp;
    <select>
     <option> 직접입력 </option>
     <option> naver.com </option>
     <option> daum.net </option>
     <option> gmail.com </option>
    </select>
   </td>
  </tr>




  <tr>
   <td> 주소 </td>
   <td>
    <input type = "text">
    <input type = "button" value = "주소찾기">
   </td>
  </tr>
  <tr>
   <td> 상세주소 </td>
   <td>
    <input type = "text">
   </td>
  </tr>



  <tr>
   <td> 휴대폰 </td>
   <td>
    <input type = "radio" name = "phone"> SKT
    <input type = "radio" name = "phone"> KT
    <input type = "radio" name = "phone"> LGU+
    <input type = "radio" name = "phone"> 알뜰폰
   <br/>
    <select>
     <option> 010 </option>
     <option> 011 </option>
     <option> 016 </option>
     <option> 018 </option>
    </select>
    - <input type = "text" size = "6"> - <input type = "text" size = "6">
   </td>
  </tr>




  <tr>
   <td> 악기  </td>
   <td>
    <input type = "checkbox"> 바이올린
    <input type = "checkbox"> 비올라
    <input type = "checkbox"> 첼로
    <input type = "checkbox"> 콘트라베이스
   </td>
  </tr>



  <tr>
   <td> 자기소개*  </td>
   <td>
    <textarea name="contents" cols = "60" rows = "10"></textarea>
   </td>
  </tr>

<tr>
	<td><input type = "button" value = "회원가입" onclick="formCheck(this.form)"></td>
	<td><input type = "reset" value = "다시입력"></td>
</tr>




</table>
 </form>

</br>



</center>
</body>


</html>