¿Sabías que existen diferentes tipos de entrada de formulario en HTML5? Y lo mejor de todo, es que estos tipos de entrada nos permiten mejorar la experiencia del usuario al ofrecerles opciones de ingreso de datos más intuitivas y precisas. En este artículo, vamos a conocer en detalle cuáles son los diferentes tipos de entrada de formulario en HTML5 y cómo utilizarlos de manera efectiva en nuestro desarrollo web. ¡No te lo pierdas en TIEngranaje!
HTML5 nos trae trece nuevos tipos de entrada que puede usar para ayudar a validar la entrada del usuario, así como también cómo presentar el formulario en el navegador.
A partir de este escrito, no todos los principales navegadores son compatibles los nuevos tipos de entrada. Chrome, Opera y Safari tienen la mayor compatibilidad.
Tenga en cuenta que el especificación HTML5 aún se está desarrollando, por lo que esta información puede cambiar.
Tipos de entrada HTML 4.01
Antes de la introducción de HTML5, HTML 4.01 admitía diez tipos de entrada diferentes. Estos tipos de entrada siguen siendo soportado en HTML5.
| Tipo de entrada | Descripción |
|---|---|
Button |
Define un botón en el que se puede hacer clic |
Checkbox |
Define una casilla de verificación |
File |
Define un botón de selección de archivo |
Hidden |
Define un campo de entrada oculto |
Image |
Define una imagen como el botón de enviar |
Password |
Define un campo de contraseña |
Radio |
Define un botón de opción |
Reset |
Define un botón de reinicio que borra todos los campos del formulario |
Submit |
Define un botón de envío |
Text |
Define un campo de texto de una sola línea |
Tipos de HTML5
Nota: En el caso de que un navegador antiguo visite su página con los nuevos tipos y atributos de entrada, el tipo de entrada será predeterminado type="text"para que no tengas que preocuparte por problemas de compatibilidad.
Esta es la clave es que aún puede hacer uso de formularios HTML5 hoy. Si usa un nuevo tipo de entrada, como correo electrónico o búsqueda, los navegadores que no admitan el nuevo tipo de entrada simplemente presentarán a los usuarios un campo de texto estándar.
Tipo de entrada: color
El color type se utiliza para campos de entrada que deben contener un color.
Select a color: <input type="color" name="favColor">Tipo de entrada: fecha
El date tipo permite al usuario seleccionar una fecha.
Select a date: <input type="date" name="myDate">Tipo de entrada: fecha y hora
El datetime tipo permite al usuario seleccionar una fecha y hora, con una zona horaria.
Select a date and time: <input type="datetime" name="myDatetime">Tipo de entrada: fecha y hora local
El datetime-local tipo permite al usuario seleccionar una fecha y hora, sin zona horaria.
Select a date and time: <input type="datetime-local" name="myDatetime-local">Tipo de entrada: correo electrónico
El email El tipo se utiliza para los campos de entrada que deben contener una dirección de correo electrónico. Introduzca un valor en el cuadro de entrada. El valor se valida cuando se envía.
E-mail: <input type="email" name="emailAddr">Tipo de entrada: mes
El month type permite al usuario seleccionar un mes y un año.
Month and year: <input type="month" name="myMonth">Tipo de entrada: número
El number El tipo se utiliza para los campos de entrada que deben contener un valor numérico. Se pueden usar atributos adicionales para restringir los números permitidos.
Choose Number (1-10): <input type="number" name="myNumber" min="1" max="10">Tipo de entrada: rango
El range El tipo se usa para campos de entrada que deben contener un valor de un rango de números. También puede establecer restricciones sobre qué números se aceptan.
Choose Number (1-10): 1 <input type="range" name="myRange" min="1" max="10"> 10Tipo de entrada: buscar
El search El tipo se utiliza para los campos de búsqueda.
Search: <input type="search" name="mySearch">Tipo de entrada: teléfono
El tel type se utiliza para introducir un número de teléfono.
Telephone: <input type="tel" name="myTelephone">Tipo de entrada: tiempo
El time El tipo se utiliza para seleccionar la hora.
Time: <input type="time" name="myTime">Tipo de entrada: URL
El url type se utiliza para los campos de entrada que deben contener una dirección URL. Algunos clientes, como los iPhone, cambiarán el teclado para ajustar las claves de URL, como «.com».
URL: <input type="url" name="myURL">Tipo de entrada: semana
El week El tipo permite al usuario seleccionar una semana y un año.
Week: <input type="week" name="myWeek">