Formularios HTML5

Describe las nuevas características de los formularios en HTML5: nuevos controles, nuevos
atributos y validación nativa. También se indica cómo simular estas características para el caso de
que el usuario utilice un navegador antiguo (empleando código JavaScript) y las pseudoclases de
CSS3 útiles al trabajar con formularios de este tipo. Contenido:
1. Introducción.
2. Nuevos controles de formulario.
3. Nuevos atributos.
4. Compatibilidad con navegadores antiguos.
5. Pseudoclases CSS3 relacionadas con los formularios HTML5.

1. INTRODUCCIÓN
Los formularios presentan bastantes novedades en HTML5. Estas novedades no solo incluyen
nuevos controles de formulario, sino que HTML5 proporciona por primera vez la funcionalidad
de validar los datos sin necesidad de recurrir a un lenguaje adicional como JavaScript. Así pues,
con HTML5 podremos hacer que un determinado campo sea requerido, que se ajuste al formato
de una dirección de correo electrónico o que tenga un valor numérico dentro de un rango
definido. Todo esto indicándolo de una forma declarativa, es decir, a través de las etiquetas y
atributos del lenguaje HTML5, sin necesidad de programar en JavaScript o en un lenguaje
similar.
Esto no significa que la validación en el servidor ya no sea necesaria. Como siempre, debemos
entender que la validación que realiza el navegador es un primer paso.
Adicionalmente, la aplicación del servidor realizará su correspondiente validación.
En cuanto a los navegadores modernos, la mayoría implementan todas las características de
formularios que vamos a ver, siendo Chrome un buen ejemplo de ello, por lo que lo vamos a
utilizar en esta lección. Veamos un formulario HTML5 en funcionamiento. Pulsa y abriré
esta página en Chrome. Ahora puedes ver un formulario donde el usuario tiene que rellenar una
serie de campos y pulsar en un botón. La estructura del formulario se ha conseguido con
etiquetas tradicionales HTML y otras nuevas de HTML5.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

El aspecto, mediante CSS. Por ahora no hay código JavaScript que se ejecute en este
formulario. Fíjate que algunos de los campos presentan un mensaje de ayuda. Por ejemplo, en el
campo donde se debe introducir una dirección de correo electrónico, se indica el formato
esperado.
Haz clic en el botón Siguiente de la parte inferior del formulario.
Lo primero que vemos es que el navegador nos informa de una serie de campos obligatorios, por
lo que no ha continuado con el envío de la información.
Deberemos rellenarlos antes de continuar con el siguiente paso.
Escribe los siguientes datos en el formulario:
Nombre: Juan Rodríguez Malonda
Email: jrodriguezmail.com
Dirección: Plaza Mayor, 12, 3er piso, 7ª puerta.
Código postal: 48000
Pulsa de nuevo en el botón Siguiente.
Ahora, aunque se han rellenado los campos obligatorios, el navegador insiste en que la dirección
de correo electrónico no es válida.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

Fíjate que el navegador puede comprobar el formato o patrón de la dirección, pero no si se trata
de una dirección existente.
En este caso, parece que falta el carácter @.
Haz clic tras la z de rodriguez.
Añade el carácter @.
Pulsa de nuevo en Siguiente.
De esta forma accedemos a otra página web, donde también aparece un nuevo formulario.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

Si no aparecen los botones para incrementar o decrementar un campo numérico, sitúa el

puntero del ratón encima de dicho campo y los verás.

Aquí vemos que el campo Noches facilita la introducción de un valor numérico.

Pulsa en la flecha hacia arriba del campo Noches para poner el valor 3.
Mientras que el campo Fecha entrada está preparado para aceptar una determinada fecha.
Haz clic en el campo Fecha entrada.
Pulsa en la flecha desplegable .

Fíjate en el calendario que aparece.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

Selecciona el día 28 de este mes.

Toda esta funcionalidad se ha conseguido únicamente mediante HTML5, sin necesidad de utilizar
para nada JavaScript.
Vuelve al editor de código.
En esta lección conoceremos los nuevos elementos de HTML5 para formularios.
Además, veremos cómo "complementar" el código para que los navegadores antiguos que no
entienden estas características, al menos presenten el formulario de forma que siga siendo útil
para el usuario.
¡Empecemos!

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

2. NUEVOS CONTROLES DE FORMULARIO

