[HTML5] input 요소에서 pw 재확인을 구현하려면?

myminimin·2023년 7월 18일
0
post-thumbnail

HTML 수업을 듣는 중 실습을 진행하는데 이 과정에서 비밀번호 재확인을 입력하는 페이지가 만들어지는건 확인됐는데 어떻게 위에 클라이언트가 입력한 비밀번호가 재확인에서 입력한 값과 같은 지를 구현할 수 있는가에 대한 궁금증이 생겼다.


(이건 내가 실습하며 작성한 코드)

<tr>
	<td><label for="password">비밀번호: </label></td>
	<td><input type="password" name="password"
         placeholder="비밀번호를 입력해주세요." required></td>
</tr>
<tr>
	<td><label for="repw">비밀번호 재확인: </label></td>
	<td><input type="password" name="password"
         placeholder="비밀번호를 재입력해주세요." required></td>
</tr>

결론은 'HTML에서는 구현이 안된다는 것'

HTML간단한 입력, 검증을 위한 수단으로 사용하기 때문에 더 복잡한 검증과 동작은 JavaScript를 사용하여 보완이 필요하다.

✔ HTML은 입력 필드에 입력된 값의 유효성을 검증하고 간단한 조건을 확인할 수 있는 기능을 제공한다.
1. 이메일 주소 형식의 유효성 검사
2. 필수 입력 필드인지 확인
3. 최소/최대 길이 제한 등

주로 클라이언트 측에서 이루어지며, 브라우저에서 기본적으로 제공하는 검증 메커니즘을 활용한다.(사용자가 본인이 입력한 내용의 오류를 신속하게 확인하고 수정할 수 있다는 장점이 있다!!!)

2개의 댓글

comment-user-thumbnail
2023년 7월 18일

소중한 정보 잘 봤습니다!

답글 달기
comment-user-thumbnail
2023년 7월 18일

좋은 글 감사합니다!

답글 달기