¿Qué campos de 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 texto
Para proporcionar a los usuarios un campo de formulario para insertar texto, usa el elemento <input>
.
Es la mejor opción para palabras individuales 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 con 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 más rápido y fácilmente.
Para una dirección de correo electrónico, usa type="email"
.
Una vez más, 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 comprueba 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. 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, como yyyy-mm-dd
, que muestra cómo ingresar la fecha.
Todos los navegadores modernos proporcionan interfaces personalizadas para seleccionar fechas en forma de selector de fecha.
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 tu caso de uso, existen varias alternativas.
Primero, analicemos las posibles soluciones si los usuarios solo pueden 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>
en combinación con el elemento <datalist>
.
Esto te brinda 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
Existen más tipos de entradas para casos de uso específicos.
Hay un <input>
de tipo color
para proporcionar a los usuarios un selector de color en los 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 que se ingresa 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 tipos y elementos de formularios, 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 listas y listas desplegables.
En general, asegúrate de probar tu formulario con usuarios reales para encontrar el mejor elemento y tipo de formulario.
Verifica tu comprensión
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"
, cada carácter ingresado se oculta con un asterisco (*
) o un punto (•
).type="password"
.