HTML5 incorpora algunos controles nuevos, como hemos podido comprobar anteriormente.
Estos controles tienen dos propósitos: desde el punto de vista semántico, la descripción adecuada
de la información que recogen; por otra parte, facilitar la introducción de los distintos tipos de
información y validarla si es el caso. Para ello, HTML5 añade nuevos valores para el atributo
type de la etiqueta <input>, introduciendo los siguientes controles especializados:
type="search": se trata de un cuadro de texto especializado en búsquedas. Es decir, que se
utiliza para introducir palabras clave para realizar una búsqueda.
Realmente la diferencia entre el tradicional cuadro de texto (type="text") y este nuevo es
únicamente estético y cada navegador lo muestra de una forma distinta.
type="tel": cuadro de texto para representar números de teléfono.

Los atributos pattern y maxlength están disponibles para varios tipos de controles.
Con pattern establecemos la expresión regular que permite indicar qué valores introducidos
en el control son válidos; y con maxlength el número de carácteres máximo que puede
introducirse en el control.

Para restringir los valores introducidos en este tipo de campo, es necesario utilizar los atributos
pattern y maxlength.
Algunos navegadores pueden proporcionar un teclado especial para la introducción de números
de teléfono. Por ejemplo, los navegadores de dispositivos móviles suelen hacerlo.
type="email": control especializado en la introducción de direcciones de correo
electrónico.

Que exista o sea correcta ya lo decidirá la validación que realice la aplicación en el

servidor.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

Lo hemos podido ver en funcionamiento. Así pues, el navegador será capaz de validar la
información introducida por el usuario, comprobando que se trata de una dirección de correo
electrónico válida sin necesidad de especificar ningún atributo de la etiqueta.
Es habitual, como ocurre con un campo de tipo tel, que los navegadores de dispositivos móviles
cambien el teclado para facilitar la introducción de una dirección de este tipo. Por ejemplo,
incluyen el carácter @ en el teclado.
type="color": es un control especializado en la introducción de colores.
type="url": es un control especializado en la introducción de direcciones URL. Realiza la
validación adecuada, de forma similar a la que realiza el tipo email.
Haz clic en la pestaña de la página formulario_pedido2.html.
type="number": control especializado en la introducción de valores numéricos. Solo
admite números.

Se puede afinar el valor esperado mediante los atributos min y max, que representan el valor
mínimo y máximo, respectivamente, que puede introducir el usuario.

Si no se establece el valor del atributo step, entonces toma el valor 1.

Además, con el atributo step, indicamos cuánto se incrementa o decrementa cada vez.

Tenemos varios de estos tipos:

type="date": para introducir una fecha (mes, día y año).
type="time": para introducir una hora en el formato de 24 horas (hora, minutos y
segundos) y con información de zona horaria.
type="datetime": para introducir una fecha y una hora.
type="datetime-local": igual que el anterior pero sin la posibilidad de indicar una zona
horaria, ya que se entiende que es la zona local.
type="month": para introducir un mes de un año. Por ejemplo, el mes de diciembre de
2011 sería 2011-12.
type="week": para introducir una determinada semana en un año. Por ejemplo, la
semana número 25 del año 2011 sería 2011-W25.
Todos estos tipos guardarán la fecha en el formato estandarizado: AAAA-MM-
DDThh:mm:ss.Z

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

donde A (año), M (mes), D (día), h (hora), m (minuto), s (segundo) y Z (zona horaria).

Por ejemplo: 2018-04-27T17:03:21+01
Además, admiten los atributos min y max, representando la fecha mínima y máxima que
puede introducir el usuario.

type="date", type="time", type="datetime", type="datetime-local", type="month",

type="week": controles especializados en la introducción de valores de fecha y hora.
Estos controles facilitan la introducción de fechas, que es un problema frecuente.
Así pues, el navegador puede proporcionar un calendario para que el usuario simplemente
seleccione la fecha deseada; sin importarle cómo la representa internamente.
type="range": para representar un control deslizante que se utiliza para introducir un valor
numérico.
En este caso lo más importante no es el propio valor, sino la forma en la que se representa.
La ventaja de todos estos nuevos controles es que se representarán como un cuadro de texto
tradicional si el navegador no los soporta. Es decir, como si el atributo type tuviera el valor
"text".
Por lo tanto, el formulario seguirá siendo válido, aunque mucho menos funcional, en un
navegador antiguo.
Después veremos que es posible complementar el código de la página para "simular" esta
funcionalidad mediante código JavaScript.
De esta forma, los navegadores modernos utilizarán la funcionalidad de HTML5 y los antiguos, la
del código personalizado.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

