Estructura básica de un fichero HTML5 (ejemplo)
- Lo primero es colocar siempre la declaración de DOCTYPE. Debe estar antes de la etiqueta <html>.
- A continuación hay que incluir el 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> UTF8 sirve para especificar la codificación de caracteres de marcado del documento.
- 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. Existen 6 niveles de encabezado que ayudan a organizar la información de un documento. Se usa 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.
- 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.
Después de la etiqueta <form> se puede incluir un input de tipo “text” para incluir un nombre a rellenar por el usuario, que contiene los siguientes componentes:
- Una etiqueta <label> que define una etiqueta para un elemento input. 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.
- 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 se rellena, el sistema nos avisa de que es un campo de entrada requerido.
También podemos añadir una contraseña obligatoria con un patrón establecido. Es un nuevo campo en nuestro formulario: el campo
Contraseña, de tipo password. Tiene un texto por defecto que definimos con el atributo placeholder. Además, con el atributo required
se define este campo como obligatorio, por lo que el sistema avisará si se intenta enviar el formulario sin haber rellenado este campo. Este nuevo elemento input de tipo “password” (contraseña) 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.
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.
- 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.
Vamos a añadir dos tipos de input más: un tipo “number” y el otro es un tipo "date".
Tendremos dos nuevos campos, el nº de temas (el tipo number) y la fecha de envío (el tipo date).
Tendremos dos nuevos campos, el nº de temas (el tipo number) y la fecha de envío (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 deja disminuir la cifra por debajo de 2. El atributo máximo obliga a tener un máximo permitido de 14, y además con step solo deja moverse en cifras de dos en dos, en este caso, cifras pares.
En cuanto al campo de fecha de envío, si se pulsa se puede ver un calendario en el que se puede 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 deja seleccionar ninguna fecha. Esto se consigue con el atributo min dentro del tipo date.
En cuanto al campo de fecha de envío, si se pulsa se puede ver un calendario en el que se puede 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 deja seleccionar ninguna fecha. Esto se consigue con el atributo min dentro del 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 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 otro tipo de input es “date” con el atributo min para fijar una fecha mínima por defecto.
A continuación vamos a añadir tres campos más: el tipo “color”, el tipo “search” y un tipo “range”.
Uno es el de color, que cuando se pulsa permite seleccionar un color desde una paleta de colores, y al que se había 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.
- El tipo “color” contiene un atributo “value”, que 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 se puede 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, se trata de un campo de búsqueda.
- Y por se ha 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.
Uno es el de color, que cuando se pulsa permite seleccionar un color desde una paleta de colores, y al que se había 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.
Ahora añadimos 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 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.
Por último 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
- La etiqueta “legend” para dar un título a esta agrupación.
- Y se ha usado la etiqueta “label” de forma implícita.
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.
No hay comentarios:
Publicar un comentario