Formularios de HTML5

Ejemplo práctico

Los formularios fueron una de las primeras mejoras que se dieron a conocer de HTML5 y de las que más revuelo causaron, sobre todo por su gran capacidad de autovalidación de una manera extremadamente fácil y sin necesidad de utilizar JavaScript.

Vamos a hacer un ejemplo práctico de un formulario para registrarse en el club friki de los "Amigos de Flash Gordon"..

Primero vamos a ver algunas de las características de HTML5 que igual has pasado por alto:

De entrada, el cursor podría está situado por defecto dentro del primer campo, para que el usuario pueda escribir sin tener que hacer clic en él.
Si sitúas el cursor encima de cualquier campo podrás leer una explicación adicional sobre esa pregunta.
El segundo y tercer campo son obligatorios, por lo que -cuando estés en ellos- tendrán el borde rojo hasta que sean rellenados y de manera correcta.
El correo electrónico, además sólo aceptará el valor introducido si detecta una @ enmedio y un formato apropiado.
Además, el correo electrónico y otros campos ofrecen un valor de ejemplo que se elimina automáticamente al introducir cualquier valor.
Al pulsar el botón "Enviar los datos" sin haber introducido los campos obligatorios o bien el correo electrónico con un formato no válido aparecerá un mensaje de alerta con información adicional que informa de los errores encontrados.
Al mismo tiempo es posible añadir símbolos de OK/error después de cada campo que indican si existe algún error o son correctos.

Nuevas etiquetas para formularios

Lo primero a tener en cuenta hace referencia a la estructura general. Así, todas las etiquetas que vamos a utilizar para el formulario tienen que estar ubicadas dentro de las etiquetas del formulario <form> y </form>.

<form action="enviarmail.php" method="post">
</form>

En este caso, detrás de action hemos añadido la ruta del fichero .php que enviará los datos introducidos en el formulario y al final con method indicamos el método "post", que garantiza una mayor seguridad para los datos enviados.

Vamos a echar un vistazo a las diferentes etiquetas o <inputs> que componen el formulario de ejemplo superior para poder ver las nuevas características que HTML5 aporta:

Tu nombre (text)

<input type="text" size="40" title="Escribe tu nombre real. Es el que aparecerá en tu..." name="nombre" autofocus required/>

Con type indicamos qué tipo de datos estamos pidiendo (en este caso 'texto normal').
Si queremos un campo de texto más largo o extenso podemos especificarlo con size.
Con title podemos incluir un texto adicional que aparecerá cuando el usuario coloque el cursor encima.
name es importante ya que es la manera en la que se identificará este valor al enviar la información.
En todo el formulario sólo puede haber un campo con autofocus, ya que este parámetro señala qué campo del formulario estará inicialmente seleccionado por defecto para que el usuario pueda escribir sin tener que seleccionarlo.
El parámetro required indica que este campo es obligatorio y que sino se rellena no se podrá enviar la información.

Contraseña (password)

<input type="password" size="7" title="Escribe la contraseña que desee..." name="password" required/>

Al detectar que en type se especifica el valor 'password' lo que el usuario escribe se enmascara con círculos de forma automática.
El required final nos indica que este campo también es obligatorio.

Correo electrónico (email)

<input type="email" placeholder="usuario@dominio.com" size="40" title="Escribe tu correo electrónico..." name="mail" required/>

Como en type se especifica 'email' la autovalidación de este dato incluirá la búsqueda de una @ y un mínimo formato apropiado.
En este caso observamos el parámetro placeholder, que es el responsable de que inicialmente aparezca ya escrito en gris flojo (usuario@dominio.com). Automáticamente cuando el usuario escribe cualquier valor dicho texto se elimina, igualmente si el usuario borra todo el contenido, el texto especificado con placeholder vuelve a aparecer.

Fecha de nacimiento (date)

<input type="date" value="2000-01-01" name="nacimiento" title="La fecha en la que naciste, ya que..."/>

El valor 'date' dentro de type identifica que el valor a utilizar es una fecha y que por lo tanto aparecerá el acceso a un calendario, que se puede ubicar directamente en una fecha inicial utilizando el parámetro 'value'.
Así, value permite especificar la fecha inicial por defecto que aparecerá inicialmente en el calendario. Sino se indica ningún valor aparecerá la fecha actual.

