New(ish) in HTML5
elautocomplete
atributo se introdujo como una característica HTML no oficial en Internet Explorer de Microsoft, y fue adoptado por un número de otros navegadores. Por lo tanto, ha habido un amplio apoyo para él durante mucho tiempo, aunque su comportamiento exacto no estaba estandarizado. Con HTML5, el atributo autocomplete
es una parte oficial de la especificación.,
Autocompletar vs. list&< datalist>
el atributo autocomplete
pide al navegador que intente en el historial de usuario. Esto es útil para detalles personales como el nombre y la dirección de correo electrónico, cosas que el usuario probablemente tenga en campos de entrada similares en otros sitios web. La función autocomplete
no puede proporcionar al navegador una lista de opciones de autocompletar específicas del sitio., Para el comportamiento de autocompletar con sugerencias específicas del sitio, utilice el atributo list
con el elemento <datalist>
.
deliberadamente «roto»
todos los principales navegadores ignoran el valor autocomplete="off"
para ciertos tipos de campos de entrada. Internet Explorer y Edge lo ignoran para todos los campos password
. Firefox lo ignora para cualquier campo en un formulario de inicio de sesión. Chrome lo ignora cada vez que el Usuario ha elegido dejar que el navegador recuerde los datos del formulario. Safari lo ignora para los campos de nombre de usuario, correo electrónico y contraseña., Ignorar el valor autocomplete="off"
se hace para mejorar la usabilidad y darle al usuario más control sobre el comportamiento de autocompletar. Como diseñador de UX, debe seguir su ejemplo y usar autocomplete="off"
con moderación. Hay muy pocos casos de uso en formularios normales donde realmente tiene sentido rechazar autocomplete
. En algunas aplicaciones complejas, tiene sentido evitar entradas accidentales, pero con la mayoría de los formularios estándar realmente no hay razón para ello.,
Autocompletar y name
los navegadores utilizan el atributo name
para averiguar qué tipo de información está pidiendo un campo de entrada. Por lo tanto, utilice valores estándar y significativos para name
., Si usted está solicitando una dirección, el uso de nombres como:
address-1
address-2
city
-
state
oprovince
-
zip
opostal-code
no uso inteligente o extrañamente nombres específicos, como la que hace más difícil para el navegador para proporcionar sugerencias de autocompletar, y puede incluso conducir a que el navegador tratando de llenar en los valores incorrectos en malas entradas., (¿ Alguna vez ha tenido su navegador llenar su número de teléfono en el campo de código postal? Eso fue culpa del mal nombre.)
valores del atributo Autocompletar
valor Name | Notes |
---|---|
off | desactiva la Autocompletar. |
on | activa el autocompletado., |
Todos los Atributos de Elemento de entrada
nombre del Atributo | Valores | Notas |
---|---|---|
paso | Especifica el intervalo entre los valores válidos en un número basado en la entrada. | |
requiere | Especifica que el campo de entrada es necesario; no permite el envío de formularios y avisa al usuario si el campo está vacío. | |
marcador de posición | especifica el texto del marcador de posición en una entrada basada en texto., | |
patrón | Especifica una expresión regular con la que validar el valor de la entrada. | |
multiple | permite al usuario introducir múltiples valores en una carga de archivo o entrada de correo electrónico. | |
min | Especifica un valor mínimo para el número y fecha de los campos de entrada. | |
max | Especifica un valor máximo para el número y fecha de los campos de entrada., | |
lista | Especifica el id de un elemento <datalist> elemento que ofrece una lista de sugerencias de autocompletar para el campo de entrada. | |
altura | Especifica la altura de una imagen de entrada. | |
formtarget | Especifica el contexto de navegación en el que se abre la respuesta desde el servidor, después del envío del formulario. Para su uso solo en los tipos de entrada de «enviar» o «imagen»., | |
formmethod | Especifica el método HTTP (GET o POST), para ser utilizado cuando los datos del formulario se envían al servidor. Solo para usar en tipos de entrada de «enviar» o «imagen». | |
formenctype | Especifica la forma cómo deben presentarse los datos al servidor. Solo para usar en los tipos de entrada «submit»e » image». | |
formaction | Especifica la dirección URL para el envío de formularios. Solo se puede usar para type = «submit»Y type=»image». | |
formulario | Especifica un formulario para que el campo de entrada pertenece., | |
autofocus | especifica que el campo de entrada debe estar enfocado inmediatamente después de cargar la página. | |
accesskey | Define un método abreviado de teclado para el elemento. | |
Autocompletar | off on |
especifica si el navegador debe intentar completar automáticamente la entrada en función de las entradas del Usuario a campos similares. |
de la frontera | Se utiliza para especificar un borde en una entrada. Obsoleto. Usa CSS en su lugar., | |
marcado | especifica si una casilla de verificación o un botón de opción de entrada de formulario deben estar marcados de forma predeterminada. | |
discapacidad | Desactiva el campo de entrada. | |
maxlength | Especifica el número máximo de caracteres que se puede introducir en un texto del tipo de entrada. | |
language | se utilizó para indicar el lenguaje de scripting utilizado para los eventos activados por la entrada. | |
nombre | Especifica el nombre de un elemento de entrada., El nombre y el valor de cada elemento de entrada se incluyen en la solicitud HTTP cuando se envía el formulario. | |
size | especifica el ancho de la entrada en caracteres. | |
src | Define la dirección URL de origen de una imagen de entrada. | |
tipo | button checkbox file hidden image password radio reset submit text |
Define el tipo de entrada. |
value | define un valor inicial o una selección predeterminada para un campo de entrada., |
Deja una respuesta