La Web 2.0 está completamente enfocada en el usuario. Y cuando el usuario es el centro de atención, todo está relacionado con interfaces, en cómo hacerlas más intuitivas, más naturales, más prácticas, y por supuesto más atractivas. Los formularios web son la interface más importante de todas, permiten a los usuarios insertar datos, tomar decisiones, comunicar información y cambiar el comportamiento de una aplicación.
Durante los últimos años, códigos personalizados y librerías fueron creados para procesar formularios en el ordenador del usuario. HTML5 vuelve a estas funciones estándar agregando nuevos atributos, elementos y una API completa. Ahora la capacidad de procesamiento de información insertada en formularios en tiempo real ha sido incorporada en los navegadores y completamente estandarizada.
- El elemento <form>
Los formularios en HTML no han cambiado mucho. La estructura sigue siendo la misma, pero HTML5 ha agregado nuevos elementos, tipos de campo y atributos para expandirlos tanto como sea necesario y proveer así las funciones actualmente implementadas en aplicaciones web.
Código 6-1. Estructura normal de un formulario.
<!DOCTYPE html> <html lang="es"> <head> <title>Formularios</title> </head> <body> <section> <form name="miformulario" id="miformulario" method="get"> <input type="text" name="nombre" id="nombre"> <input type="submit" value="Enviar"> </form> </section> </body> </html>
En el Código 6-1 creamos una plantilla básica para formularios. Como puede ver, la estructura del formulario y sus atributos siguen siendo igual que en especificaciones previas. Sin embargo, existen nuevos atributos para el elemento <form>:
- autocomplete :Este es un viejo atributo que se ha vuelto estándar en esta especificación. Puede tomar dos valores: on y off. El valor por defecto es on. Cuando es configurado como off los elementos <input> pertenecientes a ese formulario tendrán la función de autocompletar desactivada, sin mostrar entradas previas como posibles valores. Puede ser implementado en el elemento <form> o en cualquier elemento <input> independientemente.
- novalidate :Una de las características de formularios en HTML5 es la capacidad propia de validación. Los formularios son automáticamente validados. Para evitar este comportamiento, podemos usar el atributo novalidate. Para lograr lo mismo para elementos <input> específicos, existe otro atributo llamado formnovalidate. Ambos atributos son booleanos, ningún valor tiene que ser especificado (su presencia es suficiente para activar su función).
- El elemento <input>
El elemento más importante en un formulario es <input>. Este elemento puede cambiar sus características gracias al atributo type (tipo). Este atributo determina qué clase de entrada es esperada desde el usuario. Los tipos disponibles hasta el momento eran el multipropósitos text (para textos en general) y solo unos pocos más específicos como password o submit. HTML5 ha expandido las opciones incrementando de este modo las posibilidades para este elemento.
En HTML5 estos nuevos tipos no solo están especificando qué clase de entrada es esperada sino también diciéndole al navegador qué debe hacer con la información recibida. El navegador procesará los datos ingresados de acuerdo al valor del atributo type y validará la entrada o no.
El atributo type trabaja junto con otros atributos adicionales para ayudar al navegador a limitar y controlar en tiempo real lo ingresado por el usuario.
Hágalo usted mismo: Cree un nuevo archivo HTML con la plantilla del Código 6-1. Para comprobar cómo funciona cada tipo de campo estudiado de aquí en adelante, reemplace los elementos <input> en la plantilla por aquellos que quiere probar y abra nuevamente el archivo en su navegador. En este momento la forma en la que los tipos de campo son tratados varía, por este motivo le recomendamos probar el código en cada navegador disponible.
- Tipo email
Casi todo formulario en la web ofrece un campo para ingresar una dirección de email, pero hasta ahora el único tipo de campo disponible para esta clase de datos era text. El tipo text representa un texto general, no un dato específico, por lo que teníamos que controlar la entrada con código Javascript para estar seguros de que el texto ingresado correspondía a un email válido. Ahora el navegador se hace cargo de esto con el nuevo tipo email:
Código 6-2. El tipo email.
<input type="email" name="miemail" id="miemail">
El texto insertado en el campo generado por el Código 6-2 será controlado por el navegador y validado como un email. Si la validación falla, el formulario no será enviado. Cómo cada navegador responderá a una entrada inválida no está determinado en la especificación de HTML5. Por ejemplo, algunos navegadores mostrarán un borde rojo alrededor del elemento <input> que produjo el error y otros lo mostrarán en azul.
Existen formas de personalizar esta respuesta, pero las veremos más adelante.
- Tipo search
El tipo search (búsqueda) no controla la entrada, es solo una indicación para los navegadores. Al detectar este tipo de campo algunos navegadores cambiarán el diseño del elemento para ofrecer al usuario un indicio de su propósito.
Código 6-3. El tipo search.
<input type="search" name="busqueda" id="busqueda">
- Tipo url
Este tipo de campo trabaja exactamente igual que el tipo email pero es específico para direcciones web. Está destinado a recibir solo URLs absolutas y retornará un error si el valor es inválido.
Código 6-4. El tipo url.
<input type="url" name="miurl" id="miurl">
- Tipo tel
Este tipo de campo es para números telefónicos. A diferencia de los tipos email y url, el tipo tel no requiere ninguna sintaxis en particular. Es solo una indicación para el navegador en caso de que necesite hacer ajustes de acuerdo al dispositivo en el que la aplicación es ejecutada.
Código 6-5. El tipo tel.
<input type="tel" name="telefono" id="telefono">
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
very good. thank you...
ResponderEliminarHello hd Bilişim , thanks for the visit and the contribution of your comment!
EliminarBest wishes! Until any time !