3. NUEVOS ATRIBUTOS

Estos son los nuevos atributos HTML5 que vamos a estudiar:

required
placeholder
list y el elemento <datalist>
autofocus

Aparte de la incorporación de nuevos controles, la especificación de HTML5 también añade

algunos atributos muy interesantes, en especial, el que permite realizar la validación de elementos
requeridos. Y es que ya no es necesario escribir pequeños programas en JavaScript para
comprobar si el usuario ha introducido el valor en los campos que establecemos como
requeridos u obligatorios. Con HTML5 simplemente utilizaremos el atributorequired. Fíjate
en la línea número 19, donde se añade el control correspondiente al campo Noches.

Como puedes ver, se utiliza el atributo required. Lo mismo podemos decir en la línea 23 para el
campo de la fecha de entrada. Simplemente con utilizar este atributo, el navegador se encargará
de asegurar que el usuario introduce un valor en esos campos antes de enviar la información al
servidor. Esta será la primera validación. Después podría completarse con otras. Por ejemplo,
para un control de tipo email y requerido, primero se comprobará que el usuario ha introducido
un valor y, después, que dicho valor es una dirección de correo electrónico válida.
Haz clic en la pestaña correspondiente al formulario_pedido1.html.
Otro atributo cuyo resultado hasta ahora conseguíamos mediante JavaScript es placeholder.
El atributo placeholder permite introducir texto de ejemplo o de consejo en los cuadros de texto.
La idea es que el usuario reciba alguna indicación para rellenar el campo con la información
solicitada.
Por ejemplo, hemos utilizado este atributo en los cuadros de texto donde se solicita el nombre,
email y teléfono del usuario (líneas 15, 19 y 23, respectivamente).

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

Así pues, alguna indicación para que el usuario sepa que debe introducir su nombre y apellidos o
el formato que se espera para su teléfono pueden ser de gran ayuda.
El valor del atributo placeholder es una cadena con el texto de ayuda.
Cuando el usuario pulsa en uno de estos campos, ese texto puede desaparecer o no en función de
la implementación que haga el navegador.
Eso sí, en el momento que escribimos en él, desaparece el texto de placeholder.
Volvamos a comprobarlo. Vuelve al navegador.
Pulsa en el botón Atrás de Chrome y actualiza la página.

Fíjate que el texto del atributo placeholder se muestra en los campos Nombre, Email y
Teléfono.

Haz clic en el campo Email y escribe la dirección jrodriguez@mail.com. Después pulsa .

Fíjate que una vez se ha introducido un valor en el campo, ya no aparece el texto del atributo
placeholder.
Haz clic en el campo Provincia.
En este campo hemos utilizado el siguiente atributo que vamos a estudiar. Se trata del atributo
list.
Pulsa en la flecha para desplegar la lista.
Fíjate que ha aparecido una lista con valores posibles para el campo.

Sin embargo, no se trata de una lista, sino de un cuadro de texto, por lo que podríamos escribir el
nombre de la provincia en lugar de seleccionarlo de la lista e incluso utilizar un nombre que no
aparece en ella.

Repliega la lista con .

Vuelve al editor de código.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

Pulsa dos veces.

En las líneas 44 a 51 puedes ver cómo se ha hecho.

Fíjate que se trata de un cuadro de texto tradicional (type="text") pero que tiene el atributo list.
El valor de este atributo es el identificador de una lista que seguidamente se define con la etiqueta
<datalist>, que también es nueva en HTML5.
Como puedes ver, es muy parecido a un control <select>, pero utilizando dicha funcionalidad
con un cuadro de texto.
Y, finalmente, podemos encontrar el atributo autofocus.

Por ejemplo, la página principal del buscador Google está preparada de forma que, al
cargar la página, tome el foco el campo de búsqueda donde introducimos las palabras clave
de la búsqueda.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

Con este atributo podemos hacer que tome el foco un determinado control.

Solo debe haber un control con el atributo autofocus en una página web.

Con HTML5 esto es tan sencillo como establecer el valor autofocus para dicho control. Esto no
está limitado a los controles input, también podremos utilizarlo con controles textarea o select.

Pulsa + .

Al final de la línea 15 puedes comprobar que se utiliza este atributo. Por lo tanto, al cargar la
página, el cuadro de texto Nombre es el que recibe el foco de la aplicación.

