¿Qué campos del formulario puedo usar?
Para proporcionar la mejor experiencia del usuario posible, asegúrate de usar el elemento y el elemento type que sean más adecuados para los datos que ingresa el usuario.
Ayuda a los usuarios a completar el texto
Si deseas proporcionar a los usuarios un campo de formulario para insertar texto, usa el elemento <input>.
Es la mejor opción para palabras sueltas y textos cortos.
Para texto más largo, usa el elemento <textarea>.
Esto permite varias líneas de texto y facilita que el usuario vea el texto que ingresó, ya que el elemento se puede desplazar y cambiar de tamaño.
Asegúrate de que los usuarios ingresen los datos en el formato correcto.
¿Deseas ayudar a los usuarios a completar un número de teléfono?
Cambia el atributo type a type="tel" para <input>.
Los usuarios de dispositivos móviles obtienen un teclado en pantalla adaptado, lo que garantiza que puedan ingresar el número de teléfono de forma más rápida y fácil.
Para una dirección de correo electrónico, usa type="email".
Nuevamente, se muestra un teclado en pantalla adaptado.
Usa el atributo required para que el campo de formulario sea obligatorio.
Cuando se envía el formulario, el navegador verifica que la entrada tenga un valor y que sea válida: en este caso, que sea una dirección de correo electrónico con el formato correcto.
Obtén más información sobre los diferentes tipos de entrada. Estas también proporcionan funciones de validación integradas.
Ayuda a los usuarios a completar las fechas
¿Cuándo quieres comenzar tu próximo viaje?
Para ayudar a los usuarios a completar las fechas, usa type="date".
Algunos navegadores muestran el formato como un marcador de posición (por ejemplo, yyyy-mm-dd) para mostrar cómo ingresar la fecha.
Todos los navegadores actualizados ofrecen interfaces personalizadas para seleccionar fechas en forma de un selector de fechas.
Ayudar a los usuarios a seleccionar una opción
Para garantizar que los usuarios puedan seleccionar o anular la selección de una opción posible, usa type="checkbox".
¿Quieres ofrecer varias opciones?
Según el caso de uso, existen varias alternativas.
Primero, veamos posibles soluciones en caso de que los usuarios solo puedan elegir una opción.
Puedes usar varios elementos <input> con type="radio" y el mismo valor name. Los usuarios ven todas las opciones a la vez, pero solo pueden elegir una.
Otra opción es usar el elemento <select>.
Los usuarios pueden desplazarse por una lista de opciones disponibles y elegir una.
Para algunos casos de uso, como elegir un rango de números, <input> de tipo range puede ser una buena opción.
¿Necesitas ofrecer la posibilidad de seleccionar varias opciones?
Usa un elemento <select> con el atributo multiple o varios elementos <input> de tipo checkbox.
También puedes usar un <input> junto con el elemento <datalist>.
Esto te proporciona una combinación de un campo de texto y una lista de elementos <option>.
Asegúrate de que los usuarios puedan completar diferentes tipos de datos
Hay más tipos de entrada para casos de uso específicos.
Hay un <input> de tipo color para proporcionar a los usuarios un selector de color en navegadores compatibles, y también hay varios otros tipos. Para asegurarte de que los usuarios puedan ingresar su contraseña, usa <input> con type="password". Cada carácter ingresado se oculta con un asterisco ("*") o un punto ("•"), para garantizar que no se pueda leer la contraseña.
¿Quieres incluir un token de seguridad único en los datos del formulario?
Usa <input> con type="hidden".
Los usuarios no pueden ver ni modificar el valor de un <input> de tipo hidden.
Para permitir que los usuarios suban y envíen archivos, usa <input> con type="file".
También puedes definir elementos personalizados si tienes un caso de uso especial, en el que no es adecuado ningún elemento o tipo integrado.
Ayuda a los usuarios a completar tu formulario
Hay muchos elementos de formulario y tipos, pero ¿cuál deberías elegir?
En algunos casos de uso, es sencillo elegir el elemento y el tipo adecuados, como <input type="date">. Para otros, depende.
Por ejemplo, puedes usar varios elementos <input> con type="checkbox" o un elemento <select>.
Obtén más información para elegir entre cuadros de lista y listas desplegables.
En general, asegúrate de probar tu formulario con usuarios reales para encontrar el mejor elemento y tipo de formulario.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre los campos de formulario
¿Es posible subir varios archivos con un control de formulario?
<input type="files">.<input type="file" multiple>.<input type="multiple-files">.¿Cuál es la diferencia entre type="text" y type="password"?
type="password".type="password", todos los caracteres ingresados se ocultan con un asterisco (*) o un punto (•).type="password".