Header Ads Widget

Ticker

6/recent/ticker-posts

¿Son sus campos de entrada HTML5 compatibles con todos los navegadores?

 Los formularios son parte integral de su negocio en línea. Al ser la principal fuente de recopilación de datos para sus visitantes, su aparición en Internet es más importante de lo que pueda imaginar. Sin embargo, tenga en cuenta que incluso si los diseña de forma ordenada y pegadiza, pueden terminar pareciendo absurdos cuando se accede a ellos a través de diferentes navegadores y versiones de navegador. En este artículo, demostraré la compatibilidad entre navegadores de los nuevos campos de formulario de entrada que se introdujeron con la introducción de HTML5. Diseñaré un formulario HTML simple con todos los campos de entrada y realizaré pruebas entre navegadores para ese formulario utilizando LambdaTest.

Breve introducción a los campos de entrada de formularios HTML5

Se utiliza un campo de entrada en HTML para dar la opción al usuario de ingresar la entrada deseada. Esta entrada puede ser cualquier cosa como su número de contacto, su dirección residencial, fecha de nacimiento, etc. Dado que las entradas son variables, surge la necesidad de mencionar y validar esto solo a nivel del cliente.

Supongamos que está completando un formulario de licencia de conducir y se le solicita que ingrese el número de teléfono móvil, pero ingresó por error su código PIN. También podemos pensar en un escenario en el que se requiera su fecha de nacimiento y la ingrese de la manera que desee. Dado que cada ser humano piensa de manera diferente, algunos escribirían 08.04.1995 y otros escribirían 08-April-1995. Hay literalmente muchas formas de ingresar su fecha de nacimiento y, aunque todas son correctas y comprensibles para los humanos, este no es el caso de las computadoras. En las computadoras, necesitamos alimentar la lógica en el back-end para guardar su información correctamente en la base de datos. Si obtenemos tantos tipos diferentes de entradas para una sola columna en la base de datos, necesitamos alimentar la lógica para todas. Claramente, esto no es factible.

Incluso si decimos que es factible y podemos poner la lógica, no hay forma de que podamos derivar todas las formas en que mil millones de humanos ingresarían la fecha de nacimiento. Este es un gran problema y existía antes de HTML5.

Sin embargo, con la introducción de HTML5 aparecieron nuevos tipos en el campo de entrada para facilitar más que nunca el trabajo del usuario y del desarrollador. Ahora, no necesita ingresar la fecha de nacimiento, sino que puede abrir el calendario en el cuadro de entrada y luego seleccionar la fecha. Esto llenará automáticamente el cuadro con el formato predefinido. Aunque se han introducido muchos tipos en HTML5, no todos son "tan importantes" como podría parecer. En este artículo, exploraremos cada uno de ellos y veremos si son importantes al codificar su página web o no. Por eso, hemos dividido este artículo en dos partes principales, a saber, tipos de entrada relevantes y tipos de entrada irrelevantes .

Antes de seguir adelante y profundizar en este artículo, puede consultar la muestra completa del formulario HTML5 en uno de nuestros Experimentos LambdaTest donde puede presenciar la representación del mismo formulario en diferentes navegadores realizando pruebas de compatibilidad del navegador . He utilizado las pruebas de captura de pantalla automatizadas que ofrece LambdaTest para capturar rápidamente la apariencia de mi formulario en varios navegadores, simultáneamente, en una sola sesión de prueba.

Hablaré más sobre todo en detalle, a medida que lea más. ¡Aquí vamos!

Tipos de entrada relevantes

En esta sección, exploraremos los tipos de entrada introducidos en HTML5 que son relevantes para usar y han desaparecido las dificultades que enfrentamos en las versiones anteriores.

Campo de entrada HTML5: búsqueda

