HTML DOM Input URL autocomplete 속성은 URL 입력 필드에서 자동 완성 기능이 활성화되어 있는지 여부를 설정하거나 반환합니다. 이 기능이 켜져 있으면 브라우저가 사용자가 이전에 입력했던 URL 값을 제안해 주므로 반복 입력을 줄일 수 있습니다.
구문(Syntax)
autocomplete 속성의 기본 구문은 다음과 같습니다.
- 현재 값 반환하기 — on 또는 off
inputURLObject.autocomplete
- 자동 완성 값 설정하기
inputURLObject.autocomplete = value
속성 값
여기서 "value"에는 다음 두 가지 값을 지정할 수 있습니다.
| 값 | 설명 |
|---|---|
| on | 입력 필드의 자동 완성(autocomplete) 속성이 활성화되어 있음을 의미합니다. 브라우저가 이전에 입력한 값을 제안합니다. |
| off | 입력 필드의 자동 완성(autocomplete) 속성이 비활성화되어 있음을 의미합니다. 브라우저가 값을 제안하지 않습니다. |
예제
Input URL autocomplete 속성의 실제 동작을 확인할 수 있는 예제입니다. 버튼을 클릭하면 자바스크립트로 autocomplete 값을 'on'으로 변경하는 방식입니다.
<!DOCTYPE html>
<html>
<head>
<title>Input URL 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>URL-autocomplete</legend>
<label for="URLSelect">URL :
<input type="url" id="URLSelect" placeholder="eg: https://www.xyz.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 inputURL = document.getElementById("URLSelect");
divDisplay.textContent = 'Suggestions: '+inputURL.autocomplete;
function addAutocomplete() {
inputURL.autocomplete = 'on';
divDisplay.textContent = 'Suggestions: '+inputURL.autocomplete;
}
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Enable Suggestions'(제안 활성화) 버튼을 클릭하기 전 — 자동 완성이 'off'로 설정되어 있습니다.
'Enable Suggestions'(제안 활성화) 버튼을 클릭한 후 — autocomplete 값이 'on'으로 변경되고 화면에 현재 상태가 표시됩니다.
이처럼 autocomplete 속성은 HTML 태그에 직접 지정할 수도 있고, 자바스크립트를 통해 동적으로 전환할 수도 있습니다. 로그인 폼이나 검색창처럼 사용자 편의를 높이고 싶다면 'on'으로, 보안상 입력 기록 저장을 원치 않는 경우에는 'off'로 설정하는 것이 좋습니다.