¿Cuántos cómics de Flash Gordon lees a la semana? (range)

<input type="range" min="1" max="7" value="2" step="1" title="Necesitamos saber..." name="adiccion"/>

Al indicar en type el valor 'range' aparece una barra (slider) con la que el usuario puede introducir un valor numérico arrastrando la barra hasta el valor que corresponda.
Con min y max se especifica el valor mínimo y máximo que el usuario podrá introducir.
Para especificar un valor inicial utilizamos el parámetro value.
Con step podemos especificar el valor de incremento (o decremento) de cada punto del slider. Por ejemplo, un valor de "1" quiere decir que cada vez que el usuario mueve un espacio del slider se aumenta o se disminuye el valor de 1 en 1, y que además no serán válidos los decimales.

¿Cuál crees que hubiera sido el color ideal de las mayas de Flash Gordon? (color)

<input type="color" value="#FF0000" title="Con esta votación..." name="color_preferido"/>

Al indicar en type el valor 'color' aparece un selector de colores en el que se podrá escoger el color deseado de entre los que aparecen, o bien indicando el código RGB del color.
Para especificar un color inicial por defecto utilizamos el parámetro value indicando el código de color inicial en hexadecimal.

¿Cuántos cómics de Flash Gordon tienes actualmente? (number)

<input type="number" min="100" max="9000" step="1" value="100" title="De momento el ganador..." name="comics"/>

Con min y max se especifica el valor mínimo y máximo que serán tomados como válidos.
Para especificar un valor inicial utilizamos el parámetro value.
Con step podemos especificar el intervalo o 'de cuánto en cuánto' aumentarán o disminuirán los datos introducidos. Por ejemplo, un valor de "10" quiere decir que cada vez que el usuario aumenta o reduce el valor éste se mueve de 10 en 10 y que además únicamente serán válidos los datos que sigan este intervalo (100, 110, 120, 130, etc...)

Enviar

<input type="submit" value="Enviar los datos"/>

Con type="submit" estamos añadiendo el típico botón "Enviar", en el que a través del parámetro value podemos indicar el texto que se mostrará dentro del botón.
En este caso la acción de enviar la información se realizará de la manera automática, enviando los datos a la dirección que se ha indicado en <form>.

Otras etiquetas o <inputs> existentes

Existen múltiples tipos de <input> type, como son:

button: Crea un botón 'vacío'. La acción que se ejecutará cuando el usuario haga clic en él. La acción a ejecutar se tendrá que añadir posteriormente con JavaScript indicando su nombre de id.

<input type="button" value="Vótame" id="boton1"/>

checkbox: Crea cuadros de selección en el que se puede seleccionar más de un valor. Como es posible marcar múltiples checkbox, cada uno tiene que tener un name diferente.
Además, si queremos que uno de los valores esté marcado inicialmente por defecto, le añadiremos la propiedad checked (como es el caso de Kabul, -ideal en Agosto-).

<input type="checkbox" name="destino1" value="Damasco" /> Damasco (Siria)
<input type="checkbox" name="destino2" value="Kabul" checked/> Kabul (Afganistán)
<input type="checkbox" name="destino3" value="Belgrado" /> Belgrado (Serbia)

color: Permite introducir un color señalándolo a través de una paleta de colores. (Desarrollado en el ejemplo superior)
date: Permite introducir una fecha sobre un calendario. (Desarrollado en el ejemplo superior)
email: Permite introducir una dirección de correo electrónico válida. (Desarrollado en el ejemplo superior)
file: Permite que el usuario pueda seleccionar un fichero de su disco duro. Además, es posible indicar un filtro para poder seleccionar únicamente un tipo de fichero determinado. (Posteriormente para subirlo al servidor o realizar cualquier otra acción con dicho fichero se tendrá que recurrir a JavaScript).

<input type="file" name="fichero" accept="image/*" />