La búsqueda es la operación más común que utilizan las personas en Internet en la actualidad. Según las estadísticas , buscamos 40.000 consultas en Google por segundo y ese no es un número pequeño. Nos ha hecho habituales el uso de esta operación en sitios web, comercio electrónico, blogs, etc. Sin mencionar el tiempo que ahorra. Por lo tanto, el propósito de la búsqueda se facilitó como los nuevos campos de entrada del formulario HTML5, que se pueden usar como:

1
<input type="search" name="xyz">

Antes de esta opción, la búsqueda se realizaba en un campo de texto normal. Aunque no afecta nada en el back-end de la operación de búsqueda, la facilita al usuario y proporciona pocos efectos estilísticos. Cuando tenemos el campo de entrada del formulario HTML5 definido como búsqueda y comienza a escribir algo, se puede ver una pequeña x al final del cuadro. Esto es para borrar la frase de búsqueda completa.

Es reconocido por todos los navegadores en dispositivos móviles y de escritorio, lo que le da un punto positivo en las pruebas de compatibilidad de navegadores y se usa hoy con mucha frecuencia. En el móvil, obtenemos soporte adicional además del signo claro. En los móviles de Apple, cuando seleccionas el cuadro de búsqueda, se puede ver un botón de búsqueda adicional en lugar del botón Ir normal. Esta función no está disponible en otros navegadores en móviles como Google Chrome o Internet de Samsung, pero aún así se ve bien visualmente. Aunque, no tiene ningún efecto en el lado positivo o negativo. Debe usar el botón de búsqueda para estos pequeños cambios de estilo que son realmente útiles para los usuarios. Le ahorra mucho código JavaScript que ha codificado para el mismo estilo.

Campo de entrada HTML5: correo electrónico

El campo de correo electrónico es también uno de esos campos que estaba creando algunos pequeños problemas para los desarrolladores antes de HTML5. Antes de HTML5, el campo de correo electrónico solo se usaba como texto sin formato. Entonces, incluso si no ingresa una dirección de correo electrónico real y válida, funcionará. Ahora, algunos sitios web realmente dependen de la dirección de correo electrónico como la principal fuente de contacto y, a veces, la única fuente de contacto. La recopilación de direcciones de correo electrónico para futuros anuncios y lanzamientos también es un futuro común. Esto necesitó algunas líneas de código JS para validar el campo de correo electrónico como para ver si hay un "." o no, un "@" o no y no hay espacio entre ellos. Con la introducción del tipo de correo electrónico en el campo de entrada en HTML5, estas cosas se solucionan sin ningún código adicional. Ahora también puede recibir un mensaje de error si la dirección de correo electrónico no es válida. El tipo de correo electrónico es el siguiente en la entrada

1
<input  type="email" required>

Buzón de correo electrónico en Google Chrome 72

Hay algo importante a tener en cuenta al utilizar este tipo de correo electrónico. Debe conocer su base de usuarios o debe aceptar la dirección solo en sílabas en inglés. Si recibe correos electrónicos en todo el mundo, prepárese para recibir direcciones de correo electrónico con dos sílabas diferentes en dos idiomas diferentes. Por ejemplo, la dirección de correo electrónico harish @ 日本 .jp no es válida en Firefox, Chrome y Safari. Entonces, para esto, puede usar el código JS o también puede usar el atributo de patrón de la siguiente manera

1
<input type="email" pattern= "[^ @]*@[^ @]*">

También hay una cosa importante a tener en cuenta en los móviles cuando ingresa la dirección de correo electrónico. En el teclado, verá automáticamente una '@' y '.com' para facilitar la entrada. No obtendría esto mientras usa el campo de texto.

Campo de entrada HTML5 - Número

Como ya debe haber adivinado con el nombre, el tipo de número se usa para ingresar un número en el cuadro de entrada. Aunque, un campo de texto haría un trabajo similar, pero el tipo de número asegura que el usuario haya ingresado el número solo en lugar de cualquier otra cosa. Además, para el tipo de número, también puede decidir el valor mínimo y máximo del número de entrada como se muestra en el código a continuación.

1
<input type="number" min="3" max="30">

