4.14 HTML5: Ejemplo de formulario

4.14 HTML5: Ejemplo de formulario

Objetivos:

En este vídeo verás un ejemplo de formulario en HTML5. Recuerda que los nuevos controles de formulario de HTML5 es una de sus mejores características.

Como ya hemos analizado en lo que llevamos de curso, una de las características más importantes que nos trae el nuevo estándar HTML5 son los nuevos elementos disponibles para el manejo de formularios, ya que nos permite gestionarlos de manera nativa, y por tanto se puede prescindir de JavaScript para realizar algunas validaciones de formulario del lado del cliente.

Esto facilita mucho el trabajo del desarrollador, porque no se tiene que preocupar por problemas de compatibilidad entre distintos navegadores;  además supone un ahorro de tiempo y de ancho de banda, ya que, por un lado, permite que el formulario NO sea enviado si no es válido, y por otro lado, permite informar al usuario de que alguno de los valores introducidos no cumple los requisitos definidos.

En este vídeo vamos a ver un ejemplo de un formulario en HTML5, y para ello vamos a usar la aplicación Notepad++ para la edición del código, y el navegador Google Chrome para ver los resultados.

Para poder comprender y aprovechar al máximo la información que vamos a ver a continuación, deberías haber visto previamente los vídeos: HTML5: Nuevas funcionalidades en formularios, parte 1 y parte 2.

En primer lugar vamos a analizar cómo debe ser la estructura básica de nuestro fichero HTML5:

Lo primero que debemos colocar siempre es la declaración de DOCTYPE. Debe estar antes de la etiqueta “html”.

A continuación debemos tener este elemento raíz: html. Este elemento contiene el documento completo y únicamente el DOCTYPE está fuera de él. Debe contener dos elementos: head y body.

Con “lang” indicamos el idioma base de los valores de los atributos y del texto del contenido. Esta información puede ser utilizada por un agente de usuario de diferentes formas para controlar la presentación de la página. En este caso hemos asignado el español.

La etiqueta “head” es el contenedor de todos los elementos de cabecera.  Debe incluir un título para el documento, y puede contener scripts, estilos, meta información, etc.

"charset" UTF-8 sirve para especificar la codificación de caracteres de marcado del documento. Esto ya os sonará porque lo habéis visto en detalle en otros vídeos del curso, así que no vamos a explicarlo en este.

La etiqueta “title” es obligatoria en todos los documentos HTML y define el título del documento. Lo que significa que:

• Define el título para la barra del navegador.
• Proporciona un título para la página cuando ésta se añade a favoritos.
• Y muestra un título para la página en los resultados de los motores de búsqueda.

La etiqueta “body” indica que se trata de la sección principal del documento. Está siempre definida después de la etiqueta de cierre del elemento head y antes de la etiqueta de cierre del elemento html.

El elemento “h1” define un encabezado de nivel 1. Como ya sabéis, existen 6 niveles de encabezado, y nos ayudan a organizar la información de un documento. En este caso lo usamos para definir un texto como un titular, más grande y destacado que cualquier otro texto.

La etiqueta “p” define un párrafo, por lo que los navegadores añadirán un margen antes y después de este elemento. En este caso hemos escrito un párrafo descriptivo sobre el contenido de la página que vamos a crear.

La etiqueta “form” se usa para crear formularios de entrada de datos en HTML. Este elemento puede contener uno o más de los siguientes elementos:

<input>,

<textarea>,

<button>,

<select>,

<option>,

<optgroup>,

<fieldset>,

<datalist>,

<output>,

<label>.

Finalmente, tenemos un tipo de input “submit” para definir un botón que nos permita enviar el formulario.

A continuación podemos ver el resultado del código escrito hasta el momento en el navegador google Chrome.

Como podéis observar, en la barra superior del navegador tenemos el título que hemos definido para la página.

Después podemos ver un encabezado de tipo "h1", con un tamaño grande y destacado.

Y debajo de él tenemos un párrafo con un texto descriptivo  en un tamaño de texto estándar.

Por último, podemos ver el botón que hemos definido para enviar el formulario que vamos a crear a continuación.

A continuación vamos a ir añadiendo elementos al formulario, usando los input type y los nuevos atributos de contenido vistos en los videotutoriales, y vamos a ir viendo cómo se comportan en el navegador google Chrome:

