HTML DOM의 Input Email autocomplete 속성은 이메일 입력 필드에서 자동 완성 기능이 활성화되어 있는지 여부를 설정하거나 반환합니다. 이 기능이 켜져 있으면 사용자가 이전에 입력했던 값을 브라우저가 자동으로 제안해 줍니다.
구문(Syntax)
자동 완성 속성의 기본 문법은 다음과 같습니다.
값 반환하기
inputEmailObject.autocomplete
반환되는 값은 on 또는 off입니다.
값 설정하기
inputEmailObject.autocomplete = value
속성 값(Value)
설정할 수 있는 “value”는 아래와 같습니다.
| 값 | 설명 |
|---|---|
| on | 입력 필드의 자동 완성 기능을 활성화합니다. 이 값이 기본(default) 값입니다. |
| off | 입력 필드의 자동 완성 기능을 비활성화합니다. |
예제(Example)
다음은 Input Email autocomplete 속성을 활용한 실제 예제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Email autocomplete</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Email-autocomplete</legend>
<label for="EmailSelect">User Email :
<input type="email" id="EmailSelect" placeholder="eg: xyz@abc.com" autocomplete="off" autofocus>
</label>
<input type="button" onclick="addAutocomplete()" value="Enable Suggestions">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
divDisplay.textContent = 'Suggestions: '+inputEmail.autocomplete;
function addAutocomplete() {
inputEmail.autocomplete = 'on';
divDisplay.textContent = 'Suggestions: '+inputEmail.autocomplete;
}
</script>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Enable Suggestions' 버튼을 클릭하기 전 — 자동 완성이 off 상태로 표시됩니다.
'Enable Suggestions' 버튼을 클릭한 후 — 버튼 클릭 시 JavaScript 함수가 실행되어 자동 완성 속성이 on으로 변경되고, 화면에 그 결과가 갱신되어 표시됩니다.
이처럼 autocomplete 속성을 활용하면 사용자 경험을 고려하여 이메일 입력 필드의 제안 기능을 동적으로 제어할 수 있습니다. 개인정보 보호가 중요한 폼에서는 off, 로그인이나 검색 폼처럼 편의성이 중요한 경우에는 on으로 설정하는 것이 좋습니다.