Share
Si bien hay muchos cambios para mejorar la especificación de HTML5, no hay mejor inversión para el sitio web basado en datos que la transformación de formularios. Estos simples cambios transformarán la forma en que ingresa, valida, procesa e incluso muestra las entradas. Podrá crear más aplicaciones web utilizables con menos código y menos confusión.
"En el pasado reciente, la mayoría de las innovaciones en las formas provienen del uso de JavaScript, en lugar del HTML antiguo. Si bien no hay nada de malo en usar JavaScript para mejorar las formas, sí trae su propia facilidad de uso junto con muchos problemas de desarrollo. "
HTML 5 todavía está experimentando cambios antes de que se finalice. Si observa la especificación, verá que todavía hay una última llamada para comentarios junto con declaraciones, como, Los implementadores deben ser conscientes de que esta especificación no es estable. Además, particularmente para los propósitos de este tutorial, centrándose en los cambios en los formularios, la implementación del navegador es irregular por decir lo menos. Dicho esto, los cambios en el horizonte vale la pena examinarlos hoy. Si bien los cambios son importantes en su alcance, la implementación para los desarrolladores parece ser bastante fácil. En este tutorial, haremos una descripción general de estos cambios innovadores y pensaremos cómo afectarán la naturaleza de las opiniones de los usuarios..
En el pasado, los cambios en las formas han sido relativamente menores. Si regresa a la especificación HTML 3.2, que se finalizó en 1997, verá las mismas entradas de formulario básicas que utiliza hoy. Seleccionar, área de texto, radio, casillas de verificación y texto estaban disponibles en ese momento. Una generación de desarrolladores web ha crecido escribiendo a estos mismos estándares. Si bien las versiones posteriores de la especificación introdujeron cambios en los formularios, como el campo de juego, la etiqueta, la leyenda y las acciones de formulario, como onsubmit o onchange, la forma en que manejamos las aportaciones de los usuarios se ha mantenido algo estática. En el pasado reciente, la mayoría de las innovaciones en las formas provienen del uso de JavaScript, en lugar del HTML antiguo. Si bien no hay nada de malo en usar JavaScript para mejorar las formas, sí trae su propia facilidad de uso junto con muchos dolores de cabeza en el desarrollo. Por ejemplo, hay muchas maneras diferentes en que podemos validar formularios usando JavaScript, pero ¿qué sucede cuando un usuario no tiene JavaScript habilitado? Además, tenemos que aplicar la lógica a nuestros scripts del lado del servidor. Al final, tenemos una forma no tan consistente de manejar las opiniones de los usuarios. HTML 5 no aborda todos los problemas de innovación en los formularios en los últimos 13 años, pero nos brinda muchas herramientas para
Facilitamos mucho nuestro trabajo y nos permite producir formularios mucho más consistentes..
Hay tres cambios básicos que debemos examinar. Primero, veremos los cambios en los elementos de entrada, como autocompletar o autofocus. El segundo es cambios en los estados de entrada, ¡y hay unos cuantos! Finalmente, examinaremos los nuevos elementos de formulario. Es importante reiterar que la especificación está en proceso de cambio; por lo que no me sorprendería si, en el futuro, hay cambios sutiles en lo que estamos discutiendo. Eso es lo que hace que esto sea divertido.!
Los atributos de entrada son aquellos elementos que se colocan en las entradas para explicar qué está haciendo la entrada. Por ejemplo:
En el ejemplo anterior, los atributos de entrada son valor, tamaño y longitud máxima. Estos han estado alrededor por bastante tiempo. HTML 5 no cambia el concepto de tener elementos de entrada, sino que agrega algunos más. Parece que hay al menos una resta, o más bien una sustitución, y ese es el cambio de deshabilitado que ahora parece ser de solo lectura. La especificación no entra en detalles para el cambio, pero si yo fuera un apostador, el cambio permitiría que los manejadores de eventos, como onblur, se activen, lo que un elemento desactivado impide.
Los nuevos atributos incluyen autofocus, autocompletar, lista, requerido, múltiple, patrón, mínimo y máximo, paso y marcador de posición. Pienso en estos como dos sabores diferentes de elementos. El primer sabor mejora la experiencia para el usuario, mientras que el segundo mejora la experiencia de desarrollo. Lo que quiero decir con esto es autofocus, autocompletar, lista, múltiples y marcadores de posición ayudan a la experiencia del usuario en la selección de elementos, o quizás brindando una descripción de lo que busca el formulario, o ayudando a completar el formulario. requerido, mínimo y máximo, patrón y paso se agregan a la experiencia de desarrollo al decir lo que debería estar en el formulario en sí.
Lo que cada uno de estos nuevos atributos hace es relativamente fácil de entender. Por ejemplo:
Arriba, el elemento de enfoque automático enfoca la entrada de texto en la carga de la página. Esto significa que tan pronto como se carga la página, esta entrada de texto está lista para tomar una entrada. Puede comenzar a escribir de inmediato, ya que este elemento tiene el enfoque del documento. Algo que solíamos hacer en JavaScript en una línea o algo así, ahora se puede hacer con una sola palabra.
En el ejemplo anterior, al desactivar el autocompletado, evita que el navegador complete el campo del formulario desde un valor anterior. Nada me molesta más que ver que mi número de tarjeta de crédito aparece en forma tan pronto como escribo un dígito. El valor predeterminado para autocompletar es estar activado, por lo que la única vez que necesita usar este elemento es cuando desea evitar que el campo de formulario se complete de las entradas anteriores. Se agrega a la experiencia del usuario al mantener la información confidencial simplemente de "aparecer".
El atributo de la lista es muy bueno. Esencialmente, usted proporciona un datalista y creará un menú desplegable a partir de su entrada de texto. Piense en ello como un auto natural completo. Vaya un poco más lejos, y en lugar de tener que agregar una biblioteca de JavaScript para una búsqueda rápida, en función de las entradas clave, fácilmente podría agregar un controlador de eventos "onchange", con una publicación de AJAX, y terminará con una caída hacia abajo que se vuelve más específico a medida que el usuario escribe en el cuadro. Con HTML 5, esta funcionalidad se creará con solo unas pocas líneas..
El atributo múltiple le permite seleccionar varios elementos de su datalist. Por ejemplo, podría tener un formulario que envíe mensajes desde su sitio web. Al utilizar el elemento múltiple, puede permitir que el usuario seleccione varios destinatarios para enviar ese mensaje. Nuevamente, esto es algo que podemos lograr con un poco de JavaScript ahora, pero con HTML 5, solo tenemos que agregar un solo comando al formulario.
El atributo de marcador de posición es algo que hemos estado haciendo durante años con un toque de JavaScript. Lo que esto hace es que, tan pronto como se enfoca la entrada, Type Here desaparecerá. Si no hubo ningún cambio en el texto en desenfoque, reaparecerá Type Here. Una vez más, estamos eliminando algunos JavaScript de la imagen para mejorar la experiencia del usuario.
Estos próximos nuevos atributos mejoran nuestro desarrollo. Con la excepción de "paso", cada uno ayuda en la validación de la entrada del usuario.
El atributo requerido es exactamente como suena. Yo, el desarrollador de esta página web, le solicito que complete este formulario antes de hacer clic en enviar. Esta es la validación de formularios básica que utilizamos hoy con JavaScript. Lo que tomó una biblioteca antes de agregar una entrada requerida, ahora toma una sola palabra en el formulario.
De todos los nuevos atributos de formulario, este es el que más me entusiasma. Sr. Form, permítame presentarle a mi buen amigo, Regex. Eso es correcto, podemos validar entradas de formulario basadas en expresiones regulares. Si bien esta va a ser desconcertante al principio, a medida que aprendes expresiones regulares, las posibilidades de validación ahora se vuelven ilimitadas..
He agrupado los tres últimos en un solo ejemplo, ya que todos tratan con la validación de números, o el rango de números que podemos incluir.
Cada uno de estos está tratando con valores numéricos. No los confunda con maxlength, que trata del número de caracteres que tomará una entrada. El elemento de paso es tal como suena. A medida que selecciona un valor numérico, auméntelo por .5 o hacia abajo por .5, lo que significa que este tipo de entrada tendrá los valores posibles de 1, 1.5, 2, 2.5, etc..
A partir de ahora, por lo que sé, el soporte del navegador es algo irregular en estos atributos. Aquí hay una tabla rápida que muestra lo que pude encontrar en las implementaciones.
Hay ocho nuevos tipos de entrada, sin contar todos los nuevos tipos de fecha y hora, que para nuestros propósitos, estoy agrupando en uno. Es importante tener en cuenta que los navegadores que no han implementado los nuevos tipos de entrada se degradarán a un tipo de texto en cada uno de los que he probado. Lo que aportan los nuevos tipos de entrada es la capacidad de validar la entrada del usuario según el tipo que está utilizando. También hay más validaciones por venir, las cuales discutiré en las siguientes dos secciones. Cada uno de los nuevos tipos de entrada nos permite separar de un campo de texto a algo más específico. Por ejemplo, para tomar valores enteros o flotantes antes de HTML 5, usamos principalmente un tipo de entrada de texto. Solo a partir de la anotación, es contrario a la intuición para los principiantes. Al ser más específicos, tenemos un mejor control visual sobre nuestra interfaz, ya que cuanto más específico es el elemento en HTML, mayor control tiene desde el CSS y más fácil es definir esos elementos visuales. Además, con los nuevos tipos de entrada específicos, los navegadores ahora pueden ajustar el rango de entrada. Finalmente, con el advenimiento de la computación móvil, podemos hacer elementos de formularios de aplicaciones web que pueden diseñarse para parecerse a aplicaciones naturales, o pueden dar forma al teclado que estamos usando..
Veamos primero el manejo de números:
Cada uno de estos tipos de entrada nos permite jugar con números, y cuando publicamos los formularios, debemos asegurarnos de que tenemos esos valores flotantes para nuestro procesamiento del lado del servidor sin la validación de JavaScript adicional. En pocas palabras, para cada uno de estos tipos, esperamos recuperar los números dentro del rango que definimos y con el paso que deseamos. La diferencia entre los dos tipos es cómo se muestran. Mientras espero ver la implementación en el tipo de número, esperaría un rollo, un cuadro de texto o, posiblemente, un tipo de selección con números. El tipo de rango es un poco diferente, ya que parece un valor deslizante, similar a lo que se esperaría ver para un control de volumen.
Otro gran alivio para estandarizar el desarrollo de su backend son los nuevos tipos de entrada de fecha y hora. Desde la implementación de Opera que he visto, cada una muestra un calendario desplegable, que le permite a su usuario seleccionar una fecha. Nuevamente, podemos validar en nuestra página web que la entrada está en el formato que estamos esperando. Cada uno hace exactamente lo que usted pensaría; está seleccionando un mes, semana, día u hora. El que es un poco diferente es el datetime-local, que muestra la fecha y la hora sin su desplazamiento de zona horaria. Por ejemplo, si selecciona un vuelo, datetime-local mostrará la hora y la fecha en la ciudad a la que se dirige, que no es necesariamente la zona horaria en la que se encuentra actualmente..
Cada uno de estos tipos de entrada son descriptivos. Los tipos de URL y correo electrónico tienen las validaciones de patrones de URL válidos y patrones de correo electrónico válidos. Sin embargo, el teléfono no se ajusta a ningún patrón específico. Sólo tira los saltos de línea. Si desea aplicar un patrón de validación en el campo de teléfono, siempre puede usar el elemento patrón. Cada uno de estos elementos menos el color también tomará el atributo de la lista, menos el color. El color es el bicho raro del grupo; Puedo ver su uso práctico, donde puede seleccionar un color de un menú desplegable de lujo que muestra colores y aplicar la entrada de texto de algo como # 000000, pero en realidad no se ajusta al resto de los cambios, en mi opinión. Es como jugar lo que uno no es como los otros..
Al igual que los atributos, la implementación del navegador de tipo de entrada es bastante irregular. Mi iPhone parece admitir más de estos que Safari, lo cual es un poco divertido para mí. Esto es lo mejor que pude encontrar, como apoyo.
El número de cambios en los elementos del formulario no es tan drástico como los atributos y tipos de entrada. Dicho esto, hay algunos elementos nuevos a tener en cuenta. Ya hemos cubierto el datalist (es cómo definimos lo que se seleccionará a partir de una llamada al elemento de la lista), pero no hemos visto keygen, salida, progreso o medidor. Fuera de keygen. Estos no son tan autoexplicativos como los nuevos atributos. Vamos a profundizar en esto un poco.
Este es un poco confuso. No genera una clave pública para ti. En su lugar, es un control generador de par de claves. Una vez que se envía el formulario, empaqueta el par de claves para almacenar la clave privada en el almacén de claves local y envía la clave pública al servidor. Generará el certificado del cliente y lo ofrecerá al usuario para que lo descargue. Una vez descargado y almacenado con la clave privada, puede autenticar servicios, como SSL o autenticación de certificado.
+ =
Piense en el elemento de salida como un área de texto en los esteroides. Lo que puede hacer es calcular a partir de dos entradas de texto de tipo numérico y generar ese cálculo sin tener que enviar el formulario al servidor. Si acaba de devolver una respuesta falsa, en el ejemplo anterior, calculará el número_1 más el número_2 y le proporcionará la respuesta. Como muchas de las cosas que se analizan en este tutorial, esto es algo que podemos lograr hoy con JavaScript, pero esto realmente disminuye la cantidad de código que debemos escribir en el futuro..
12cm
Los dos últimos elementos nuevos son el progreso y el metro. Son similares, pero con una diferencia. El progreso está destinado a ser usado para medir el progreso de una tarea específica. Por ejemplo, si tiene cinco páginas más para completar antes de que se realice una encuesta, mostraría el elemento de progreso en esa área. El medidor, por otro lado, es una medida de algo. Es posible que desee mostrar el espacio de disco restante que un usuario ha dejado. Usaría el medidor para mostrar esa medida. Hay nuevos elementos de contorno, como bajo, alto y óptimo. Estos sustituyen a los elementos mínimo o máximo; así que si los exceden, se convierten en los nuevos límites inferior y superior de la forma..
Al igual que el resto de los cambios de formato HTML 5, la implementación del navegador es deficiente en este momento. Aquí está lo que parece funcionar y lo que no funciona (en el momento de escribir este artículo).
Por lo que puedo ver, no hay razón para no comenzar a utilizar los formularios HTML 5. Todos los elementos y tipos de entrada se degradan bien, incluso en IE6, donde se ignoran como elementos o se degradan a entradas de texto. Tendremos que esperar un tiempo para que los atributos de validación se conviertan en una realidad, pero dicho esto, todavía hay algunos usos hoy sin esas ventajas. Por ejemplo, el iPhone modifica el teclado si está utilizando los tipos de url, correo electrónico o números. El tipo de entrada de rango ya es compatible con los navegadores WebKit, por lo que podría ser el primer niño en el bloque con un control deslizante de número que funciona sin JavaScript. La especificación se está finalizando rápidamente, y los navegadores están alcanzando bastante rápidamente los cambios de paradigma. ¡No hay tiempo como el presente para al menos comenzar a jugar con estos nuevos juguetes! Qué piensas?
Accentsconagua