Información detallada sobre los atributos del formulario

Los atributos de elementos HTML pueden mejorar tu <form> y los controles de formularios.

Ayuda a los usuarios a completar los controles del formulario

Para que los usuarios puedan completar formularios con mayor facilidad, usa un atributo type adecuado para tus elementos <input>.

Los navegadores muestran una interfaz de usuario apropiada para el elemento type, como un selector de fecha para una <input> de tipo date. En los navegadores de dispositivos móviles, se muestra un teclado en pantalla adaptado, como el teclado de los números de teléfono de type="tel".

Algunos tipos de <input> también cambian las reglas de validación de un elemento cuando se envía su formulario. Por ejemplo, <input type="url"> solo es válido si no está vacío y el valor es una URL.

Asegúrate de que los usuarios ingresen datos

Hay diferentes atributos para proporcionar un teclado en pantalla adecuado en dispositivos táctiles. La primera opción es usar el atributo type, como se mencionó anteriormente.

Otra opción es el atributo inputmode compatible con iOS y Android. A diferencia del atributo type, el atributo inputmode solo cambia el teclado en pantalla proporcionado, no el comportamiento del elemento en sí. Usar inputmode es una buena opción si deseas mantener la interfaz de usuario predeterminada y las reglas de validación predeterminadas de un objeto <input>, pero igualmente quieres un teclado en pantalla optimizado.

Puedes cambiar la tecla Enter en los teclados en pantalla con el atributo enterkeyhint. Por ejemplo, enterkeyhint="next" o enterkeyhint="done" cambian la etiqueta del botón por un ícono adecuado. Esto ayuda a que los usuarios sepan con mayor claridad lo que sucede cuando envían el formulario actual.

Asegúrate de que los usuarios puedan enviar un formulario

Supongamos que completas una <form> y haces clic en el botón Enviar, pero no sucede nada. El problema puede ser que el botón se inhabilitó con el atributo disabled. Inhabilitar el botón Enviar hasta que el formulario sea válido es un patrón común.

En teoría, esto parece razonable, pero no deberías inhabilitar un botón Enviar mientras esperas una entrada del usuario completa y válida. En cambio, destaca los datos no válidos cuando se ingresan y destaca los campos problemáticos para el usuario cuando envíe el formulario.

Sin embargo, te recomendamos inhabilitar el botón Enviar una vez que se haya enviado correctamente el formulario, pero todavía no se haya procesado. Obtén más información sobre los botones inhabilitados.

Ayuda a los usuarios mostrando los datos que ingresaron anteriormente

Imagina que tienes un formulario de confirmación de la compra con varios pasos. ¿Cómo se aseguran de que los valores ingresados anteriormente sigan estando allí cuando el usuario regrese al paso anterior? Usa el atributo value para mostrar los valores que ya se completaron.

<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">

Existen varias formas de recuperar el valor de un control de formulario en JavaScript. Puedes usar la propiedad value o puedes acceder al valor con getAttribute('value'). Hay una gran diferencia: la propiedad value siempre muestra el valor actual y, si se usa getAttribute(), siempre muestra el valor inicial.

Pruébala. Cambia el texto del campo del nombre y observa la consola. Observa cómo la propiedad value muestra el texto visible actualmente, mientras que getAttribute('value') siempre muestra el valor inicial.

Obtén más información sobre la diferencia entre los atributos y las propiedades del DOM.

Para los elementos <input> de tipo checkbox o radio, usa el atributo checked. Agrégala si el usuario seleccionó una opción y, de lo contrario, quítala.

Asegúrate de que los usuarios comprendan el formato esperado

El valor del atributo placeholder indica qué tipo de información se espera.

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">

Esto puede confundir a los usuarios, ya que puede parecer ilógico por qué un control de formulario parece ya estar completado previamente. Además, agregar un marcador de posición puede dificultar la visualización de los campos del formulario que aún se deben completar. Además, el estilo predeterminado del texto del marcador de posición puede ser difícil de leer.

En general, ten cuidado cuando uses el atributo placeholder y nunca uses el atributo placeholder para explicar un control de formulario. En su lugar, usa el elemento <label>. Obtén más información sobre por qué deberías considerar evitar el atributo placeholder.

Una mejor manera de darles a los usuarios una pista sobre el tipo de información que se espera es usar un elemento HTML adicional debajo del control del formulario para agregar una explicación o un ejemplo.

Asegúrate de que los controles del formulario estén listos para la validación

Hay varios atributos HTML disponibles para activar la validación integrada. Usa el atributo required para evitar el envío de campos vacíos. Se pueden aplicar validaciones adicionales con el atributo type. Por ejemplo, el valor de un <input> obligatorio de type="url" debe ser una URL.

Para asegurarte de que un usuario ingrese una cantidad mínima de caracteres, usa el atributo minlength. Para inhabilitar cualquier valor que tenga más de una cantidad máxima de caracteres, usa el atributo maxlength. Para los tipos de entrada numéricos, como <input type="number">, usa el atributo min y max en su lugar.

Obtén más información sobre la validación: Ayuda a los usuarios a ingresar los datos correctos en los formularios.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los atributos del formulario

Recursos

• Atributos HTML de <input>
• Atributos HTML globales