회원가입 화면 제작 html, css, javascript [일본 IT회사에서 1달동안 현장실습 - 3]

jsp 파일에 html과 css, javascript로 화면 구성을 했다.

원래는 javascript를 잘 안 쓰려고 했으나 spring을 아예 처음 배우니깐 급한 대로 자바스크립트를 썼다.

---

1. 성별 선택지

input type="radio"

중복으로 선택하지 않고 하나만 선택 가능하도록 하려면 어떻게 해야 할까?

• name의 값을 똑같이 하면 된다.

한 선택지를 미리 지정해놓을 수는 없을까?

• input 태그 안에 checked로 지정하면 해당 선택지가 미리 지정될 수 있다.

<!--성별 -->
<div class="field">성별</div>
<label class="selectGender">
	<input class="choiceGender" type="radio" name="gender" value="woman" checked>
	<span class="genderName">여성</span>
</label>
<label class="selectGender">
	<input class="choiceGender" type="radio" name="gender" value="man">
	<span class="genderName">남성</span>
</label>

 

2. 입사일 지정을 위한 날짜 선택지

간단하게 날짜를 선택할 수 있는 방법이 있지 않을까?

• input type="date"로 하면 된다

<!-- 입사일 -->
<div class="field">입사일</div>
<input type="date" name="entry_date" onchange="checkDate()">

 

3. 전화번호를 숫자만 입력되도록 하기 + input number 화살표 제거

• input type="number"로 지정한다

<!-- 전화번호 -->
<span class="field">전화번호</span>
<span class="explain">(숫자만 입력됩니다.)</span>
<input type="number" name="cellphone" placeholder="전화번호를 입력해주세요" onchange="checkPhone()"><br>
<br>

하지만, 여기서 문제는 화살표가 생긴다는 것이다.

• type이 number라 화살표로 수를 증가할 수 있는 것이다..

이 화살표를 없애기 위해서는 css를 사용했는데,

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  	-webkit-appearance: none;
  	margin: 0;
}

근데 firefox에서 적용하기 위해서는 아래코드도 필요하다고 한다.

input[type=number] {
  -moz-appearance: textfield;
}

참고한 사이트 : https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp

How To Hide Arrows From Number Input

 

4. input에 들어갔다가 나온 순간 발생하는 이벤트 

onchange 이벤트

•  input 태그의 포커스를 벗어났을 때 발생하는 이벤트

입력값 크기 제한

• maxlength로 최대값을 맞춰준다

<!--비밀번호-->
<span class="field">비밀번호</span>
<span class="explain">( 영문자와 숫자,특수기호로  8~16자 )</span>
<div class="err errPw1"></div>
<input type="password" name="password" placeholder="비밀번호를 입력하세요" onchange="checkPw1()" maxlength="16"><br>
<div class="field">비밀번호 재확인</div>
<div class="err errPw2">위의 비밀번호와 맞지 않습니다.</div>
<input type="password" name="rePassword" onchange="checkPw2()" maxlength="16"><br>
<br>

function checkPw1(){
	let pw = form.password.value;

	if(pw.length<8 || id.length>16){
		errPw1.style.display = "block";
		errPw1.innerText= "8~16자 이내로 입력하세요."
	}else{
		errPw1.style.display = "none";
	}
}
		
function checkPw2(){
	let pw1 = form.password.value;
	let pw2 = form.rePassword.value;
			
	if(pw1 != pw2){
		errPw2.style.display = "block";
	}else{
		errPw2.style.display = "none";
		passPw = true;
	}
}

 

5. 회원가입 취소 확인창

• 회원가입 취소를 실수로 누를 수도 있기에 확인하는 창을 만들었다.

confirm()

• 예 / 아니오를 선택할 수 있도록 한다.
• 예를 누르면 홈 화면으로 돌아가고
• 아니오를 누르면 원래 그 상태로 돌아간다

<button type="button" class="btn cancle" onclick="cancleSignup()">취소</button>

function cancleSignup(){
	if (confirm("회원가입을 취소하시겠습니까?")) {
		location.href="/";
	} else {}
}

참고 사이트 : https://www.w3schools.com/js/js_popup.asp

JavaScript Popup Boxes

---

 

<소감>

 

사용자의 입장에서 생각해서 제공된 레이아웃과 다르게 진행했다.

어떻게 하면 더 편하게 보고 불편해하지 않을지 고민할 수 있는 좋은 시간이었다.

 

잊어버리거나 새롭게 알게된 html, css, javascript를 배워서 유익했다.

 

(다음은 jsp랑 mysql 정리하겠습니다.. 언제가 될지는 모르겠지만)