¿Qué campos del formulario puedo utilizar?
Para brindar la mejor experiencia del usuario posible,
asegúrate de usar el elemento y el elemento type que sean más apropiados para los datos que ingrese el usuario.
Ayuda a los usuarios a completar texto
Si quieres 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 textos más largos, usa el elemento <textarea>.
Esto permite múltiples líneas de texto,
y permite que el usuario vea más fácilmente el texto que ingresó, ya que el elemento se puede desplazar y cambiar de tamaño.
Asegúrate de que los usuarios ingresen datos en el formato correcto
¿Quieres 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 manera más rápida y sencilla.
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 del 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,
de que sea una dirección de correo
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 fechas
¿Cuándo quieres comenzar tu próximo viaje?
Para ayudar a los usuarios a completar fechas, usa type="date".
Algunos navegadores muestran el formato como un marcador de posición, por ejemplo, yyyy-mm-dd.
demostrando cómo ingresar la fecha.
Todos los navegadores actualizados ofrecen interfaces personalizadas para seleccionar fechas con un selector.
Ayuda a los usuarios a seleccionar una opción
Para asegurarte de 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.
En primer lugar, veamos las posibles soluciones en caso de que los usuarios solo puedan elegir una única 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> del 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 muchos 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 asegurarte de que no se pueda leer la contraseña.
¿Deseas 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 los que ningún elemento o tipo integrado es adecuado.
Ayuda a los usuarios a completar tu formulario
Hay muchos tipos y elementos de formulario, 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 prueba tu formulario con usuarios reales para encontrar el mejor tipo y elemento del formulario.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre los campos de formularios
¿Es posible subir varios archivos con un control de formularios?
<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", cada carácter ingresado se oculta con un asterisco (*) o un punto (•).type="password".