Para el código anterior, el usuario solo puede ingresar un número entre 3 y 30 (inclusive). Esto le ayudará a escribir código adicional para verificar si el número se ingresó correctamente o no. También se introduce una nueva propiedad como paso junto con el campo numérico. El paso le dice los valores legales que se pueden contener dentro del cuadro de entrada. Por ejemplo, digamos que desea tener solo aquellos números que son divisibles por 4 como entradas. Entonces podrías escribirlo como:

1
<input type="number" min="4" max="40" step="4">

Dado que el paso es igual a 4, los valores legales se convierten en 4, 8, 12, 16… ..40. Hablando sobre el efecto del tipo de número en el campo de entrada, el navegador agrega sus propias propiedades útiles para la facilidad del usuario. Los navegadores de escritorio Chrome, Safari e IE agregan flechas hacia arriba y hacia abajo para aumentar y disminuir el número.

En los navegadores móviles, su teclado cambia automáticamente a uno numérico una vez que toca el campo de entrada. Eso también es muy conveniente. Sin embargo, si planea brindar una experiencia perfecta de personalización en este campo, asegúrese de realizar pruebas exhaustivas en todos los navegadores.

Campo de entrada HTML5: rango

El tipo de rango es similar al tipo de número en algunos aspectos, pero es más específico. Dado que en el tipo de número el usuario tiene que ingresar un número en particular, en el tipo de rango el usuario tiene una barra deslizante para ingresar su elección. Aunque la barra no muestra los números escritos, ese es su propósito, proporcionar un rango. El valor exacto aquí no es importante, sino solo su aproximación de la respuesta. Similar a cuando un restaurante te pregunta qué tan satisfecho estás en esta escala. El tipo de rango se puede codificar en HTML como:

1
<input type="range" min="1" max="10">

Barra de rango como en Google Chrome versión 72

Barra de rango como en Internet Explorer 11

¿Notó la diferencia en la compatibilidad entre navegadores? Ahora que lo hace, sería una buena práctica incluir esto en su lista de verificación de prueba para que no se pierda las pruebas en varios navegadores para verificar su diseño web si está utilizando Range como uno de los campos de entrada de HTML5.

También puede optar por optar por el atributo de paso en este caso. Es aceptado e implementado por todos los navegadores excepto IE versión 9 y anteriores.

Campo de entrada HTML5: teléfono

El tipo de entrada de teléfono o tel se utiliza para ingresar el número de teléfono. Dado que hay tantos formatos diferentes de teléfono, HTML no puede proporcionar una regla de validación básica y estricta en este campo. El tipo de entrada de teléfono se puede codificar en HTML como

1
<input type="tel" required>

Debe estar preguntándose acerca de cuál es el uso del teléfono entonces de todos modos. ¿Por qué no usaron el campo numérico? Bueno, para empezar, el teléfono no puede tener esas flechas hacia arriba y hacia abajo para aumentar y disminuir porque tiene un número de teléfono fijo. Además, cada vez que toque este tipo de entrada, se le pedirá que complete automáticamente (si ha habilitado esa función en su navegador) y de esa manera puede ahorrar tiempo. También obtendrá dinámicamente el teclado numérico cuando haga clic en el cuadro de entrada para ingresar el número con facilidad.

Campo de entrada HTML5: URL

El tipo de entrada de URL se utiliza en el cuadro de entrada para introducir alguna URL como en direcciones web. El campo URL es importante en la codificación HTML, ya que ayuda a validar la dirección web para que no se requiera ningún código adicional para la misma. También se genera un mensaje de error si la entrada no es válida. Un tipo de URL se puede codificar como:

1
<input type= "url">

Se ve similar al campo de teléfono o de texto como un cuadro de entrada simple.

La URL del tipo de entrada también ayuda en los efectos móviles cuando está utilizando el navegador en el móvil. Normalmente, empresas como Apple intentan brindar comodidad a sus usuarios creando efectos. Esto puede incluir efectos de navegador y cambio automático de teclado al que contiene '.com' u otra cosa. El campo URL es una excelente introducción al mundo del diseño web.

