JSP
[JSP] 실습 : 회원 가입 폼 만들기
기록하는_사람
2022. 11. 4. 15:43
실습 : 회원 가입 폼 만들기
📌 실습 : 회원 가입 폼 만들기
① src → main → webapp 우클릭 후, 새폴더 생성.
② 새로 만든 폴더 우클릭 후, html 파일 생성.
③ 코드 입력.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 폼</title>
<!-- css -->
<style>
h2 {
background-color: wheat;
border-radius: 5px;
text-align: center;
padding: 15px;
}
.form {
background-color: wheat;
border-radius: 10px;
width: 50%;
padding: 15px;
margin: auto;
}
</style>
<!-- js -->
<script>
function signUp() {
alert("가입하시겠습니까?");
document.getElementById("login-form").style.display = "none";
document.getElementById("rname").innerHTML = document.form.name.value;
document.getElementById("remail").innerHTML = document.form.email.value;
document.getElementById("result").setAttribute("style", "display: block");
}
</script>
</head>
<body>
<h2>회원 가입</h2>
<hr>
<div id="login-form" class="form">
<form name="form">
<label>이름</label><br>
<input type="text" name="name" size="40"><br>
<hr>
<label>이메일</label><br>
<input type="email" name="email" size="40"><br>
<hr>
<button type="button" onClick="signUp()">가입</button>
</form>
</div>
<!-- 가입 정보 -->
<div id="result" class="form">
<h3>가입 정보</h3>
<hr>
이름 : <span id="rname"></span><br>
이메일 : <span id="remail"></span><br>
</div>
<!-- js -->
<script>
document.getElementById("result").style.display = "none";
</script>
</body>
</html>
