반응형
독자 여러분, 오늘은 HTML, CSS 및 Javascript를 사용하여 비밀번호 표시/숨기기 토글러를 만드는 방법을 배우게 될 것입니다. 이전 블로그에서는 HTML과 CSS를 사용하여 탐색 모음을 만드는 방법을 보았습니다. 이제 HTML, CSS, Javascript를 사용하여 Show/Hide 토글러를 만들 차례입니다.
비밀번호 입력은 로그인 양식 및 등록 양식에서 사용자 확인을 위한 자격 증명을 입력하는 데 사용됩니다. 비밀번호 표시 또는 숨기기를 통해 사용자는 JavaScript를 통해 비밀번호를 쉽게 숨기거나 표시할 수 있습니다. 토글 아이콘이나 버튼을 클릭하면 입력 유형이 텍스트로 바뀌고 암호가 보인다는 논리다.
당신은 이것을 좋아할 것이다:-
멋진 로그인 양식
클립보드에 복사 도구
애니메이션 카드 설계
HTML 및 CSS를 사용한 박스 애니메이션
이 설계 [Password Show/Hide Togler]에는 페이지 중간에 입력 요소와 암호 유형이 있으며, 아이 아이콘을 클릭하면 위의 이미지에서 볼 수 있듯이 텍스트로 입력 유형이 변경됩니다. 내가 무슨 말을 하려는지 헷갈리시면 코드 확인과 미리보기도 할 수 있습니다.
소스 코드를 확인하고 미리 보려면 이 웹 사이트를 방문하십시오.
https://incoderweb.blogspot.com/2022/01/password-showhide-toggle-using-html-css.html
'css' 카테고리의 다른 글
| 박스 - 보드 게임 닫기(Android) (0) | 2022.01.25 |
|---|---|
| 배경 이미지의 srcset인 이미지 세트를 사용한 React형 배경 이미지 (0) | 2022.01.25 |
| 2022년에 따라야 할 최신 웹 개발 및 자바스크립트 동향 (0) | 2022.01.25 |
| CSS에서의 서리 효과 (0) | 2022.01.25 |
| CSS 유사 선택기: :선행형과 :선행형의 차이점이 무엇입니까? (0) | 2022.01.25 |
댓글