hidden: Añadiendo 'hidden' a un elemento del formulario dicho elemento no se visualiza inicialmente. (Para volver a visualizarlo se deberá recurrir a JavaScript).
number: Permite introducir un número a través del teclado o bien utilizando los botones "+" y "-" del propio elemento. (Desarrollado en el ejemplo superior)
password: Permite introducir una contraseña (los valores introducidos aparecen ocultos con círculos). (Desarrollado en el ejemplo superior)
radio: Crea círculos de selección en el que únicamente se puede seleccionar uno de ellos. Todos los radio button tienen que tener el mismo valor en name.
Si además queremos que un valor esté seleccionado inicialmente, añadiremos el parámetro 'checked' a la opción deseada (como 'Mujer' en el siguiente ejemplo).

<input type="radio" name="sexo" value="Mujer" checked/> Mujer
<input type="radio" name="sexo" value="Hombre"/> Hombre y sus derivados
<input type="radio" name="sexo" value="NS/NC"/> No estoy muy seguro/a

range: Crea una barra (slider) en la que el usuario podrá introducir un valor numérico arrastrando dicho slider a la cantidad deseada. (Desarrollado en el ejemplo superior)
search: Permite que el usuario pueda introducir un término de búsqueda, que posteriormente se puede utilizar para que -por ejemplo- Google busque en tu propio dominio.

<input type="search" name="buscar" placeholder="Término a buscar"/>

submit: Crea el botón de "Enviar". Al hacer clic enviará los datos del formulario a la dirección indicada en el tag <form>. (Desarrollado en el ejemplo superior)
tel: Introduce un número de teléfono. Aunque este type no tiene autovalidación (se puede escribir lo que se desee) ofrece importante información al navegador del tipo de información a introducir. Así, navegadores en iPhone4 (iOs 4.2) o Android (HTC Desire) cuando reciben un type="tel" ofrecen un teclado numérico especial para facilitar la introducción de este tipo de información.

<input type="tel" name="telefono"/>

text: Permite introducir texto normal. (Desarrollado en el ejemplo superior).
url: Permite introducir una dirección web de Internet válida. La autovalidación se ajusta a detectar una mínima estructura de URL.

Resumen resumido de los nuevos atributos

Los nuevos atributos para las etiquetas <input> más habituales e importantes son:

required: El campo es ogligatorio.
autofocus: Inicialmente el campo está seleccionado (sólo puede haber uno por formulario).
placeholder: Se muestra un valor por defecto en gris que se elimina cuando el usuario introduce algún valor.
autocomplete: Permite el rellenado automático del <input> en base al texto que vaya escribiendo el usuario, según los valores introducidos en ocasiones anteriores.

Estilos CSS y autovalidación visual

Con CSS3 podemos maquetar los <inputs> de los formularios para que sean más agradables a la vista y además ofrecer información visual para saber qué campos tienen valores válidos y qué valores son incorrectos o bien son obligatorios y que por lo tanto deben ser rellenados.

Maquetación CSS

Para maquetar y dar un estilo determinado al formulario podemos utilizar los selectores referentes a cada uno de los elementos que componen el formulario form, input, fieldset, legend, label...

form{
  background-color:orange;
  color:black;
}
input{
  color:grey;
}
fieldset{
  border-radius:5px;
  border:1px dotted green;
}

Autovalidación gráfica

Para que el formulario pueda resaltar visualmente qué campos obligatorios es necesario rellenar, que campos son válidos o qué campos tienen valores incorrectos utilizamos el selector :invalid{, mientras que el selector [required]{ señala aquellos campos que son obligatorios y que los valores introducidos son correctos y :valid{ se encarga de gestionar aquellos campos que son correctos.

input[required]{
  border-color:blue;
  box-shadow:0px 0px 5px blue;
}
input:invalid{
  border-color:red;
  box-shadow:0px 0px 5px blue;
}
input:valid{
	border-color:green;
	box-shadow:0px 0px 5px green;
}

Con este código CSS todos los campos con valores obligatorios (es decir, que tengan el atributo required) y que tengan un valor correcto, tendrán el borde de color verde y una sombra interna también verde. Aquellos campos que tienen valores incorrectos o bien están sin rellenar, siendo obligatorios, tendrán un borde y una sombra interna de 8 píxeles de color rojo y aquellos campos que tengan un contenido válido, tendrán tanto el borde como la sombra de color azul.