목차
- autocomplete 예제 - <form> 경우
- autocomplete 정의
- autocomplete 구문
- autocomplete 예제 - <form>과 <input> 속성값 다른 경우
autocomplete 예제 - <form> 경우
<form action="/action_page.php" method="get" autocomplete="on">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br>
<label for="nick">별명:</label>
<input type="text" id="nick" name="nick"><br>
<input type="submit">
</form>
autocomplete 정의
자동 완성 여부 지정.
1.
- autocomplete 속성 사용 가능 태그: <form>, <input>
- input 중 autocomplete 지원 타입: text, search, url, tel, email, password, datepickers, range, color
2.
- autocomplete 속성값을 on으로 설정 시, 브라우저는 사용자가 입력 제출한 값을 기억해두었다가 이전 입력값을 옵션으로 제공함.
- <form>과 <input>에 autocomlete 속성의 속성값 다를 시, <input> 설정값이 우선함.
3.
최신 브라우저 모두 지원.
※ 일부 브라우저 경우, 해당 브라우저 설정에서 사용 가능 설정 필요.
autocomplete 구문
- <form autocomplete="on|off">
- <input autocomplete="on|off">
[속성값]
on|off
자동완성 사용 여부 지정.
- on - 자동완성 사용 O (기본값)
- off - 자동완성 사용 X
PS. 로그인 정보 (ID/PASSWORD) 입력받을 때 아래 속성값 사용 권장.
- <input type="text" id="mb_id" name="mb_id" required class="input" placeholder="아이디" autocomplete="username">
- <input type="password" name="mb_password" id="mb_password" required class="input" placeholder="패스워드" autocomplete="current-password">
autocomplete 예제 - <form>과 <input> 속성값 다른 경우
※ form과 input의 autocomplete 속성값 다를 시,, input이 우선함.
<form action="/action_page.php" method="get" autocomplete="on">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br>
<label for="nick">별명:</label>
<input type="text" id="nick" name="nick" autocomplete="off"><br>
<input type="submit">
</form>