Campo de entrada HTML5: fecha

El tipo de entrada de fecha es uno de los tipos de entrada más necesarios en el diseño web. Ha resuelto el mismo problema del que hablamos en la introducción acerca de ingresar las fechas de nacimiento en el formato propio. Con la introducción del tipo de fecha, ahora puede completar la fecha en el formato preseleccionado con la ayuda de otras funciones. El tipo de entrada de fecha se codifica de la siguiente manera

1
<input type="date">

El tipo de fecha ha introducido el calendario también para seleccionar la fecha con la facilidad de la conveniencia. Ahora, cuando toca el cuadro de fecha, aparece un calendario en el que puede seleccionar la fecha deseada y se completará automáticamente en el cuadro de entrada. Esto se muestra a continuación.

Esto ha ayudado no solo a completar las fechas de nacimiento, sino también a seleccionar fechas para otros fines como vuelos, trenes, etc. Utilizando los atributos mínimo y máximo, puede enumerar la fecha mínima y máxima válida respectivamente.

1
<input type="date"  min="2019-01-01"   max="2019-06-01">

Mire cómo Google Chrome muestra el tipo de entrada de fecha en comparación con Internet Explorer.

Campos de entrada HTML5

explorador de Internet

Esto eliminará el dolor de cabeza de validar la fecha a través del código JS. Esta característica es muy importante cuando tiene que presentar una solicitud y los criterios de elegibilidad ya están establecidos para la edad. También se puede usar un selector de fecha personalizado para mejorar la apariencia visual de su formulario, pero debe variar según las diferencias del navegador. Hemos escrito un blog detallado sobre cómo solucionar problemas de compatibilidad entre navegadores con tipos de entrada HTML5, donde hemos corregido la función de fecha con la biblioteca jquery. Puede realizar pruebas en varios navegadores en LambdaTest para darse cuenta de qué tan bien se muestra la 'fecha' como un campo de entrada HTML5 en su sitio web en más de 2000 navegadores y versiones de navegador.

Campo de entrada HTML5 - Mes

El tipo de entrada de mes es para la entrada como mes. En el tipo de fecha, la entrada es la fecha completa junto con el mes y el año. Sin embargo, tenga en cuenta que el tipo de entrada de mes solo aceptará valores para el mes y el año como entrada. Puede codificar el tipo de entrada del mes de la siguiente manera

1
<input type="month">

Esto es particularmente útil cuando la entrada deseada es solo el mes y el año como en los detalles de vencimiento de la tarjeta de débito. Todos los navegadores lo implementan de manera diferente, pero todos seguramente lo hacen. Aunque este no es un tipo de entrada importante y esencial para ser utilizado. Esto es algo que se puede perder fácilmente en cuanto a la fecha de entrada y la caducidad, un simple panel de desplazamiento o un cuadro de texto también es suficiente. Dado que el valor de entrada es demasiado bajo (a diferencia de un tipo de entrada de número y teléfono), el tipo de entrada de texto también es confiable en tales casos.

Campo de entrada HTML5: hora

El tipo de entrada de hora tiene el soporte más amplio entre los tipos de entrada de fecha y hora. La hora se utiliza para ingresar la hora en formato de 12 o 24 horas, según sea necesario. Esto es necesario en muchos casos ya que muchas veces le pedimos al usuario el tiempo al rellenar los formularios. Puede codificarse como

1
<input type="time">

Google Chrome 72

Internet Explorer 11

El soporte del navegador es excelente para el tipo de entrada de tiempo, excepto para el navegador Safari, que aún no lo ha implementado. Cuando un navegador ve algo para lo que no tiene implementación, lo reduce al tipo de entrada de texto. La implementación de los navegadores difiere según los navegadores. El navegador Edge implementa el tipo de entrada de tiempo de la siguiente manera

