비밀번호 브라우저 저장이 안되게 만드는 코드를 알려줘
페이지 정보
본문
| AI 도구 | gemini |
|---|---|
| 프롬프트 | 입력폼에서 비밀번호를 입력할때 브라우저에 저장이 되지 않게 하려면? |
<form name="loginForm" action=".../login/actionLogin.do" method="post" autocomplete="off">
<input type="text" name="id" autocomplete="off">
<input type="password" name="password" autocomplete="off">
</form>
가장 기본적으로 비밀번호 입력 칸(<input>)과 로그인 폼(<form>) 태그에 자동완성 방지 속성을 붙이면 ..
이렇게 하면 매번 비밀번호를 직접 입력해야 //
아래 예제파일을 저장해서 테스트할 수 있음.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인 폼 비교 예제</title>
<style>
body { font-family: sans-serif; padding: 20px; background-color: #f4f4f4; }
.container { background: white; padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
h2 { margin-top: 0; color: #333; }
label { display: block; margin: 10px 0 5px; font-weight: bold; }
input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
button { background-color: #0056b3; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #004494; }
.note { color: #666; font-size: 0.9em; margin-bottom: 15px; }
.blocked { border-left: 5px solid #ff4444; }
.normal { border-left: 5px solid #44ff44; }
</style>
</head>
<body>
<div class="container normal">
<h2>1. 일반적인 로그인 (저장 O)</h2>
<p class="note">브라우저가 '아이디'와 '비밀번호'를 인식하고 저장을 제안합니다.</p>
<form action="#" method="post">
<label for="user_id">아이디:</label>
<input type="text" id="user_id" name="username" placeholder="아이디 입력">
<label for="user_pw">비밀번호:</label>
<input type="password" id="user_pw" name="password" placeholder="비밀번호 입력">
<button type="submit">로그인</button>
</form>
</div>
<div class="container blocked">
<h2>2. 저장 방지 로그인 (저장 X)</h2>
<p class="note">질문하신 사이트와 유사하게 <b>autocomplete="off"</b> 속성을 사용했습니다.</p>
<form action="#" method="post" autocomplete="off">
<label for="sec_id">아이디:</label>
<input type="text" id="sec_id" name="userId" autocomplete="off" placeholder="아이디 (자동완성 안됨)">
<label for="sec_pw">비밀번호:</label>
<input type="password" id="sec_pw" name="userPw" autocomplete="new-password" placeholder="비밀번호 (저장 안됨)">
<button type="submit">로그인</button>
</form>
</div>
</body>
</html>