forms - personalizar - insertar formulario en pagina wordpress

¿Cómo funciona el rellenado automático de formularios en el navegador?

Question

¿Cómo funciona el autofill formularios en los navegadores web modernos? ¿Cuáles son las técnicas más comunes utilizadas en los navegadores que implementan el llenado automático de formularios?

- EDITAR -

La pregunta no se trata de autocompletar, se trata de un autocompletado de formularios, que no solo se preocupa por los valores ingresados ​​anteriormente, sino que también considera que se completa el significado y la estructura del campo. La implementación de Google Chrome, por ejemplo, intenta analizar los campos ingresados para adivinar su tipo y estructura. O al menos es eso lo que entendí a partir del código vinculado anteriormente.

Answer 1

Echa un vistazo a esta respuesta por kmote.

Lo más destacado es que el navegador mira la etiqueta de name del campo y hace una conjetura educada sobre qué tipo de datos irían allí (la coincidencia de expresiones regulares es una buena forma ingenua de hacerlo). Chrome está trabajando para obtener algún tipo de estandarización para que esto no sea tan impredecible.

Answer 2

El primer elemento de respuesta es simplemente el atributo autocomplete del formulario HTML no estándar que se introdujo con Internet Explorer hace unos años.

Irónicamente, puede leer una buena historia y una introducción en el sitio de Mozilla aquí: el atributo de autocompletar y los documentos web utilizando XHTML

Answer 3

Esta pregunta es bastante antigua, ¡pero tengo una respuesta actualizada para 2017 !

Para activar el autocompletado, todo lo que tiene que hacer es nombrarlo correctamente.

La siguiente respuesta es de mi respuesta original de aquí: https://.com/a/41965106/1696153

Aquí hay un enlace al estándar oficial actual de WHATWG HTML para habilitar el autocompletado.

Google escribió una guía muy buena para desarrollar aplicaciones web que son amigables para dispositivos móviles. Tienen una sección sobre cómo nombrar las entradas en los formularios para usar fácilmente el llenado automático. A pesar de que está escrito para dispositivos móviles, esto se aplica tanto para equipos de escritorio como para dispositivos móviles.

Cómo habilitar Autocompletar en sus formularios HTML

Aquí hay algunos puntos clave sobre cómo habilitar autocompletar:

• Use una <label> para todos sus campos <input>
• Agregue un atributo de autocomplete a sus etiquetas <input> y complételo usando esta guía .
• Nombre su name y los atributos de autocomplete correctamente para todas las etiquetas <input>

• Ejemplo :

  <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="[email protected]" required autocomplete="email">
  
  <!-- note that "emailC" will not be autocompleted -->
  <label for="frmEmailC">Confirm Email</label>
  <input type="email" name="emailC" id="frmEmailC"
  placeholder="[email protected]" required autocomplete="email">
  
  <label for="frmPhoneNumA">Phone</label>
  <input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="[phone]" required autocomplete="tel">

Cómo nombrar tus etiquetas <input>

Para activar el autocompletado, asegúrese de nombrar correctamente los atributos de name y autocomplete en sus etiquetas <input> . Esto permitirá automáticamente autocompletar en formularios. ¡Asegúrate también de tener una <label> ! Esta información también se puede encontrar aquí .

Aquí es cómo nombrar sus entradas:

• Nombre
  • Utilice cualquiera de estos para name : name fname mname lname
  • Utilice cualquiera de estos para autocomplete :
    • name (para el nombre completo)
    • given-name (para el primer nombre)
    • additional-name (para el segundo nombre)
    • family-name (para el apellido)
  • Ejemplo: <input type="text" name="fname" autocomplete="given-name">
• Email
  • Utilice cualquiera de estos para el name : email
  • Utilice cualquiera de estos para autocomplete : email
  • Ejemplo: <input type="text" name="email" autocomplete="email">
• Dirección
  • Utilice cualquiera de estos para el name : address city region province state zip zip2 postal country
  • Utilice cualquiera de estos para autocomplete :
    • Para una entrada de dirección:
      • street-address
    • Para dos entradas de direcciones:
      • address-line1
      • address-line2
    • address-level1 (estado o provincia)
    • address-level2 (ciudad)
    • postal-code (código postal)
    • country
• Teléfono
  • Utilice cualquiera de estos para el name : phone mobile country-code area-code exchange suffix ext
  • Utilice cualquiera de estos para autocomplete : tel
• Tarjeta de crédito
  • Use cualquiera de estos para el name : ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • Utilice cualquiera de estos para autocomplete :
    • cc-name
    • cc-number
    • cc-csc
    • cc-exp-month
    • cc-exp-year
    • cc-exp
    • cc-type
• Nombres de usuario
  • Utilice cualquiera de estos para name : name username
  • Utilice cualquiera de estos para autocomplete : username
• Contraseñas
  • Use cualquiera de estos para name : password
  • Utilice cualquiera de estos para autocomplete :
    • current-password (para formularios de inicio de sesión)
    • new-password (para formularios de registro y cambio de contraseña)

Recursos

• Estándar WHATWG HTML actual para autocompletar.
• "Crea Formularios increíbles" de Google . Parece que se actualiza casi a diario. Excelente lectura.
• "Ayude a los usuarios a realizar el pago más rápido con autocompletar" de Google en 2015.

Answer 4

Las diferentes tecnologías y navegadores utilizan diversos métodos para calcular qué mostrar y cómo se muestran, pero algunas fuentes para consultar son:

• Descripción de alto nivel de Google''s
• Cómo implementarlo con jQuery (tenga en cuenta que también hay un plugin autocompletado de jQuery).

Si está pensando en implementarlo (o simplemente usarlo), le recomiendo que eche un vistazo al complemento.