답변:
2017 년 업데이트 : Katie의 답변이 내 것보다 최신 정보를 가지고있는 것 같습니다. 미래 독자 : 그녀의 답변에 투표를하십시오 .
이것은 훌륭한 질문이며 문서를 제공하기가 매우 어려운 질문입니다. 실제로 대부분의 경우 Chrome 자동 완성 기능이 "작동하는 것"임을 알 수 있습니다. 예를 들어, 다음 HTML 스 니펫은 적어도 나 (Chrome v. 18)의 첫 번째 필드를 클릭 한 후 자동으로 채워지는 양식을 생성합니다.
<!DOCTYPE html>
<html>
<body>
<form method="post">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="text" name="email" /><br />
Phone: <input type="text" name="phone" /><br />
Address: <input type="text" name="address" /><br />
</form>
</body>
</html>그러나이 답변은 "매직"영역에 솔루션을 남겨 두므로 만족스럽지 않습니다. 더 깊이 파고 들어 크롬 (및 기타 자동 완성 브라우저)은 주로 컨텍스트 요소에 의존하여 양식 요소에 채워야하는 데이터 유형을 결정한다는 사실을 알게되었습니다. 이러한 맥락 단서의 예로 name는 입력 요소, 요소를 둘러싼 텍스트 및 자리 표시 자 텍스트가 있습니다.
그러나 최근 Chrome 팀은 이것이 불만족스러운 솔루션임을 인정했으며이 문제에 대한 표준화를 요구하기 시작했습니다. Google 웹 마스터 그룹의 유익한 게시물 에서 최근이 문제에 대해 다음과 같이 설명했습니다.
불행히도, 지금까지 웹 마스터는 Chrome 및 기타 양식 작성 제공 업체가 양식을 올바르게 구문 분석 할 수 있도록하기가 어려웠습니다. 일부 표준이 존재합니다. 그러나 그들은 웹 사이트 구현에 큰 부담을 주므로 실제로 많이 사용되지는 않습니다.
(그들이 참조하는 "표준"은 위의 Avalanchis의 답변에 언급 된 사양의 최신 버전입니다 .)
Google 게시물은 제안 된 솔루션을 설명합니다 (이 게시물의 의견에서 상당한 비판으로 충족 됨). 이 목적을 위해 새로운 속성을 사용할 것을 제안합니다.
입력 요소에 속성을 추가하기 만하면됩니다. 예를 들어 이메일 주소 필드는 다음과 같습니다.
<input type=”text” name=”field1” x-autocompletetype=”email” />
... x-"실험"을 의미하며 이것이 표준이되면 &가 제거됩니다. 자세한 내용 은 게시물 을 읽 거나 더 깊이 파고 싶다면 whatwg wiki 에서 제안 에 대한 자세한 설명을 찾을 수 있습니다.
업데이트 :
이 통찰력있는 답변 에서 지적했듯이 Chrome이 공통 필드를 식별 / 인식하는 데 사용하는 모든 정규 표현식은에서 찾을 수 있습니다 autofill_regex_constants.cc.utf8. 따라서 원래 질문에 답하려면 html 필드의 이름이이 표현식과 일치하는지 확인하십시오. 몇 가지 예는 다음과 같습니다.
"first.*name|initials|fname|first$""last.*name|lname|surname|last$|secondname|family.*name""e.?mail""address.*line|address1|addr1|street""zip|postal|post.*code|pcode|^1z$"이 질문은 꽤 오래되었지만 업데이트 된 답변이 있습니다 !
다음은 자동 완성을 활성화하기위한 WHATWG 설명서에 대한 링크입니다.
Google은 휴대 기기에 친숙한 웹 애플리케이션을 개발하기위한 훌륭한 안내서 를 작성했습니다 . 자동 채우기를 쉽게 사용할 수 있도록 양식의 입력 이름을 지정하는 방법에 대한 섹션이 있습니다. 모바일 용으로 작성되었지만 데스크톱과 모바일 모두에 적용됩니다!
자동 완성을 활성화하는 방법에 대한 몇 가지 주요 사항은 다음과 같습니다.
<label>모든 <input>분야에 a 를 사용하십시오.autocomplete<input>태그에 속성 을 추가 하고이 안내서 를 사용하여 채우십시오 .name과 autocomplete속성 이름을 올바르게 지정하십시오<input>예 :
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name@example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel"><input>태그 이름을 지정하는 방법자동 완성을 실행하려면 태그 에서 name및 autocomplete속성의 이름을 올바르게 지정 해야 <input>합니다. 그러면 양식에서 자동 완성이 자동으로 허용됩니다. 또한 가지고 있어야합니다 <label>! 이 정보는 여기 에서도 찾을 수 있습니다 .
입력 이름을 지정하는 방법은 다음과 같습니다.
name.name fname mname lnameautocomplete.
name (이름)given-name (이름)additional-name (중간 이름)family-name (성)<input type="text" name="fname" autocomplete="given-name">name.emailautocomplete.email<input type="text" name="email" autocomplete="email">name.address city region province state zip zip2 postal country autocomplete.
street-addressaddress-line1address-line2address-level1 (국가 또는 지방)address-level2 (시티)postal-code (우편 번호)countryname.phone mobile country-code area-code exchange suffix extautocomplete.telname.ccname cardnumber cvc ccmonth ccyear exp-date card-typeautocomplete.
cc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-typename.usernameautocomplete.usernamename.passwordautocomplete.
current-password (로그인 양식)new-password (가입 및 비밀번호 변경 양식)내 테스트에서 x-autocomplete태그는 아무것도하지 않습니다. 대신 autocomplete입력 태그에 태그를 사용하고 http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms HTML 사양에 따라 값을 설정 하십시오. html # autofill-field .
예:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>부모 양식 태그에는 autocomplete = "on"및 method = "POST"가 필요합니다.
방금 사양으로 arround를 연주하고 몇 가지 필드를 포함하여 훌륭한 작업 예를 얻었습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form autocomplete="on" method="POST">
<fieldset>
<legend>Ship the blue gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ba
autocomplete="section-blue shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-blue shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=bp
autocomplete="section-blue shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>Ship the red gift to...</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="section-red shipping street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="section-red shipping address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="section-red shipping postal-code">
</label>
</p>
</fieldset>
<fieldset>
<legend>payment address</legend>
<p>
<label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
</label>
</p>
<p>
<label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
</label>
</p>
<p>
<label> Address: <input name=ra
autocomplete="billing street-address">
</label>
</p>
<p>
<label> City: <input name=bc
autocomplete="billing address-level2">
</label>
</p>
<p>
<label> Postal Code: <input name=rp
autocomplete="billing postal-code">
</label>
</p>
</fieldset>
<input type="submit" />
</form>
</body>
</html>2 개의 개별 주소 영역과 다른 주소 유형이 포함되어 있습니다. iOS 8.1.0에서도 테스트 한 결과 모든 필드를 한 번에 채우는 반면 데스크탑 크롬은 주소별로 주소를 자동 입력합니다.
이 자동 완성 기능에 대해 더 많은 제어권을 얻는 것처럼 보입니다. Chrome Canary에는 새로운 실험용 API가 있으며 사용자에게 요청한 후 데이터에 액세스하는 데 사용할 수 있습니다.
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
Google의 새로운 정보 :
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
실제 답변은 다음과 같습니다.
이것은 작동합니다 : http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
이것은 아닙니다 : http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>
유일한 차이점은 라벨 자체입니다. "Nom"은 포르투갈어의 "Name"또는 "Nome"에서 유래했습니다.
여기 필요한 것이 있습니다 :
<label for="id_of_field">Name</label><input id="id_of_field"></input>더 이상 없습니다.
다음은 Google 자동 완성 '이름'의 새로운 목록입니다. 허용되는 언어로 지원되는 모든 이름이 있습니다.
내 경우 $('#EmailAddress').attr('autocomplete', 'off');에는 작동하지 않습니다. 그러나 다음은 jQuery의 Chrome 버전 67에서 작동합니다.
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');