Junior
¿Para qué sirve el atributo autocomplete y qué parámetros acepta?
sobes.tech AI
Respuesta de la IA
El atributo autocomplete permite que el navegador proporcione autocompletado para los campos del formulario. Mejora la usabilidad al ofrecer datos guardados previamente.
Los parámetros del atributo autocomplete se dividen en dos tipos: generales y por tipo de datos.
Parámetros generales:
off: Prohíbe el autocompletado para este campo.on: Habilita el autocompletado para este campo.
Parámetros por tipo de datos (los más utilizados):
name: Nombre completo del usuario.honorific-prefix: Prefijo antes del nombre (por ejemplo, "Mr.", "Ms.").given-name: Nombre.additional-name: Nombres adicionales (segundo nombre, etc.).family-name: Apellido.honorific-suffix: Sufijo después del nombre (por ejemplo, "Jr.", "Sr.").nickname: Apodo.email: Dirección de correo electrónico.username: Nombre de usuario.new-password: Nueva contraseña (para campos de creación de contraseña).current-password: Contraseña actual (para campos de ingreso de contraseña existente).one-time-code: Código de un solo uso (por ejemplo, para autenticación de dos factores).organization-title: Título del puesto.organization: Nombre de la organización.street-address: Calle y número de la casa.address-line1: Primera línea de la dirección.address-line2: Segunda línea de la dirección.address-line3: Tercera línea de la dirección.address-level4: La unidad administrativa más pequeña (por ejemplo, aldea).address-level3: La tercera unidad administrativa por tamaño (por ejemplo, distrito).address-level2: La segunda unidad administrativa por tamaño (por ejemplo, ciudad).address-level1: La mayor unidad administrativa (por ejemplo, estado, provincia).country: País.country-name: Nombre del país.postal-code: Código postal.cc-name: Nombre en la tarjeta de crédito.cc-given-name: Nombre en la tarjeta de crédito.cc-additional-name: Nombres adicionales en la tarjeta de crédito.cc-family-name: Apellido en la tarjeta de crédito.cc-number: Número de la tarjeta de crédito.cc-exp: Fecha de vencimiento de la tarjeta de crédito.cc-exp-month: Mes de vencimiento.cc-exp-year: Año de vencimiento.cc-csc: Código de seguridad de la tarjeta.cc-type: Tipo de tarjeta de crédito.transaction-currency: Moneda de la transacción.transaction-amount: Monto de la transacción.language: Idioma preferido.
Los parámetros también pueden incluir prefijos, como shipping o billing, indicando que son datos de envío o pago, respectivamente.
Ejemplo de uso:
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" autocomplete="given-name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="email">
<label for="street">Calle:</label>
<input type="text" id="street" name="street" autocomplete="shipping street-address">
</form>