민둥 개발자의 계발 블로그

HTML 연습! HTML 로그인 페이지 만들기 수정본!! 본문

Study/HTML

HTML 연습! HTML 로그인 페이지 만들기 수정본!!

민둥산의 민둥이 2022. 4. 25. 22:49

 안녕하세요 민둥산의 민둥이입니다. 오늘은 어제 올렸던 로그인 페이지의 수정본입니다! 일단 고쳐진 점은 여러 가지인데요. 우선은 한번 보시죠!

 

로그인 페이지

회원가입

-
@
남 여

--------------------------------------------------------------------------------------------------------------------------------

 겉으로 보기에는 크게 달라진게 없는 것처럼 보이지만 몇 가지 기능을 자바 스크립트를 통해 수정했습니다.

  1. 비밀번호 입력란과 비밀번호 확인 입력란의 값이 일치 혹은 불일치 시 메시지를 출력!
  2. 체크박스 전체 선택 시, 모든 체크박스 선택하는 기능.
  3. 이메일 선택 시, 자동으로 대체입력.

 코드는 아래와 같습니다. 최근에 객체라는 개념과 이벤트라는 개념을 배워서 그것을 이용하여 한번 만들어 보았습니다.

자바의 기본객체중 document라는 객체가 존재하는데, document 객체를 통해서 <form> 태그가 가지고 있는 속성들의 값을 가져와서 수정하는 방식입니다. 또 이벤트란, 나중에 다시 제대로 설명하겠지만, 유저가 웹 페이지 내에서 일으키는 동작(예를 들면 키보드 누르기, 마우스 클릭 등)을 말하는데, 그 이벤트를 감지하는 코드를 몇 가지 이용하였습니다. (이메일이 선택되었을 때를 감지해서 이메일의 텍스트를 그대로 고쳐서 칸 안에 넣는 등)

 

 코드 내에 주석으로 어제 몇가지 추가하고 싶었던 기능들을 적어 놓았었는데 그중에 4번, 작은 테두리 칸을 안 보이게 없애는 부분만 남았네요. 아마 이 부분은 CSS를 배워서 어떻게 설정이 가능하지 않을까 싶습니다. (빨리 CSS도 배우고 싶다!)

 

 혹시라도 제 글을 보면서 공부하시는 분들 댓글 달아주시면 의견 반영하여 이해하기 쉽도록 글 써보겠습니다. 저는 대부분 코드를 쓸 때 주석을 치지 않고 쓰는데 다음부터는 주석도 코드에 포함시키려 노력해보겠습니다(다만 그렇게 하면 블로그의 페이지가 길어져서 보기 불편할 수도 있습니다). 그리고 앞으로 이런 자잘한 연습은 "미니 프로젝트" 카테고리를 만들어서 모아둘 예정이니 기대해주세요!

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 페이지 </title>

<script>
	/*
		모르겠는 것들
		1. 비밀번호 와 비밀번호 확인 값 같은지 확인하는법
		2. 체크박스 전체 선택
		3. 이메일 선택 대체 입력 (선택 시 입력란 비활성화 등)
		4. "가입 동기"란의 칸 테두리 없애기
	*/
	function checkPassword(){
		alert("onchange!");
		let pw = document.getElementById('pass');
		let pwcheck = document.getElementById('passcheck');
		let result = document.getElementById('checkPass');
		
		if(pw.value==pwcheck.value){
			result.innerHTML="비밀번호 일치!";
		}else{
			result.innerHTML="비밀번호 불일치!";
			result.style.color="#992222";
		}
	}
	
	
	function clickAll(selectAll){
		const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  
  checkboxes.forEach((checkbox) => {
    checkbox.checked = selectAll.checked
  })
	}
	
	function rewrite(){
		for(let i of document.fr.emailID.options){
			if(i.selected){
				document.fr.emailback.value=i.value;
			}
		}
	}
	
	
</script>
</head>
<body>
	<!-- id 중복확인 버튼 클릭 시 새 창 띄우기(check_id.html 파일 열기)  -->
	<form action="check_id.html" name="fr">
		<h1>회원가입</h1>
		<table border="1">
			<tr>
				<td><input type="text" value="이름" readonly="readonly"></td>
				<td><input type="text"></td>
			</tr>
			
			<tr>
				<td><input type="text" value="ID" readonly="readonly">
				<td><input type="text" placeholder="4~8글자 사이 입력" maxlength="8">
				<input type="button" value="ID중복확인" onclick="location.href='check_id.html'"></td>
			</tr>
				
			<tr>
				<td><input type="text" value="비밀번호"  readonly="readonly"></td>
				<td><input type="password" placeholder="8~16글자 사이 입력" id="pass" maxlength="16"></td>
			</tr>
			
			<tr>
				<td><input type="text" value="비밀번호확인"  readonly="readonly"
			></td>
				<td><input type="password" maxlength="16" id="passcheck" onchange="checkPassword()">
				<span id="checkPass"></span>
				</td>
			</tr>
			
			<tr>
				<td><input type="text" value="주민번호" readonly="readonly"></td>
				<td><input type="number" maxlength="7"> -
				<input type="password" maxlength="7"></td>	
			</tr>
			
			<tr>
				<td><input type="text" value="E-Mail" readonly="readonly"></td>
				<td><input type="text">@
				<input type="text" name="emailback">
				<select name="emailID" onchange="rewrite()">
					<option>직접입력</option>
					<option value="naver.com">naver.com</option>
					<option value="daum.net">daum.net</option>
					<option value="naver.com">google.com</option>
					<option value="nate.com">nate.com</option>
				</select>
				</td>
			</tr>
			
			<tr>
				<td><input type="text" value="직업" readonly="readonly"></td>
				<td><select>
					<option>항목을 선택하세요</option>
					<option>프로그래머</option>
					<option>학생</option>
					<option disabled="disabled">건물주</option>
					<option>주부</option>
				</select>
				</td>
			</tr>
			
			<tr>
				<td><input type="text" value="성별" readonly="readonly"></td>
				<td><input type="radio" name="gender">남
				<input type="radio" name="gender">여
				</td>
			</tr>
			
			<tr>
				<td><input type="text" value="취미" readonly="readonly"></td>
				<td><input type="checkbox" id="여행" name="check"><label for="여행">여행</label>
				<input type="checkbox" id="독서" name="check"><label for="독서">독서</label>
				<input type="checkbox" id="게임" name="check"><label for="게임">게임</label>
				<input type="checkbox" id="all" name="check" onclick="clickAll(this)"><label for="all">전체선택</label>
				</td>	
			</tr>
			
			<tr>
				<td><input type="text" value="가입동기" readonly="readonly"></td>
				<td><textarea cols="40" rows="15" placeholder="웹 개발자가 되고 싶어서 가입했습니다!"></textarea></td>
			</tr>
				
			<tr>
				<td colspan="2"><input type="submit" value="가입">
				<input type="reset" value="초기화">
				<input type="button" value="돌아가기" onclick="history.back()">
				</td>
			</tr>
			
		</table>
	</form>
</body>
</html>

 

 

 

반응형
저작자표시 (새창열림)

'Study > HTML' 카테고리의 다른 글

[HTML#7] 아이프레임 <iframe> 태그 !  (1) 2022.05.15
[HTML#6] 링크태그!  (3) 2022.05.13
HTML 연습! HTML 로그인 페이지 만들기!  (4) 2022.04.24
HTML 연습! 클론 코딩으로 지뢰찾기 화면 UI 만들기  (4) 2022.04.21
HTML#5 이미지 태그 정답 공개!  (2) 2022.04.18
'Study/HTML' Related Articles more
Comments