También puede usar otros atributos junto con este tipo de entrada, como min (tiempo mínimo para aceptar), max (última vez para aceptar), solo lectura (solo tiempo de lectura) y paso. No puede implementar el atributo de tamaño con el tipo de entrada de tiempo porque no es necesario. Quiero decir, ¿por qué necesitarías cambiar el tamaño de la entrada de tiempo? Incluso si lo desea, debe confiar en CSS para esto y codificar su camino a través de él.

Campo de entrada HTML5: fecha y hora

El tipo de entrada de fecha y hora se utiliza para ingresar una hora en particular en una fecha en particular junto con el mes y el año. Esta es una característica útil, pero se ha incluido en esta lista debido a su menor popularidad. La fecha y hora solo se implementa en los navegadores Chrome, Opera y Edge, dejando a todos los demás navegadores fuera del grupo. Todos estos navegadores lo deducen para ingresar texto. Está codificado como

1
<input type="datetime">
Campos de entrada HTML5

DateTime en Chrome 72

Se pregunta, ¿cuál es la diferencia en la compatibilidad entre navegadores?

Bueno, si te fijas con más atención, encontrarás que en Chrome 72 tiene las esquinas redondeadas.

Tipos de entrada irrelevantes

Por tipos de entrada irrelevantes, me refiero a aquellos tipos de entrada que se introdujeron con HTML5 pero que los navegadores no utilizan por completo o no son necesarios. Aunque puede utilizar todos los tipos de datos siguientes como desee, esto puede resultar perjudicial para la base de usuarios de su sitio web.

Campo de entrada HTML5: color

El color del tipo de entrada se utiliza para introducir el color como entrada. Esto se puede codificar en HTML como

1
<input type="color">

Para aquellos navegadores que implementan este tipo, usan el selector de color para el mismo. Entonces, cuando toca la pestaña de entrada de color, aparece un selector de color o una paleta de color y puede elegir cualquier color con el mouse y el valor hexadecimal del mismo se ingresará en el cuadro de entrada. Este selector de color depende totalmente de los desarrolladores del navegador. Pueden implementarlo como quieran. Entonces, un selector de color cromado se verá así

Campos de entrada HTML5

Internet Explorer 11

Esto se utiliza cuando necesita obtener una entrada como color del usuario. Parece importante, pero surge un problema con este tipo de entrada. Como ya sabemos que siempre que un tipo de entrada no es compatible con el navegador, el tipo de entrada de texto es el predeterminado. Ahora el tipo de entrada de color realmente toma la entrada como el valor hexadecimal del color. Esto significa que si un navegador no admite el tipo de entrada de color, el usuario debe ingresar la entrada en formato hexadecimal. Esto nunca se recomienda y siempre es doloroso ver un campo así. Así es como verá la entrada de color en el navegador Safari 10.1
El color es un buen tipo de entrada, pero aún no es significativo debido a la mala implementación. Es muy bueno si se implementa en el navegador, pero si no, no hay forma de ingresar el color en formato hexadecimal, que es realmente algo de lo que preocuparse.

Campo de entrada HTML5 - Semana

La semana es otro tipo de entrada que no fue en absoluto necesario implementar. El tipo de entrada de semana es el refinamiento del tipo de entrada de mes y se utiliza para ingresar la semana completa como entrada. No pude encontrar ningún caso particular donde se pueda usar el tipo de entrada de semana. El tipo de entrada de semana se puede codificar de la siguiente manera

1
<input type="week">

Este tipo de entrada se ve así en el navegador.

Campos de entrada HTML5
Campos de entrada HTML5

¡Vamos a juntarlos juntos!

Ahora que hemos visto los tipos de entrada de forma individual y hemos aprendido en detalle sobre ellos, no estará de más combinar todos estos tipos de datos y construir un formulario único, un formulario de solicitud, y ver cómo los principales navegadores verán este formulario. realizando pruebas en varios navegadores en LambdaTest.