En primer lugar vamos a añadir un elemento input de tipo “text”, que contiene los siguientes componentes:

Una etiqueta label: que como ya sabéis a estas alturas del curso, define una etiqueta para un elemento input. Cabe destacar que cuando esta etiqueta recibe el foco, automáticamente se lo cede al control asociado. Existen dos tipos de asociación de las etiquetas con los controles de formulario: asociación implícita y asociación explícita.

En la asociación implícita, la etiqueta debe estar colocada inmediatamente antes o después de su control en la misma línea (o encima del control si la línea es diferente) o el control debe estar dentro de la etiqueta.

En la asociación explícita, la asociación se realiza identificando cada control con un atributo id único y asociándolo a través del atributo for de la etiqueta "label" correspondiente.

Las normas de accesibilidad WCAG 2.0 recomiendan usar la asociación explícita ya que algunas tecnologías asistivas no manejan correctamente las etiquetas implícitas.

En este caso, la usamos de forma explícita, aunque más adelante, veremos cómo usarla de forma implícita también.

Además tenemos un atributo “placeholder” para mostrar un texto por defecto dentro del campo. En este caso es un ejemplo de un nombre y un apellido.

Tenemos también un atributo “autofocus” para que sea el campo que recibe el foco automáticamente cuando se carga la página.

Después tenemos un atributo “autocomplete” para que se pueda seleccionar un valor introducido en este campo con anterioridad,

Y por último tenemos un atributo “required”, para definir este campo como obligatorio. Si no lo rellenamos, el sistema nos avisa de que es un campo de entrada requerido.

Ahora vamos a pasar a ver cuál sería el resultado de este código en el navegador google Chrome.

Como podéis observar, nos ha aparecido un nuevo campo de input tipo "text", que cuando cargamos la página, recibe el foco automáticamente gracias al atributo "autofocus". Además, tenemos un texto mostrado por defecto que hemos definido mediante el atributo "placeholder".

Si intentamos escribir vemos que aparece el autocompletado con otros textos que hemos introducido en este campo anteriormente. Y además, si intentamos enviar el formulario sin haber escrito nada  dentro del campo, el sistema nos avisa de que este campo es obligatorio rellenarlo.

A continuación, vamos a añadir un elemento input de tipo “password” (contraseña) que contiene los siguientes atributos:

un atributo “pattern” para definir la estructura de la contraseña en base a una expresión regular definida,

un atributo “placeholder” para mostrar un texto por defecto dentro del campo. En este caso es un ejemplo de una contraseña válida según la expresión regular definida, lo que puede ayudar al usuario a entender que formato es el correcto para este campo de contraseña.

Y por último tenemos un atributo de tipo “required”, para definir este campo como obligatorio.

Como podemos observar, ahora tenemos un nuevo campo en nuestro formulario: el campo Contraseña, de tipo password. Tiene un texto por defecto que hemos definido con el atributo placeholder. Además, con el atributo required hemos definido este campo como obligatorio, por lo que el sistema nos avisa si intentamos enviar el formulario sin haber rellenado este campo. Como veis, el sistema nos está diciendo que debemos completar este campo. A este campo le habíamos definido, con el atributo pattern, una expresión regular, por lo que el sistema nos debe avisar si escribimos un texto que no cumple con dicha expresión regular. Vamos a probar a introducir un montón de letras para ver si el sistema nos avisa de que es incorrecto.

Efectivamente, el sistema nos avisa de que el formato no coincide con el definido en este campo. Así que vamos a cambiarlo por uno correcto, por ejemplo “jjj9999”, y si tratamos de enviar el formulario ahora mismo, efectivamente el sistema nos deja enviar el formulario ya que no contiene ningún error.

A continuación vamos a añadir tres tipos nuevos de input: uno de tipo “tel”, uno de tipo “email” y otro de tipo “url”, los tres con texto o un número definido como ejemplo para que el usuario sepa lo que debe introducir en este campo.

Como podemos observar en el navegador, tenemos estos nuevos campos, en el caso del campo teléfono, como no hemos definido una expresión regular con pattern, nos va a dejar introducir cualquier valor, y nos va a permitir enviar el formulario sin darnos ningún mensaje de error.

