 |
| @madesweb |
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.
 |
| @madesweb |
En la
imagen anterior 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).
A continuación definiremos cada tipo de dato que existe, para poder incorporarlos en un formularios según nos convenga.
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.
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.
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:
 |
| Tipo de dato: Email |
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.
 |
| Tipo de dato : Search |
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.
 |
| Tipo de dato: url |
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.
 |
| Tipo de dato: tel |
TIPO NUMBER
Como
su nombre lo indica, el tipo number es sólo
válido cuando recibe una entrada numérica. Existen algunos atributosnuevos que
pueden ser útiles para este campo: min El
valor de este atributo determina el mínimo valor aceptado para el campo.
max
El valor de este atributo determina el máximo valor aceptado para el
campo. step El valor de este atributo
determina el tamaño en el que el valor será incrementado o disminuido en cada
paso. Por ejemplo, si declara un valor de 5 para step en un campo que tiene un valor mínimo de
0 y máximo de 10, el navegador no le permitirá especificar valores entre 0 y 5
o entre 5 y 10.
 |
| Tipo de dato: number |
TIPO DATE
Este
es otro tipo de campo que genera una nueva clase de control. En este caso fue
incluido para ofrecer una mejor forma de ingresar una fecha. Algunos
navegadores muestran en pantalla un calendario que aparece cada vez que el
usuario hace clic sobre el campo.
El calendario le permite al usuario
seleccionar un día que será ingresado en el campo junto con el resto de la
fecha. Un ejemplo de uso es cuando necesitamos proporcionar un método para
seleccionar una fecha para un vuelo o la entrada a un espectáculo. Gracias al
tipo date ahora
es el navegador el que se encarga de construir un almanaque o las herramientas
necesarias para facilitar el ingreso de este tipo de datos.
TIPO WEEK
Este tipo de campo
ofrece una interface similar a date, pero
solo para seleccionar una semana completa. Normalmente el valor esperado tiene
la sintaxis 2011-W50 donde 2011 es al año y 50 es el número de la semana.
TIPO MONTH
Similar al tipo de
campo previo, éste es específico para seleccionar meses. Normalmente el valor
esperado tiene la sintaxis año-mes.
 |
| Tipo de data: month |
TIPO TIME
El tipo de campo time es similar a date, pero solo para la hora. Toma el formato
de horas y minutos, pero su comportamiento depende
de cada navegador en este momento. Normalmente el valor esperado tiene la
sintaxis hora:minutos:segundos, pero también puede
ser solo hora:minutos.
 |
| Tipo de dato: time |
TIPO DATETIME-LOCAL
El tipo de campo datetime-local es como el tipo datetime sin la zona horaria.
 |
| tipo de dato: datetime-local |
TIPO COLOR
Además de los tipos de
campo para fecha y hora existe otro tipo que provee una interface predefinida
similar para seleccionar colores. Normalmente el valor esperado para este campo
es un número hexadecimal, como #00FF00.
 |
| Tipo de dato: color |
TIPO FILE
El tipo de campo file
es para para poder cargar diferentes tipos de archivos.
 |
| Tipo de dato: file |
Nuevos
atributos
ATRIBUTO PLACEHOLDER
Especialmente
en tipos de campo search, pero
también en entradas de texto normales, el atributo placeholder representa una sugerencia
corta, una palabra o frase provista para ayudar al usuario a ingresar la
información correcta. El valor de este atributo es presentado en pantalla por
los navegadores dentro del campo, como una marca de agua que desaparece cuando el
elemento es enfocado.
 |
| Atributo : placeholder |
ATRIBUTO REQUIRED
Este
atributo booleano no dejará que el formulario sea enviado si el campo se
encuentra vacío. Por ejemplo, cuando usamos el tipo email para recibir una dirección de email, el
navegador comprueba si la entrada es un email válido o no, pero validará la
entrada si el campo está vacío. Cuando el atributo required es incluido, la entrada será
válida sólo si se cumplen las dos condiciones: que el campo no esté vacío y que
el valor ingresado esté de acuerdo con los requisitos del tipo de campo.
 |
| Atributo: required |
ATRIBUTO MULTIPLE
El
atributo multiple es
otro atributo booleano que puede ser usado en algunos tipos de campo (por
ejemplo, email o file) para permitir el ingreso de entradas múltiples
en el mismo campo. Los valores insertados deben estar separados por coma para
ser válidos.
ATRIBUTO AUTOFOCUS
Esta
es una función que muchos desarrolladores aplicaban anteriormente utilizando el
método focus() de
Javascript. Este método era efectivo pero forzaba el foco sobre el elemento
seleccionado, incluso cuando el usuario ya se encontraba posicionado en otro
diferente. Este comportamiento era irritante pero difícil de evitar hasta
ahora. El atributo autofocus enfocará
la página web sobre el elemento seleccionado pero considerando la situación
actual. No moverá el foco cuando ya haya sido establecido por el usuario sobre
otro elemento.
 |
| Atributo: autofocus |
ATRIBUTO PATTERN
El
atributo pattern es
para propósitos de validación. Usa expresiones regulares para personalizar
reglas de validación. Algunos de los tipos de campo ya estudiados validan
cadenas de texto específicas, pero no permiten hacer validaciones personalizadas,
como por ejemplo un código postal que consiste en 5 números. No existe ningún
tipo de campo predeterminado para esta clase de entrada.
El
atributo pattern nos
permite crear nuestro propio tipo de campo para controlar esta clase de valores
no ordinarios. Puede incluso incluir un atributo title para personalizar mensajes de error.
 |
| Atributo: patterm |
ATRIBUTO FORM
El atributo form es una adición útil que nos permite
declarar elementos para un formulario fuera del ámbito de las etiquetas<form>. Hasta ahora, para construir
un formulario teníamos que escribir las etiquetas <form> de apertura y cierre y luego declarar
cada elemento del formulario entre ellas. En HTML5 podemos insertar los
elementos en cualquier parte del código y luego hacer referencia al formulario
que pertenecen usando su nombre y el atributo form:
 |
| Atributo: form |
De esta manera completamos cada uno de los tipos de datos y atributos con que podermos desarrollar nuestros formularios html5, recordarles que en este articulo no se a tocado tema de css, para dar estilo a nuestros formulario, que por ser muy extenso el tema pues sera en otra oportunidad.
les presento una imgen con todos los campos y atributos que se pueden utilizar en un formulario.
Recuerden probar sus codigos en diferentes navegadores para obterner distintos resultados, y optimizar sus codigos.
 |
| Descarga el archivo con los códigos.!!!! |
No hay comentarios:
Publicar un comentario