Atributo autocomplete de HTML

El atributo autocomplete define si un campo de entrada o un formulario debe tener el autocompletado "on" (activado) o "off" (desactivado).

Con el atributo autocomplete, el navegador predice el valor y, cuando un usuario comienza a escribir en un campo, el navegador muestra opciones para completarlo basándose en valores escritos anteriormente.

éxito
El autocompletado puede estar "on" para el formulario y "off" para campos de entrada específicos, o viceversa.

éxito
Nota: El atributo autocomplete funciona con los siguientes tipos de <input>, como text, search, tel, url, password, email, range y color.

Sintaxis

Sintaxis del atributo autocomplete de HTML

css

<input autocomplete="on|off">

Se aplica a	Elementos `<form>` y `<input>`.

Ejemplo del atributo autocomplete de HTML:

Ejemplo del atributo autocomplete de HTML:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="get" autocomplete="on">
      <div>
        <label for="name">Enter Your Name:</label>
        <input type="text" name="name" id="name" />
      </div>
      <div>
        <label for="phone">Enter Your Phone Number:</label>
        <input type="number" id="phone" name="phone-number" />
        <br />
      </div>
      <input type="submit" value="Send" />
    </form>
  </body>
</html>

Try it Yourself »

Ejemplo de la etiqueta HTML `<form>` donde el atributo autocomplete está activado:

Ejemplo de la etiqueta HTML <form> donde el atributo autocomplete está activado:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        display: block;
        margin-bottom: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" accept-charset="ISO-8859-1">
      <input type="text" name="name" placeholder="Enter your Name" autofocus />
      <input type="text" name="surname" placeholder="Enter your Surname" />
      <input type="number" name="age" placeholder="Enter your Age" autocomplete="off" />
      <input type="submit" value="Send" />
    </form>
  </body>
</html>

Try it Yourself »

Más opciones para controlar el comportamiento de "autocomplete":

En HTML, existen varias opciones que se pueden utilizar para controlar el comportamiento del autocompletado más allá de simplemente activarlo o desactivarlo. A continuación se presentan algunas de las opciones más comunes:

autocomplete="on" o autocomplete="off": Esta es la opción más básica que activa o desactiva el autocompletado para un elemento de formulario. El valor "on" habilita el autocompletado, mientras que "off" lo deshabilita.
autocomplete="name": Esta opción indica al navegador que utilice el nombre del usuario como valor de autocompletado para el campo.
autocomplete="email": Esta opción indica al navegador que utilice la dirección de correo electrónico del usuario como valor de autocompletado para el campo.
autocomplete="new-password": Esta opción indica al navegador que trate el campo como un campo de contraseña nueva, por lo que no rellenará automáticamente una contraseña existente.
autocomplete="current-password": Esta opción indica al navegador que trate el campo como un campo de contraseña actual, por lo que solo autocompletará con contraseñas guardadas anteriormente.
autocomplete="username": Esta opción indica al navegador que utilice el nombre de usuario del usuario como valor de autocompletado para el campo.
autocomplete="cc-name", autocomplete="cc-number", autocomplete="cc-exp", autocomplete="cc-csc": Estas opciones se utilizan para campos de tarjetas de crédito e indican al navegador que utilice el nombre de la tarjeta, el número, la fecha de vencimiento o el código de seguridad del usuario como valor de autocompletado.
autocomplete="postal-code", autocomplete="address-level1", autocomplete="address-level2", autocomplete="address-level3", autocomplete="country": Estas opciones se utilizan para campos de dirección e indican al navegador que utilice el código postal, el estado/provincia, la ciudad, la dirección callejera o el país del usuario como valor de autocompletado.

Estos son solo algunos ejemplos de las opciones de autocompletado disponibles en HTML. Puedes encontrar una lista completa de opciones y sus descripciones en la especificación de HTML.

Práctica

¿Qué hace el atributo autocomplete en HTML?

Proporciona sugerencias mientras escribes en el campo.Cambia el color del texto dentro del campo de entrada.Completa automáticamente el valor del campo de entrada basándose en valores escritos anteriormente.Restringe el tipo de entrada que se puede escribir en el campo.Restablece el campo de entrada a su valor predeterminado.

Atributo autocomplete de HTML ​

Sintaxis ​

Ejemplo del atributo autocomplete de HTML: ​

Ejemplo de la etiqueta HTML <form> donde el atributo autocomplete está activado: ​