HTML 5
FORMULARIOS
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.
Atributos para formularios
Atributo placeholder
El atributo placeholder muestra un texto que aparece por defecto en las etiquetas input. La diferencia con el atributo
value es que el texto desaparece cuando se selecciona el elemento, y además aparece en un color gris atenuado.
Por ejemplo, escribamos la siguiente línea dentro de un formulario:
Nombre: <input type="text" placeholder="Escribe tu nombre" />
Todos los navegadores (excepto IE8 y anteriores) admiten ya este atributo, El resultado es como en la siguiente línea:
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.
<input type="email" name="miemail" id="miemail" multiple>
Atributo autofocus
En las etiquetas input pone el cursor o foco en el elemento que lleva este atributo. Sólo puede haber uno por página,
ya que si ponemos más de uno el foco se pondrá en el primero de ellos, ignorando el resto.
Al igual que el anterior funciona ya en todos los navegadores en sus últimas versiones.
Veamos un ejemplo. Escribimos el siguiente código en el formulario:
Usuario: <input type="text" autofocus />
Al abrir o recargar la página el elemento está ya seleccionado, como puedes ver en la siguiente línea:
Usuario:
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.
<input pattern=”[0-9]{5}" name="codigopostal" id="codigopostal” title=”inserte los 5 números de su código postal”>
Atributo required
La presencia de este atributo indica que el campo en el que aparece es obligatorio. Si no está relleno nos indica un
mensaje de que debemos rellenarlo para poder mandar el formulario.
Este atributo no requiere ningún valor.
Si el campo no se ha rellenado al pulsar en enviar (botón "submit"), el formulario no se envía y nos recuerda con un
mensaje que debemos rellenarlo.
Atributo form
Con este atributo podemos poner un elemento del formulario fuera de su etiqueta.
Para ello la etiqueta <form> debe llevar el atributo id . El valor del atributo form será el mismo que el del id del
formulario.
<form action="#" method="post" id="miform">
....
....
</form>
<input type="text" form="miform" />
Aunque el input final está fuera del formulario, éste forma parte del mismo al llevar el atributo form.
Otros 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.
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:
<input type="email" name="miemail" id="miemail">
El texto insertado será controlado por el navegador y validado como un email. Si la validación falla, el formulario no
será enviado.
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.
<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.
<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.
<input type="tel" name="telefono" id="telefono">
Tipo number
Como su nombre lo indica, el tipo number es sólo válido cuando recibe una entrada numérica. Existen algunos atributos
nuevos 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.
<input type="number" name="numero" id="numero" min=”0” max=”10” step=”5”>
No es necesario especificar ambos atributos ( min y max ), y el valor por defecto para step es 1.
Tipo range
Este tipo de campo hace que el navegador construya una nueva clase de control que no existía previamente. Este nuevo
control le permite al usuario seleccionar un valor a partir de una serie de valores o rango. Normalmente es mostrado en
pantalla como una puntero deslizable o un campo con flechas para seleccionar un valor entre los predeterminados,
pero no existe un diseño estándar hasta el momento. El tipo range usa los atributos min y max estudiados previamente
para configurar los límites del rango. También puede utilizar el atributo step para establecer el tamaño en el cual el
valor del campo será incrementado o disminuido en cada paso.
<input type="range" name="numero" id="numero" min=”0” max=”10” step=”5”>
Podemos declarar el valor inicial utilizando el viejo atributo value y usar Javascript para mostrar el número
seleccionado en pantalla como referencia. Experimentaremos con esto y el nuevo elemento <output> más adelante.
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.
<input type="date" name="fecha" id="fecha">
La interface no fue declarada en la especificación. Cada navegador provee su propia interface y a veces adaptan el
diseño al dispositivo en el cual la aplicación está siendo ejecutada. Normalmente el valor generado y esperado tiene la
sintaxis año-mes-día .
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.
<input type="week" name="semana" id="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.
<input type="month" name="mes" id="mes">
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.
<input type="time" name="hora" id="hora">
Tipo datetime-local
El tipo de campo datetime-local es como el tipo datetime sin la zona horaria.
<input type="datetime-local" name="tiempolocal" id="tiempolocal">
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.
<input type="color" name="micolor" id="micolor">
Nuevos elementos para formularios
Ya hemos visto los nuevos tipos de campos disponibles en HTML5, por lo tanto es momento de estudiar los nuevos
elementos HTML incorporados con la intención de mejorar o expandir las posibilidades de los formularios.
El elemento <datalist>
El elemento <datalist> es un elemento específico de formularios usado para construir una lista de ítems que luego, con
la ayuda del atributo list, será usada como sugerencia en un campo del formulario.
<datalist id="informacion">
<option value=”123123123” label=”Teléfono 1”>
<option value=”456456456” label=”Teléfono 2”>
</datalist>
Este elemento utiliza el elemento <option> en su interior para crear la lista de datos a sugerir. Con la lista ya declarada,
lo único que resta es referenciarla desde un elemento <input> usando el atributo list :
<input type="tel" name="telefono" id="telefono" list="informacion">
El elemento <progress>
Este elemento no es específico de formularios, pero debido a que representa el progreso en la realización de una tarea, y
usualmente estas tareas son comenzadas y procesadas a través de formularios, puede ser incluido dentro del grupo de
elementos para formularios.
El elemento <progress> utiliza dos atributos para configurar su estado y límites. El atributo value indica qué parte de la
tarea ya ha sido procesada, y max declara el valor a alcanzar para que la tarea se considere finalizada.
El elemento <meter>
Similar a <progress>, el elemento <meter> es usado para mostrar una escala, pero no de progreso. Este elemento tiene la
intención de representar una medida, como el tráfico del sitio web, por ejemplo.
El elemento <meter> cuenta con varios atributos asociados: min y max configuran los límites de la escala, value
determina el valor medido, y low , high y optimum son usados para segmentar la escala en secciones diferenciadas y
marcar la posición que es óptima.
El elemento <output>
Este elemento representa el resultado de un cálculo. Normalmente ayudará a mostrar los resultados del procesamiento
de valores provistos por un formulario. El atributo for asocia el elemento <output> con el elemento fuente que participa
del cálculo, pero este elemento deberá ser referenciado y modificado desde código Javascript. Su sintaxis es
<output>valor</output>.