W3docs
es
Iniciar sesión

Atributo autocomplete de HTML

On this page, you can find information about the HTML autocomplete attribute, see its usage, the elements that it applies to and try different examples.

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

<input autocomplete="on|off">
Se aplica aElementos <form> y <input>.

Ejemplo del atributo autocomplete de HTML:

Ejemplo del atributo autocomplete de 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>
Pruébalo tú mismo »

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

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

<!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>
Pruébalo tú mismo »

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:

  1. 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.
  2. autocomplete="name": Esta opción indica al navegador que utilice el nombre del usuario como valor de autocompletado para el campo.
  3. 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.
  4. 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.
  5. 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.
  6. autocomplete="username": Esta opción indica al navegador que utilice el nombre de usuario del usuario como valor de autocompletado para el campo.
  7. 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.
  8. 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

Práctica

¿Qué hace el atributo autocomplete en HTML?