민둥 개발자의 계발 블로그

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

Study/HTML

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

민둥산의 민둥이 2022. 4. 24. 23:53

 안녕하세요 민둥이입니다. 블로그 업데이트가 별로 없기도 하고 아직 저번 포스팅의 클론 코딩에 관한 글도 못 올렸네요. 하지만 짬을 조금 내서 제가 오늘 만든 로그인 페이지를 보여드릴 테니 부디 오늘은 이것으로 만족하시기를...

 

로그인 페이지 숙제

회원가입

-
@
남 여

 

============================================================================

 막상 만들어보니 단순한 모양이 아니라 어떤 기능들이 더 추가 되어야 하는지 살짝 감이 잡히네요. 예를 들면 비밀번호 입력란에는 뭐 안 보이게 입력받고, 어떤 테이블의 형식은 어떻게 만들어야 되고 어떤 때에 칸 합치 기를 사용하고 <td> 태그로 나누고 조금 더 배우게 된 것 같습니다!

 

 아직 추가하지 못한 기능들이 몇가지...

  1. 비밀번호 입력 시 비밀번호 확인에서의 값과 같은지 확인 후 알려주기
  2. 전체 선택 체크 시 체크박스 다 선택되거나 취소되게 하기(시도는 해봤지만 잘 안되네요..)
  3. 아이디 중복 값 확인 하기! 이 부분은 보니까 나중에 데이터베이스에 저장되어 있는 값을 어떻게 불러와서 for문을 사용하여 확인하는 과정을 거칠 것 같은 느낌이 강하게 드네요!! 빨리 데이터베이스와 연결시켜서 웹 사이트를 만들 수 있는 그날까지 파이팅!!

코드는 아래와 같습니다!

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

	function checkPassword(){
		//입력받은 비밀번호와 비밀번호 확인의 값이 일치하는지 확인 후
		//span tag에 불일치 시 문자 띄우기 
		//객체.innerHTML 사용
	}
	
	
	function clickAll(){
		//전체선택을 눌렀을 때 모든 체크박스 누르기
		//미완성 ㅠㅠ 왠지 모르겠지만 잘 안됨
		var checkboxes = document.querySelectorAll("input[type='checkbox']");
	    for (var i = 0; i < checkboxes.length; i++) {
	        if (checkboxes[i] != source)
	            checkboxes[i].checked = source.checked;
	    }
	}
</script>
</head>
<body>
	<!-- id 중복확인 버튼 클릭 시 새 창 띄우기(check_id.html 파일 열기)  -->
	<form action="check_id.html">
		<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글자 사이 입력">
				<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글자 사이 입력"></td>
			</tr>
			
			<tr>
				<td><input type="text" value="비밀번호확인" readonly="readonly"
			></td>
				<td><input type="password" onchange="checkPassword()">
				<span id="checkPass"></span>
				</td>
			</tr>
			
			<tr>
				<td><input type="text" value="주민번호" readonly="readonly"></td>
				<td><input type="text" 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">
				<select>
					<option>직접입력</option>
					<option>naver.com</option>
					<option disabled="disabled">daum.net</option>
					<option>google.com</option>
					<option>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()"><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#6] 링크태그!  (3) 2022.05.13
HTML 연습! HTML 로그인 페이지 만들기 수정본!!  (0) 2022.04.25
HTML 연습! 클론 코딩으로 지뢰찾기 화면 UI 만들기  (4) 2022.04.21
HTML#5 이미지 태그 정답 공개!  (2) 2022.04.18
HTML #5 이미지 태그!  (0) 2022.04.18
'Study/HTML' Related Articles more
Comments