Este atributo debe utilizarse con precaución, ya que puede producir resultados indeseados. Por
ello, utilízalo únicamente cuando tenga sentido.
Además, recuerda que todas estas nuevas características están soportadas de distinta manera por
los navegadores. La especificación HTML5 da bastante libertad a la hora de la implementación.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

4. COMPATIBILIDAD CON NAVEGADORES ANTIGUOS

Bueno, ¿y qué ocurre con aquellos navegadores que no entienden las nuevas características de los
formularios HTML5?

Ese tipo de código adicional que tiene el propósito de proporcionar funcionalidades de

una tecnología que no están disponibles en navegadores antiguos se conoce como
"polyfill".

Pues si queremos ofrecer la misma funcionalidad, tendremos que complementar el código

HTML5. Eso sí, mediante un lenguaje auxiliar descripting, como JavaScript. Así que si ya
estabas pensando en eliminar todo el código JavaScript que tienes en tus páginas web para validar
los datos introducidos en un formulario, mejor será que no lo hagas todavía.
La estrategia que vamos a seguir es esta:
1.- Comprobar si el navegador admite un elemento o atributo HTML5.
1.1.- En caso positivo, no hacer nada más, simplemente incluir el código HTML5.
1.2.- En caso negativo, ejecutar el código adicional JavaScript.
Fíjate que no comprobaremos qué navegador está utilizando el usuario, sino si es compatible con
las características HTML5 que hemos utilizado. Lo veremos con un ejemplo: el atributo
placeholder.
Despliega la carpeta scripts en el panel del Explorador de la izquierda. Haz doble clic en el
archivo placeholder.js.
Aquí podemos ver un ejemplo de esto. Se trata de código JavaScript que proporciona la
funcionalidad del atributo placeholder de HTML5.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

En las líneas resaltadas encontramos una función que sirve para comprobar si el navegador admite
una determinada característica HTML5.

Fíjate cómo lo hacemos:

En la línea 3 se crea un elemento en la memoria del navegador, pero sin incluirlo en el DOM
del documento.
En la línea 4 se testea si el elemento acepta el atributo en cuestión. Si es así, se devuelve el
valor true; en caso contrario, el valor false.

Alternativamente, puedes utilizar la librería Modernizr (www.modernizr.com). Se

trata de una librería que proporciona métodos para comprobar la compatibilidad del
navegador del usuario con las características de HTML5.
Por ejemplo, la expresión Modernizr.inputtypes[email] se evaluará a true si el navegador es
compatible con el tipo de control email y false en caso contrario.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

Sin embargo, esta librería no aporta ningún código alternativo para que los navegadores
antiguos obtengan la misma funcionalidad que no entienden del lenguaje HTML5, aunque en
el sitio web www.modernizr.com encontrarás enlaces a otros lugares donde encontrar dicho
código.

Recuerda que el elemento que creamos para probar la característica no forma parte del DOM del
documento, por lo que realmente no aparecerá de ninguna forma en la página web.
Veamos ahora cómo utilizamos esta función.
En la línea 12 podemos ver un ejemplo. En este caso se comprueba si el elemento "input"
dispone del atributo "placeholder". Para ello, se utiliza la función anterior.

En caso de que la función devuelva el valor false, se simula el resultado del atributo placeholder
de HTML5. Si el navegador es compatible con esta característica, no se hace nada, ya que será
suficiente con el código de la página web.

Pulsa + .

En las líneas 33 a 44 encontramos el código que se ejecuta al cargar la página. Por eso está
asociado con el evento load del elemento window.

Fíjate que se vuelve a comprobar si el navegador es compatible con el atributo placeholder y, en

caso negativo, se realizan los pasos oportunos para simular esta característica mediante
JavaScript.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

En este caso se establece el valor de los atributos style y value para mostrar el texto
correspondiente en los campos de nombre, email y teléfono.
Fíjate que dicho texto se puede obtener del propio atributo placeholder de la etiqueta <input>.
Es decir, que aunque el navegador no es compatible con dicho atributo, sí que podemos obtener
su valor a través de JavaScript.
Sin entrar en mayores detalles, aquí vemos que si el navegador es compatible con la característica
HTML5, no se ejecutará ningún código JavaScript; si no es compatible, se ejecutará el código
JavaScript para simular dicha característica.
Vuelve a la pestaña formulario_pedido1.html.

Pulsa + .

Haz clic al final de la línea 59 y pulsa .

