¿Qué es un formulario?

Un formulario engloba un conjunto de campos que son enviados para ser procesados generalmente en el servidor web. A continuación veremos los tipos de etiquetas que tiene un formulario y sus atributos.

Etiqueta <form>

Con esta etiqueta le decimos a HTML que vamos a crear un formulario (sin esta etiqueta el formulario no funciona).

La etiqueta Form tiene varios atributos que son:

name

Con este atributo le establecemos un nombre a nuestro formulario.

action

Con este atributo le establecemos la url del fichero donde procesa la información del formulario.

method

Con este atributo le establecemos el método HTTP que el navegador usará para enviar el formulario. A este atributo le podemos establecer:

• post: Los datos del formulario son incluidos en el cuerpo del formulario y son enviados al servidor.
• get: Los datos del formulario son adjuntados a la url y esa url es la que se envía al servidor.

autocomplete

Con este atributo indicamos cuales son los controles del formulario, es decir que sean los valores autocompletados por el navegador o no. En este atributo podemos establecer:

• off: El usuario deberá de ingresar explicitamente cada valor dentro de cada campo.
• on: El navegador ayudará a autocompletar ese campo si previamente el usuario ha ingresado entradas previas a ese formulario.

Etiqueta <Label>

La etiqueta Label nos permite etiquetar de forma formal un campo de un formulario.

La etiqueta Label tiene varios atributos que son:

for

Con este atributo podemos enlazar la etiqueta con el campo. Para que eso suceda, debemos de escribir mismo id del campo que queremos que se seleccione.

Etiqueta <Input>

La etiqueta Input nos permite solicitarle a usuario información. En HTML podemos solicitar la información al usuario de muchas forma diferentes usando el atributo type.

La etiqueta Input tiene varios atributos que son:

placeholder

Con este atributo podemos establecer un texto que aparecerá encima del campo mientras esté vacío. Se suele usar para ayudar al usuario indicando que tiene que hacer o poniendo un ejemplo.

required

Con este atributo podemos definir si ese campo va a ser obligatorio o no rellenarlo.

pattern

Con este atributo podemos validar el tipo de contenido que accepta el campo.

min y max

Con min podemos establecer el mínimo de carácteres que debe de tener ese campo.

Con max podemos establecer el máximo de carácteres que puede tener ese campo.

step

Con este atributo podemos definir los saltos que se darán en ese campo.

disabled

Con este atributo establecemos si el campo está activado o desactivado. Podemos establecer true(desactivado) o false(activado).

autofocus

Con este atributo definimos que campo obtiene el foco, es decir el campo donde se colocará el cursor automáticamente al cargar la página. Si queremos que ese campo tenga el foco escribimos el valor del atributo en true.

autocomplete

Con este atributo podemos establecer si ese campo se rellene automaticamente con el navegador o no.

type

Este es el atributo más importante de todo el input. Con este atributo definimos el tipo de campo. Actualmente en HTML hay todos estos tipos de campos:

• text: El más común de todos, este campo sirve para escribir un texto.
• search: Definimos que el campo es de tipo búsqueda, de modo que se puede resaltar en los motores de búsqueda.
• password: Definimos que el campo es de tipo contraseña encriptando los caracteres enmascarandolos con asteriscos.
• number: Definimos que el campo es de tipo numérico (solo podemos escribir números).
• file: Definimos que en este campo, el usuario pueda enviar ficheros de todo tipo.
• url: Campo de tipo texto, que solo nos dejará escribir valores con el formato de URL.
• email: Campo de tipo texto, que solo nos dejará escribir valores con el formato de EMAIL.
• tel: Campo de tipo número, que solo nos dejará escribir valores con el formato de un número de teléfono.
• date: Definimos que el campo es de tipo fecha, permitiendo que el usuario seleccione una fecha de una forma fácil con el calendario que se muestra.
• time: Definimos que el campo es de tipo tiempo, permitiendo que el usuario seleccione una hora y los minutos.
• datetime: Es una combinación de el campo date y time, permitiendo seleccionar una fecha y una hora.
• week: Otro campo de tipo texto, que nos va a permitir seleccionar una semana del año.
• month: Campo de tipo texto, donde podemos seleccionar un mes de año y un año concreto.
• color: Campo de tipo color, nos permite seleccinar un color de la rueda cromática.
• range: Definimos que el campo es de tipo rango, mostrando una barra para seleccionar un valor dentro de un rango.

También existe la etiqueta textarea que se usa de forma independiente sin el atributo type. Esta etiqueta permite insertar una caja de texto para escribir.

Etiquetas <Fieldset> y <Legend>

Con la etiqueta Fieldset establecemos una sección en un formulario y con la etiqueta Legend le establecemos un nombre a esa sección.