En el campo de email, sin embargo, la cosa cambia, porque si introducimos una dirección de correo no válida, el sistema nos advierte de que la dirección de correo electrónico no es correcta.

Para el caso de la página web ocurre lo mismo que con email. Si intentamos escribir una dirección que no es correcta, el sistema nos advierte de que la dirección url no es correcta. Sin embargo, si ponemos una dirección web correcta,  el sistema nos permite enviar el formulario.

A continuación vamos a añadir dos tipos de input más: un tipo “number” y el otro es un tipo date. El tipo number tiene los siguientes atributos:

min y max para fijar los valores mínimo y máximo respectivamente permitidos en el campo (en este caso el mínimo sería 2 y el máximo 14).

Además tenemos el atributo “placeholder” para definir un número por defecto que aparecerá en el campo automáticamente.

Finalmente podemos ver que tenemos un atributo “step”, que como ya habíamos visto en vídeos anteriores, sirve para especificar los intervalos de valores válidos para el campo. En este ejemplo vale 2, y como su valor mínimo es 2, sus valores válidos para este campo serán: 2, 4, 6, 8, 10, 12 y 14.

El siguiente tipo de input que hemos definido es un tipo de input “date”, con el atributo min para fijar una fecha mínima por defecto.

Como podemos observar ahora tenemos estos dos nuevos campos, el nº de temas que era el tipo number, y la fecha de envío que era el tipo date. En el caso del nº de temas, tenemos un valor definido por defecto de 2, mediante el atributo placeholder. Además tenemos un máximo y un mínimo por lo tanto no me deja disminuir la cifra por debajo de 2. El atributo máximo me obligaba a tener un máximo permitido de 14, y además con step podemos comprobar que solo nos deja movernos en cifras de dos en dos, en este caso, cifras pares.

En cuanto al campo de fecha de envío, si lo pulsamos podemos ver un calendario en el que podemos seleccionar una fecha, y que contiene una fecha mínima de 16 de julio de 2012, por lo tanto, antes del 16 de julio no nos deja seleccionar ninguna fecha. Esto lo conseguíamos con el atributo min dentro del tipo date.

A continuación vamos a añadir tres campos más a nuestro formulario: el tipo “color”, el tipo “search” y un tipo “range”. El tipo “color” contiene un atributo “value”, que nos permite especificar el valor por defecto. Su tipo de valor difiere según el tipo de input, por ejemplo, para “color” especifica el código hexadecimal del color por defecto, pero por ejemplo como podemos ver en el tipo “submit” del botón enviar, lo que define en ese caso es el texto del botón.

En el caso del tipo de input search, lo que nos encontramos es un campo de búsqueda.

Y por último hemos añadido un input de tipo “range”, que es un tipo de campo con un rango específico de valores, delimitado en este caso por los valores 1 de mínimo y 10 de máximo.

Como podemos observar, ahora tenemos estos tres nuevos campos en nuestro formulario. Uno es el de color, que cuando lo pulsamos, nos permite seleccionar un color desde una paleta de colores, y al que habíamos puesto un color azul por defecto con su código hexadecimal y el atributo value.

En cuanto al campo de búsqueda, cuando nos colocamos en el campo y comenzamos a escribir, podemos ver que aparece el aspa, para borrar lo escrito hasta el momento.

Y en cuanto al tipo de input range, podemos ver que nos permite seleccionar un valor dentro de un rango de 1 a 10.

A continuación vamos a añadir una agrupación de campos de tipo “radio”, lo que significa que solo 1 valor del grupo podrá ser seleccionado al mismo tiempo. Tenemos un grupo de tres.

La etiqueta “fieldset” se usa para agrupar elementos relacionados entre sí, dentro de un mismo formulario. Esta etiqueta dibuja una caja alrededor de todos los elementos agrupados.

Con la etiqueta “legend” definimos un título o leyenda para un conjunto de elementos agrupados mediante un fieldset.

En este caso, la etiqueta “label” la estamos usando de manera implícita. No es incorrecto, pero recuerda que lo recomendado es usar la asociación explícita.

Cada opción tiene un texto diferente definido mediante el atributo “value”.

Y por último, el atributo “checked” nos permite especificar qué elemento debe estar preseleccionado cuando la página se carga. Se usa en tipos de input “checkbox” o “radio”. En este grupo, podemos ver que el atributo “checked” está en la primera opción, definiendo por tanto que esta opción debe estar seleccionada cuando se carga la página.

