Me gustaría saber si hay algún tipo de marcado especial para habilitar la función de autocompletar de Chrome para un formulario específico. Solo encontré preguntas sobre cómo deshabilitarlo, pero me gustaría saber si puedo agregar algún tipo de marcado al código html para decirle al navegador "esta es la entrada para la dirección" o "este es el código postal campo "para completarlo correctamente (se supone que el usuario activó esta función).
Respuestas:
ACTUALIZACIÓN para 2017: Parece que la respuesta de Katie tiene más información actualizada que la mía. Futuros lectores: den su voto positivo a su respuesta .
Esta es una gran pregunta y para la cual la documentación es sorprendentemente difícil de encontrar. En realidad, en muchos casos encontrará que la funcionalidad de Autocompletar de Chrome "simplemente funciona". Por ejemplo, el siguiente fragmento de html produce un formulario que, al menos para mí (Chrome v. 18), se llena automáticamente después de hacer clic en el primer campo:
<!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>Sin embargo, esta respuesta no es satisfactoria, ya que deja la solución en el ámbito de la "magia". Profundizando, aprendí que Chrome (y otros navegadores habilitados para autocompletar) se basan principalmente en pistas contextuales para determinar el tipo de datos que se deben completar en los elementos del formulario. Los ejemplos de tales pistas contextuales incluyen el namede un elemento de entrada, el texto que rodea el elemento y cualquier texto de marcador de posición.
Recientemente, sin embargo, el equipo de Chrome reconoció que esta es una solución insatisfactoria, y han comenzado a presionar por la estandarización en este asunto. Una publicación muy informativa del grupo de Google Webmasters recientemente discutió este problema, explicando:
Desafortunadamente, hasta ahora ha sido difícil para los webmasters asegurarse de que Chrome y otros proveedores de llenado de formularios puedan analizar su formulario correctamente. Existen algunas normas; pero imponen cargas onerosas en la implementación del sitio web, por lo que no se usan mucho en la práctica.
(Los "estándares" a los que se refieren es una versión más reciente de la especificación mencionada en la respuesta de Avalanchis anterior).
La publicación de Google continúa describiendo su solución propuesta (que se encuentra con críticas significativas en los comentarios de la publicación). Proponen el uso de un nuevo atributo para este propósito:
Simplemente agregue un atributo al elemento de entrada, por ejemplo, un campo de dirección de correo electrónico podría verse así:
<input type=”text” name=”field1” x-autocompletetype=”email” />
... donde x-significa "experimental" y se eliminará si esto se convierte en un estándar. Lea la publicación para obtener más detalles, o si desea profundizar, encontrará una explicación más completa de la propuesta en el wiki de whatwg .
ACTUALIZACIÓN:
Como se señala en estas respuestas perspicaces , se pueden encontrar todas las expresiones regulares que Chrome usa para identificar / reconocer campos comunes . Entonces, para responder la pregunta original, solo asegúrese de que los nombres de sus campos html coincidan con estas expresiones. Algunos ejemplos incluyen:autofill_regex_constants.cc.utf8
"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$"¡Esta pregunta es bastante antigua pero tengo una respuesta actualizada !
Aquí hay un enlace a la documentación de WHATWG para habilitar el autocompletado.
Google escribió una guía bastante buena para desarrollar aplicaciones web que sean amigables para dispositivos móviles. Tienen una sección sobre cómo nombrar las entradas en los formularios para usar fácilmente el autocompletado. A pesar de que está escrito para dispositivos móviles, esto se aplica tanto para escritorio como para dispositivos móviles.
Aquí hay algunos puntos clave sobre cómo habilitar el autocompletado:
<label>para todos sus <input>camposautocompleteatributo a sus <input>etiquetas y complételo con esta guía .namey autocompletecorrectamente para todas las <input>etiquetasEjemplo :
<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>etiquetasPara activar el autocompletado, asegúrese de nombrar correctamente los atributos namey autocompleteen sus <input>etiquetas. Esto permitirá automáticamente el autocompletado en formularios. ¡Asegúrate también de tener un <label>! Esta información también se puede encontrar aquí. .
Aquí le mostramos cómo nombrar sus entradas:
name:name fname mname lnameautocomplete:
name (para nombre completo)given-name (para el primer nombre)additional-name (para el segundo nombre)family-name (por apellido)<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 (Estado o Provincia)address-level2 (ciudad)postal-code (código postal)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 (para formularios de inicio de sesión)new-password (para formularios de registro y cambio de contraseña)De mis pruebas, la x-autocompleteetiqueta no hace nada. En su lugar, use autocompleteetiquetas en sus etiquetas de entrada y establezca sus valores de acuerdo con las especificaciones HTML aquí http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms. html # autofill-field .
Ejemplo:
<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>La etiqueta de formulario principal necesita autocompletar = "on" y method = "POST".
on , offo default. Por lo tanto, este marcado no es válido y será propenso a inconsistencias. De hecho, creo que la ubicación en el atributo de autocompletar es irrelevante. Supongo que analiza todos los atributos y el autocompletado es uno de los que verifica.
Debe nombrar los elementos adecuadamente para que el navegador los complete automáticamente.
Aquí está la especificación IETF para esto:
Acabo de jugar con la especificación y obtuve un buen ejemplo de trabajo, incluidos algunos campos más.
<!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>Contiene 2 áreas de direcciones separadas y también diferentes tipos de direcciones. También lo probé en iOS 8.1.0 y parece que siempre llena todos los campos a la vez, mientras que el escritorio automático de Chrome completa la dirección por dirección.
Parece que tendremos más control sobre esta función de autocompletar, hay una nueva API experimental que llega a Chrome Canary, que se puede usar para acceder a los datos después de solicitarla al usuario:
http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete
nueva información de google:
http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html
Aquí está la respuesta real:
Esto funciona: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
Esto no: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>
La única diferencia está en la etiqueta misma. El "Nom" viene de "Nombre" o "Nome" en portugués.
Entonces, esto es lo que necesitas:
<label for="id_of_field">Name</label><input id="id_of_field"></input>Nada mas.
Aquí está la nueva lista de "nombres" de Autocompletar de Google. Existen todos los nombres admitidos en cualquier idioma permitido.
Google ahora proporciona documentación para esto:
Ayuda a los usuarios a pagar más rápido con Autocompletar | Web | Desarrolladores de Google
y
En mi caso, $('#EmailAddress').attr('autocomplete', 'off');no se trabaja. Pero los siguientes trabajos en Chrome Versión 67 por jQuery.
$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');