[attribute] HTML - autocomplete 속성 - 자동완성 여부 지정 (= autocomplete속성 = 오토컴플리트속성)

1. autocomplete 예제 - <form> 경우
2. autocomplete 정의
3. autocomplete 구문
4. 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

 

그외, 입력값 성격에 맞는 다양한 표준 키워드 존재. 자세히 보기

(예) 로그인 정보 (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>