Como podemos observar, ahora tenemos el nuevo campo o agrupación de campos, en el que tenemos tres opciones para seleccionar una prioridad. Este tipo de campo está enmarcado gracias a la etiqueta fieldset, y además debido a que son de tipo radio solo podremos seleccionar una opción cada vez.

A continuación vamos a añadir una agrupación de campos de tipo “checkbox”, que a diferencia de los de tipo “radio”, permite que más de una opción sea seleccionada al mismo tiempo. Actúan individualmente como conmutadores.

Como en el caso de “radio”, se ha usado la etiqueta “fieldset” para agrupar los elementos y la etiqueta “legend” para dar un título a esta agrupación. Además se ha usado la etiqueta “label” de forma implícita. Cada opción tiene un texto diferente definido mediante el atributo “value”, y el atributo “checked” se ha colocado en la primera opción para que sea esta la que esté seleccionada por defecto.

Como podemos observar ahora en el navegador, ha aparecido una nueva agrupación de campos de tipo checkbox, que nos permite realizar una selección de cada una de las opciones individualmente, pudiendo haber más de una opción seleccionada al mismo tiempo. Además mediante la etiqueta fieldset se muestra un marco alrededor de la agrupación de campos.

Con esto, hemos terminado de realizar nuestro formulario en HTML5.

Vamos a recordar un poco todo lo visto en el vídeo.

Hemos visto un campo de tipo text, en el que teníamos un "placeholder" con el que definíamos un texto por defecto, que tenía además un "autofocus" y un "autocomplete".

Después hemos visto una contraseña que tenía definida una expresión regular gracias al atributo "pattern", y además tenía un texto por defecto para ayudar al usuario a saber cómo debe ser el formato que debe poner en el campo de contraseña.

Además teníamos un teléfono, un email y una página web, cada uno con un texto por defecto.

Después teníamos un elemento de tipo "number", que nos permitía incrementar o decrementar el valor hasta un máximo y dentro de un valor mínimo, y mediante saltos de dos en dos.

Además teníamos un campo date, que nos permitía seleccionar una fecha a partir del 16 de julio de 2012.

También teníamos un control de tipo color, que nos permite seleccionar desde una paleta de colores, un color determinado, el que queramos.

Además teníamos un campo de tipo búsqueda, que, dependiendo del navegador que estemos usando, nos mostrará el aspa para eliminar el texto cuando ya hemos escrito algo o nada más poner el foco dentro del campo.

Después teníamos un input de tipo "range" que nos permite definir un rango de valores dentro de un mínimo y un máximo (1 y 10), y luego teníamos una agrupación de campos de tipo radio, que solo permite seleccionar una opción de cada grupo, y una agrupación de campos de tipo checkbox, que nos permite seleccionar más de una opción al mismo tiempo.

Actividad

Crea una página web que contenga un formulario con los siguientes campos de información:

• Nombre, con un control de tipo texto obligatorio y con autofoco.
• Correo electrónico, con un control de tipo email obligatorio.
• URL, con un control de tipo url que muestre la ayuda "Escribe la URL de tu página web personal".
• Fecha, con un control de tipo date.
• Tiempo, con un control de tipo time.
• Fecha y hora, con un control de tipo datetime.
• Mes, con un control de tipo month.
• Semana, con un control de tipo week.
• Número, con un control de tipo number que limite la entrada a un valor entre -10 y 10.
• Teléfono, con un control de tipo tel.
• Término de búsqueda, con un control de tipo search.
• Color favorito, con un control de tipo color.
• Un botón de envío.

Además, tienes que tener en cuenta los siguientes requisitos:

• El título de la página debe ser Formulario de prueba de HTML5.
• El método de envío del formulario debe ser GET.
• El destino del envío del formulario debe ser "".

Nota: si al validar el código HTML de tu página web con el validador del W3C se muestran mensajes de advertencia como The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill. no te preocupes, el validador te está avisando de que lleves cuidado al usar una característica de HTML5 que no está admitida por todos los navegadores actuales.

Nota: por lo anterior, cuando realices esta actividad y compruebes cómo se visualiza tu página web en distintos navegadores es muy probable que obtengas diferentes resultados.