Tipos de campos disponibles en HTML5 para tus formularios
En este tutorial vas a descubrir en detalle la funcionalidad de los controles de formulario más recientes.
Te haré conocer algunos tipos de input nuevos, los cuales fueron añadidos en HTML5 para permitir la recolección de tipos de datos específicos.
También incluiré los tipos de campos que se han utilizado toda la vida.
El objetivo de este tutorial es darte a conocer los tipo de campos disponibles para crear controles de tus formulario.
Además, de cómo implementarlos utilizando HTML sin necesidad de utilizar plugins adicionales que pueden hacer retardar la carga de la página.
Campo de tipo texto
Este tipo de campo ha existido desde los inicios de HTML.
Lo incluyo en esta lista porque, en realidad, es uno de los más utilizados.
Los campos de tipo texto permiten al usuario agregar texto simple como por ejemplo pudiera ser el nombre, apellidos, entre otros.
Agregar un campo de tipo texto en tus formularios se consigue de la siguiente forma:
<input type="text" name="firstname" placeholder="Nombre">El atributo «placeholder» es interesante usarlo cuando prefieres hacer un diseño sin la etiqueta <label> donde se suele incluir que debe rellenar el usuario para este campo. Con «placeholder», esta información ya dentro del mismo campo. Al ubicarte en el campo, ese texto desaparece para que puedas rellenar el contenido.
Campo de tipo correo electrónico
Los campos de tipo email se utilizan sobre todo en formularios de registro de usuarios.
El campo email es clave para identificar los usuarios como únicos.
Podría ser posible pero, no me imagino un formulario de registro de usuarios sin el campo email.
Este tipo de campo se define utilizando el valor email en el atributo type del elemento <input>:
<input type="email" id="email" name="email" placeholder="Email" autocomplete="off" required>Cuando se utiliza este valor type=»email», se le obliga al usuario a escribir dentro del campo una dirección de correo electrónico válida.
Cualquier otro contenido ocasiona que el navegador muestre un mensaje de error cuando se envía el formulario siempre y cuando el atributo «required» esté establecido.
Puedes verlo en acción en la siguiente captura de pantalla:
Cuando agregas el atributo «required» a tus campos, estás obligando a los usuarios a rellenar estos campos.
El campo email, junto con otros tipos de campos más recientes, proporciona la validación de errores en el lado cliente de forma predeterminada, realizados por el navegador antes de que los datos obtenidos se envíen al servidor.
Esto puede ser considerado una buena ayuda para guiar a los usuarios a rellenar el formulario de forma precisa y puede ahorrar tiempo tanto a ti como programador como a los usuarios que utilizan la aplicación.
De hecho, es útil saber de inmediato que tu dato no es correcto, en vez de tener que esperar el viaje de ida y vuelta al servidor para averiguarlo.
Con esta nueva solución, lógicamente la experiencia de usuario mejora muchísimo pero, dejarlo simplemente así no debería ser considerado una buena práctica si quieres que tu aplicación también sea segura.
Tus aplicaciones siempre deben realizar comprobaciones de seguridad sobre cada dato, tanto en el lado servidor como en el lado cliente debido a que la validación en el lado cliente es muy fácil desactivarla. Usuarios con conocimientos y malintencionados pueden enviar fácilmente datos incorrectos a tu servidor y podría hackear el sistema en cuestión de segundos.
Campo de búsqueda
Los campos de búsqueda están destinados a ser utilizados para crear cajas de búsqueda en páginas y aplicaciones. Este tipo de campo se define utilizando el valor «search» en su atributo type.
Observa el ejemplo:
<input type="search" name="key">La diferencia principal entre un campo «text» y un campo de tipo «search» es la forma en que algunos navegadores aplica estilo a su apariencia.
En según que navegadores, los campos tipo «search» se muestran con bordes redondeados y también pueden mostrar una «Ⓧ», el cual despeja el campo de cualquier valor cuando se pulsa sobre él. Adicionalmente, en dispositivos con teclado dinámico, la tecla enter del teclado puede leer «search» o mostrar un icono de lupa.
Campo para teléfono
Aunque aún todavía puedes usar los campos de tipo «text» para permitir al usuario agregar su teléfono, debo hacerte saber que con HTML5 ahora puedes usar los campos de tipo «tel» de la siguiente forma:
<input type="tel" name="phone">Cuando se accede desde un dispositivo táctil con teclados dinámicos, muchos de ellos mostrarán un teclado numérico cuando se encuentren con type=»tel», lo que significa que este tipo es útil no sólo para ser utilizado para números de teléfono, sino también cuando sea útil un teclado numérico.
Si tu aplicación la quieres optimizar para teléfonos móviles y quieres una buena experiencia de usuario, usar el campo de tipo «tel» en tus formularios será un aliado para conseguirlo.
Al igual que el campo de tipo «text», los campos de tipo «tel» tampoco tienen una validación del lado del cliente. Esto es debido a que existen una diversidad de formatos de números de teléfonos.
Para validar este tipo de campos deberás buscar otra alternativa como por ejemplo hacerlo mediante JavaScript.
Otra solución para la validación de los campos de tipo «tel» podría ser utilizar el atributo «pattern» tal y como puedes ver en el ejemplo a continuación:
(<input name="tel1" type="tel" pattern="[0-9]{2}" placeholder="##" aria-label="2-digit area code" size="2" required/>) -
<input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2" required/> -
<input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3" required /Campo para URLs
También se puede crear un tipo especial de campo para introducir URLs utilizando el valor url para el atributo type:
<input type="url" name="url">Este tipo añade restricciones de validación en el campo siempre y cuando utilices el atributo «required».
En este caso, el navegador informará al usuario de un error si no ha introducido una url con formato correcto.
Es interesante saber que, en dispositivos con teclados dinámicos, a menudo se mostrará por defecto algunas o todas las teclas como los dos puntos, el punto, y la barra inclinada.
Campo de tipo numérico
Para tus formularios también puedes crear controles para introducir números con type=»number» para los campos.
<input type="number" name="note" min="1" max="10" step="2" required>Dando como resultado:
Este ejemplo podrías utilizarlo para que profesores pudiera calificar o poner nota a los exámenes que realizan sus alumnos ya que solo permite agregar números del 0 al 10. En este caso deben ser números enteros.
Este control se parece a un campo de texto pero solo permite números de punto flotante, y normalmente proporciona botones deslizadores para incrementar o reducir el valor del control si lo acompañas con el atributo «step».
En dispositivos con teclados dinámicos generalmente se muestra el teclado numérico.
Con el tipo de input number puedes limitar los valores mínimo y máximo permitidos definiendo los atributos min y max.
También puedes utilizar el atributo «step» para cambiar el incremento y decremento causado por los botones deslizadores.
Por defecto, el tipo de input «number» sólo valida si el número es un entero. Para permitir números decimales, especifica step=»any». Si se omite, su valor por defecto es 1, lo que significa que solo son válidos números enteros.
El atributo «step» que se puede utilizar con HTML5 es un número que especifica la granularidad a la que debe adherirse el valor o la palabra clave. Es válido para los tipos de entrada numérica, incluidos los campos de tipo de fecha, mes, semana, hora, fecha y hora local, número y rango.
El atributo «step» establece el intervalo de paso al hacer clic en los botones giratorios hacia arriba y hacia abajo que aparecen de forma automática.
Se puede mover un control deslizante hacia la izquierda y hacia la derecha en un rango y validar los diferentes tipos de fechas. Si no se incluye explícitamente, el «step» predeterminado es 1 para el número y rango, y 1 tipo de unidad (minuto, semana, mes, día) para los tipos de entrada de fecha / hora.
El valor debe ser un número positivo (entero o flotante) o el valor especial any, lo que significa que no se implica ningún «step» y se permite cualquier valor (salvo otras restricciones, como mínimo y máximo).
Para seleccionar un número decimal. Máximo 10
Para tus formularios también puedes utilizar el tipo de campo «number» con números decimales.
En el siguiente ejemplo vas a permitir a tus usuarios incrementar y decrementar el valor del campo con 0.1 cada vez.
<input type="number" value="0.1" min="0" step="0.1" max="10">Para seleccionar un rango de números
El campo de tipo «range» permite a los usuarios seleccionar un rango de números con un slider o control deslizante.
<input type="range" min="0" step="2" max="10">Para obtener como resultado:
Campo para una fecha
<input type="date" min="2021-12-25" step="1">Para conseguir un selector de fecha como el siguiente:
Campo para seleccionar un mes concreto
<input type="month" min="2021-12" step="12">Para obtener como resultado el selector de mes:
Camp para seleccionar una semana concreta
<input type="week" min="2021-W23" step="2">Para lograr un selector de semana como el siguiente:
Campo para seleccionar una hora
<input type="time" min="09:00" step="900">Para conseguir como resultado un selector de hora como el siguiente:
Campo para seleccionar un día y hora
<input type="datetime-local" min="019-12-25T19:30" step="7">Para obtener un selector de fecha y hora muy potente:
Conclusión
Es posible que los programadores jóvenes y modernos vean esto como algo muy simple y prestablecido pero el caso es que hace unos años estos tipos de campos y atributos no existían y se requería de plugins jQuery o códigos JavaScript muy extensos para conseguir una funcionalidad similar a esta.
En este mismo blog, desde el 2008 hasta el momento hemos hablado de varios plugins para incorporar datepikers que puedes observar a través del siguiente enlace: Datepickers
Para incrementar y decrementar el valor de un campo de texto también llegamos a usar algo como lo que se indica en Incrementar valor de un input con jQuery.
Desde mi punto de vista diría que ya no vale la pena utilizar estos plugins y código JavaScript para estas funciones si HTML 5 incorpora estos tipos de campos y atributos de serie que ya te sacan del apuro.
El último ejemplo de selección de fecha y hora lo veo super potente y mucho más usable que muchos plugins que haya llegado a utilizar en lo largo de mi carrera.
Entiendo que si se desea algo más sofisticado o personalizado ya si que se pueden usar plugins que permiten personalizarlo completamente o desarrollos a medida.
Mejorar la experiencia del usuario es otra buena razón para utilizar estos tipos de campos más recientes y modernos que te ayudaran enormemente a crear tu aplicación a un menor coste también.
Y no menos importante, me gustaría hacerte saber que la mayoría de las características mencionadas en este artículo tienen un amplio soporte en todos los navegadores.
¿Qué opinas al respecto?
Autor
¿Buscas trabajo de programador?
57 artículos que te podrían interesar
Ver más sobre
Deja una respuesta