El código que hemos utilizado para implementar el formulario es:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
<title>lambdatest</title>
<style>
input {
  width: 30%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
 border: 2px solid black;
  border-radius: 4px;
align: center;
}
 
input:focus {
  background-color: lightblue;
}
 
</style>
<body style="background-color:silver">
<br><br>
<center>
<h1>Input Types In HTML5</h1>
<div>
<form>
Search :  <input type="search" name="xyz">
<br><br>
Email : <input  type="email" required>
<br><br>
Number : <input type="number" min="3" max="30">
<br><br>
Range : <input type="range" min="0" max="100" step="5">
<br><br>
Telephone : <input type="tel" required>
<br><br>
URL : <input type= "url">
<br><br>
Date : <input type="date">
<br><br>
Month : <input type="month">
<br><br>
Time : <input type="time">
<br><br>
DateTime : <input type="datetime">
<br><br>
Color : <input type="color">
<br><br>
Week : <input type="week">
<br><br>
 
<button> Submit </button>
</center>
</form>
</div>
</body>
</html>

¿Qué es LambdaTest?

LambdaTest es una herramienta de prueba escalable, basada en la nube y de varios navegadores que le ayuda a garantizar que su sitio web se visualice sin problemas en varios navegadores. LambdaTest ofrece una biblioteca de navegadores de más de 2000 navegadores reales y versiones de navegador que se ejecutan en numerosos sistemas operativos, desde Windows hasta Mac en el escritorio y desde iOS hasta Android para dispositivos móviles.

He utilizado la función para pruebas de captura de pantalla automatizadas que ofrece LambdaTest para capturar capturas de pantalla de forma masiva en diferentes configuraciones de navegador y sistema operativo. Si ya es un usuario de LambdaTest, aquí hay 10 funciones que debe probar de las pruebas de captura de pantalla automatizadas en LambdaTest . Ahora, echemos un vistazo a nuestro resultado de las pruebas de compatibilidad del navegador realizadas para nuestro formulario HTML5 para evaluar la diferencia en la representación en varios tipos de entrada.

Campos de entrada HTML5 en Google Chrome 72

Campos de entrada HTML5

Campos de entrada HTML5 en Internet Explorer 11

Campos de entrada HTML5

Campos de entrada HTML5 en Mozilla Firefox 64

Campos de entrada HTML5

Campos de entrada HTML5 en Opera 56

Campos de entrada HTML5

Campos de entrada HTML5 en Safari 12

Campos de entrada HTML5

¡Resumiendo lo que aprendimos!

HTML5 trajo consigo 13 nuevos tipos de entrada para resolver algunos de los problemas que los desarrolladores enfrentaron durante mucho tiempo. Con estos tipos de entrada se resolvieron problemas pequeños pero significativos, como introducir una fecha o un correo electrónico en el cuadro de entrada. Con esto, los desarrolladores del navegador agregaron su propia función que podría captar este tipo de entrada y proporcionar algunas cosas adicionales para complacer al usuario y facilitar las cosas. Como mencioné en el artículo, los 13 tipos de entrada no eran relevantes y algunos de ellos aún tienen que probar su existencia como el color, mientras que algunos realmente no son necesarios como la semana. Pero como todo se desarrolla teniendo en cuenta el futuro, nunca lo podemos decir. Tal vez hoy no sea necesario, pero esperemos un tiempo en el futuro, tal vez terminemos utilizándolos con más frecuencia de lo que imaginamos.

Una cosa clave para recordar acerca de estos campos son las diferencias de navegador que se producen al representar el formulario de entrada en diferentes navegadores. Es fundamental realizar una ronda de pruebas en varios navegadores para ofrecer a sus clientes una experiencia de usuario perfecta en píxeles. Si ya sufre problemas de compatibilidad entre navegadores en los tipos de entrada HTML5 , aquí hay un artículo que le ayudará a rectificarlos para los tipos de entrada de campo, como fecha / hora, color, rango y número. ¡Salud!

Publicar un comentario

0 Comentarios