Cómo se escribe una página web bien estructurada

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 se ha enviado si no es válido y, por otro lado, permite informar al usuario de que alguno de los valores introducidos no cumple con 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 Plus Plus, 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 de ser la estructura básica de nuestro fichero HTML5. Lo primero que debemos colocar siempre es la declaración de DOCTYYPE. 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 estará 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 script, estilos, meta información, etcétera.

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ñada 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 seis 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 for 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, fillset, datalist, output y ladel. 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, en 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 contenidos 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 la etiqueta para el 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ándola a través del atributo for, de la etiqueta label corresponde. 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. También tenemos 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 nos aparece el autocompletado con otros textos que hemos introducido en este campo anteriormente y, además, intentaremos enviar el formulario sin escribir 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 qué formato es el correcto en 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 nuestro formulario. Es 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 ha dejado enviarlo ya que no contenía ningún error.

A continuación, vamos a añadir tres tipos nuevos de input, en nuestro formulario. Un tipo de input tel, un tipo de input email y un tipo de input url. Los tres con un texto o 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 tres 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 electrónico 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 de correo electrónico correcta, el sistema nos permite enviar el formulario.

A continuación, vamos a añadir dos tipos de input más, uno es un tipo de input number y el otro es un tipo de input date. En el tipo de input number, podemos ver los siguientes atributos, un atributo min y max para fijar los valores mínimo y máximo respectivamente, permitidos dentro del 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, su valor es 2. Y, como su valor mínimo es 2, los valores válidos para este campo serían 2, 4, 6, 8, 10, 12 y 14.

El siguiente tipo de input que hemos definido es un tipo de input date, un atributo min para fijar una fecha mínima por defecto. Como podemos observar ahora, tenemos estos dos nuevos campos, el número de temas, que era el tipo number y la fecha de envío que era el tipo date. En el caso del número de temas, tenemos un valor por defecto definido, el de 2, mediante el atributo placeholder. Además, tenemos un mínimo y un máximo, por lo tanto, no me deja disminuir la cifra por debajo de 2. El atributo máximo me obligaba a tener máximo permitido de 14 y además con step, podemos comprobar que solo nos deja movernos con 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 del 16 de julio, 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 de input date.

A continuación, vamos a añadir tres campos más a nuestro formulario, un tipo de campo de input color, un tipo de input search y un tipo de input range. En el caso de color, tenemos el atributo value, que nos permite especificar el valor por defecto del elemento. Su tipo de valor difiere según el tipo de input, por ejemplo, value, para color, especifica el código hexadecimal del color por defecto, pero, por ejemplo, en el tipo submit, como podemos ver en el botón de Enviar, lo que define 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 tipo de input range, que es un tipo de campo con un rango específico de valores delimitado en este caso por los valores mínimo de 1 y máximo de 10. 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 dentro de 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 empezamos 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 en 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 un valor del grupo podrá ser seleccionado al mismo tiempo. Tenemos un grupo de 3, dónde la etiqueta fillset se usa para agrupar elementos relacionados entre sí, dentro del mismo formulario, esta etiqueta dibuja una caja alrededor de todos los elementos agrupados. Con la etiqueta legend, lo que definimos es un título o leyenda para el conjunto de elementos agrupados mediante el fillset. En este caso la etiqueta label, como podéis observar, la estamos usando de manera implícita. No es incorrecto, pero recuerda que lo recomendado es usar la asociación explícita. Cada una de las tres opciones tiene un texto diferente definido mediante el atributo value. Y por último, el atributo check, 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 check está en la primera opción, definiendo por tanto que esta opción será la que estará seleccionada cuando se carga la página. Como podemos observar, ahora tenemos el nuevo campo o agrupación de campos en la 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. A diferencia de los de tipo radio, estos tipos de input permiten que haya más de una opción 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, 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 check se ha colocado en la primera opción para que sea ésta la que esté seleccionada por defecto. Como podemos observar ahora en el navegador, ha aparecido un nuevo campo o agrupación de campos, de tipo check 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. Para recordar un poco todo lo que hemos visto, hemos visto un campo de tipo text, en el que teníamos un placeholder, un texto por defecto, tenía 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 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 dentro de una paleta de colores un color determinado, el que queramos. Además, teníamos un campo de tipo búsqueda que, dependiendo un poco del navegador que estemos usando, nos mostrará el aspa para eliminar el texto cuando hemos escrito 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 dentro de un mínimo y un máximo, entre 1 y 10 y, luego, teníamos una agrupación de campos de tipo radio que solo permiten seleccionar una opción de cada grupo y una agrupación de campos de tipo checkbox que nos permitían seleccionar más de una opción al mismo tiempo.

Espero que toda esta información te sea muy útil. Muchas gracias por tu atención y hasta pronto.