i Forms 2.0
Formularios en HTML5
Profesor: Javier López
Volver
Ejemplo práctico de un formulario HTML5
Nuevas etiquetas de formulario utilizadas
Otras etiquetas o <inputs> existentes
Resumen resumido de los nuevos atributos
Estilos CSS y autovalidación visual

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"..



Regístraté y disfruta de nuestras increíbles ventajas para poder seguir siendo adicto registrado del glorioso e insuperable Flash Gordon.













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

Nuevas etiquetas de formulario
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:

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

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.