Escribe:
<script src="scripts/placeholder.js"></script>
Elige Guardar del menú Archivo.
Ahora, ejecutando el correspondiente código JavaScript, obtendremos la misma funcionalidad
que con el atributo placeholder de HTML5 en un navegador antiguo.
De forma similar, actuaríamos con otras características HTML5 que queremos hacer compatibles
con los navegadores antiguos.
Sin embargo, es importante darse cuenta de que la página sigue siendo válida incluso sin esta
funcionalidad. Y es que uno de los objetivos del diseño de HTML5 es ser compatible "hacia
atrás", es decir, con aquellos navegadores que no entienden las nuevas características.
Por eso, estos navegadores interpretan como un cuadro de texto tradicional (type="text") los
controles nuevos que hemos visto durante la lección.
A medida de que los navegadores antiguos sean reemplazados por los modernos, todo este código
adicional JavaScript no será necesario.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

5. PSEUNDOCLASES CSS3 RELACIONADAS CON LOS FORMULARIOS

HTML5
La versión de las hojas de estilo en cascada CSS3 introduce una serie de pseudoclases que
pueden ser de gran utilidad cuando trabajamos con formularios HTML5.
Así pues, tenemos estas pseudoclases que podemos utilizar:
:required: representa a cualquier elemento <input>, <select> o <textarea> que tiene el atributo
required establecido.
:optional: representa a cualquier elemento <input>, <select> o <textarea> que no tiene el
atributo required establecido.
:invalid: representa cualquier <input> u otro tipo de elemento de un formulario que no supera la
validación.
:valid: representa cualquier <input> u otro tipo de elemento de un formulario que supera la
validación.
Por ejemplo, podríamos utilizar la pseudoclase :required para establecer el formato de un
elemento obligatorio (y eliminar así la convención de marcarlos con un asterisco *). O las
pseudoclases :invalid y :valid para establecer una determinada apariencia que ayude al usuario a
confirmar que ha introducido los datos correctamente. Pues vamos a verlo...

Despliega la carpeta css en el Explorador. Haz doble clic en formulario.css. Pulsa +

.

Pulsa para crear dos nuevas reglas y escribe:

input:invalid {
color: red;
}
input:valid {
color: green;
}
De esta forma tan sencilla estamos indicando que el color del texto de los input cuyo valor
introducido no esté bien formado sea el rojo; y que el color del texto de los que son válidos sea
el verde.
Guarda los cambios. Vuelve al navegador y actualiza la página. Haz clic en el campo Email.
Ahora vas a introducir una dirección de correo electrónica válida, pero debes fijarte en el color
del texto a medida que escribes.

Copyright © Computer Aided Elearning, S.A.

 Formularios HTML5

Al principio aparecerá con el color rojo y, cuando ya sea una dirección válida, con color verde.
Escribe: jrodriguez@mail.com
Como has podido comprobar, el funcionamiento ha sido correcto. Recuerda que estas
pseudoclases aparecen en la versión CSS3, por lo que deberán estar soportadas por el navegador.
En el caso de que no sea así, simplemente no se mostará esta ayuda para el usuario si no la
incluimos a través de un polyfill.
Entre las novedades de HTML5 referentes a los formularios encontramos nuevos controles y
la funcionalidad de validar los datos sin necesidad de recurrir a un lenguaje adicional como
JavaScript.
Se añaden nuevos valores para el atributo type de la etiqueta <input>:

type="search": se trata de un cuadro de texto especializado en búsquedas.

type="tel": cuadro de texto para representar números de teléfono.
type="email": control especializado en la introducción de direcciones de correo
electrónico.
type="color": es un control especializado en la introducción de colores.
type="url": es un control especializado en la introducción de direcciones URL.
type="number": control especializado en la introducción de valores numéricos.
type="date", type="time", etc.: controles especializados en la introducción de valores
de fecha y hora.
type="range": para representar un control deslizante que se utiliza para introducir un
valor numérico.
Nuevos atributos:

required
placeholder
list y el elemento <datalist>
autofocus

Para los navegadores antiguos se sigue esta estrategia:

1.- Comprobar si el navegador admite un elemento o atributo HTML5.

1.1.- En caso positivo, no hacer nada más, simplemente incluir el código HTML5.
1.2.- En caso negativo, ejecutar el código adicional JavaScript.
También podemos utilizar las siguientes pseudoclases introducidas en CSS3: :required,
:optional, :invalid y :valid.
Copyright © Computer Aided Elearning, S.A.
 Formularios HTML5

Copyright © Computer Aided Elearning, S.A.