회원 가입
가입 정보
이름:
이메일:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 폼 만들기 예제</title>
<style> /* CSS 정의 */
h2 {
border-radius: 5px;
background-color: wheat;
text-align: center;
padding: 15px 0;
}
#regform {
padding: 15px 20px;
border-radius: 10px;
margin: auto;
width: 50%;
background-color: SandyBrown;
}
</style>
<script> // 자바스크립트 정의
function signUp() {
// 가입 여부 확인
alert("정말로 가입하시겠습니까?");
// display : 아이디가 'regfrom'인 요소를 찾아 화면에 어떻게 보여줄지 결정하는 속성
document.getElementById("regform").style.display = "none";
// 입력값을 가져와 각각 아이디가 'rname', 'remail'인 태그 요소의 body 부분에 출력
document.getElementById("rname").innerHTML = document.form1.name.value;
document.getElementById("remail").innerHTML = document.form1.email.value;\
// 결과 화면 요소를 가져와 'dispaly' 속성을 block으로 지정해 화면에 보이도록 하고 배경색 변경
document.getElementById("result").setAttribute("style", "display: block;
background-color:KhaKi;");
}
</script>
</head>
<body> <!-- HTML 저의 -->
<h2>회원 가입</h2>
<hr>
<div id="regform">
<form name="form1">
<label>이름</label><br>
<input type="text" name="name" size="40"><br>
<hr>
<label>이메일</label><br>
<input type="email" name="email" size="40"><br>
<button type="button" onClick="signUp()">가입</button>
</form>
</div>
<div id="result" class="result">
<h3>가입 정보</h3>
<hr>
이름: <span id="rname"></span><br>
이메일: <span id="remail"></span><br>
</div>
<script>
document.getElementById("result").style.display = "none"; // 자바스크립트 정의
</script>
</body>
</html>
728x90
반응형
'프로그래밍 언어 > JSP' 카테고리의 다른 글
| JSP_22.10.27 (0) | 2022.10.28 |
|---|---|
| JSP_22-10-25 (0) | 2022.10.26 |
| JSP_toDo list 만들기 (0) | 2022.10.24 |
| JSP_22-10-24 (0) | 2022.10.24 |
