Formularios

Es una de las partes más importantes del desarrollo web en HTML. Los formularios recogen la información del usuario para guardar en una base de datos o procesar la información con ella.
Para ello, utilizaremos la etiqueta <form> para abrir una sección de formulario.
Dentro de form, encontramos los siguientes atributos:

• method="POST" o method="GET":
Consiste en definir el método de como se va a obtener la información. Si recordamos el protocolo HTTP, GET trabaja con la información usando el enlace URL para el envío de los parámetros, por lo que es la forma más facil para comprobar pero su seguridad es nula.
El uso de POST consiste en enmascarar los parámetros, ofreciendo un punto de seguridad.


• action="":
Consiste en introducir un enlace para redireccionar al usuario en caso de que haya generado un envio del formulario.


• autocomplete:
Permite que los navegadores puedan usar la función de autocompletado de información si el usuario web ha configurado una o más direcciones. Los valores que admiten son on y off

Dentro de los formularios, deduciremos como vamos a recoger los datos. Para ello, existen las etiquetas <input>. Existen varios tipos de input que se utilizan mucho en el desarrollo de un formulario.

• text
: Es el valor predeterminado que utiliza un input aunque no indiquemos el tipo de campo. Recoge un valor de tipo texto. No podemos utilizar saltos de linea ya que no es un campo adecuado para textos largos.

Ejemplo:




• number
: Recoge un valor de tipo numérico. Podemos insertar numeros desde el teclado y del mismo campo utilizando el incremento o decremento mediante las flechas del input.


Ejemplo:




• radio
: El uso de input va dedicado para elegir solo una opción dentro de las posibles.
Destacar como punto importante que el valor name tiene que ser igual para todos los valores.
Veamos en el siguiente ejemplo a código:

<label for="text1">Patatas</label>
<input id="text1" type="radio" name="comida" value="Patatas">
<label for="text2">Manzanas</label>
<input id="text2 type="radio" name="comida" value="Manzanas">

Tenemos dos valores para comida. Un valor llamado Patatas y otro valor llamado Manzanas.
El resultado es el siguiente:

Patatas Manzanas


• checkbox
: Su uso es parecido a radio pero cambia el funcionamiento. Podemos elegir varios valores dentro del rango de opciones.
Veamos en el siguiente ejemplo a código:
Patatas
<input type="checkbox" name="comida" value="Patatas">
Manzanas
<input type="checkbox" name="comida" value="Manzanas">
Cacahuetes
<input type="checkbox" name="comida" value="Cacahuetes">

El resultado es el siguiente:

Patatas
Manzanas
Cacahuetes


• textarea
: No forma parte de un input pero podemos asimilar como tipo de input. Orientado a introducir descripciones.
La forma de poner textarea es la siguiente:

<textarea>"Hola, soy una descripción"</textarea>

Algunos de los atributos importante para su uso:

• placeholder:
Añadir texto para informar al usuario.

• readonly:
Campo de texto solo lectura. No se permite modificar en él.

• maxlength: Máxima longitud de caracteres que el usuario puede insertar.
• minlength: Mínimo longitud de caracteres que el usuario puede insertar.
• autofocus: El elemento coge el curso después de cargar la página.
• required: Campo requerido para introducir información.



Vamos a poner el siguiente ejemplo. Disponemos del siguiente código:



El resultado es el siguiente donde tenemos que introducir frases entre 10 y 20 caracteres con una información que nos indica introducir información. Con autofocus, no es necesario pulsar al elemento.




• search
: Campo de texto dirigido para realizar busquedas. Al igual que textarea, podemos aplicar atributos como placeholder, maxlength, minlength o readonly.
También disponemos de otros atributos a destacar:

• size:
Ancho del campo de busqueda. Por defecto, el tamaño de un campo de busqueda es de 20.

• autocorrect
: Permite si se activa o no la corrección de lo que el usuario vaya introduciendo en el campo. No es un atributo usado porque hoy en día, existen extensiones en los navegadores que sustituyen a este atributo.

• datalist
: Podemos dar valores por defecto para introducir como valor en el campo de busqueda


En el siguiente ejemplo, utilizaremos el atributo list, importante ya que nos viene bien para ayudar a realizar la busqueda de forma rápida.



De esta forma, conseguiremos un cuadro de busqueda. Si seleccionamos, aparecerán los cuatros valores como opciones posibles de busqueda.






• password
: Tipo de campo destacado para introducir contraseñas ya que enmascarar la cadena en asteríscos. Gracias a la version HTML5, podemos dar complejidad:

• pattern
: Podemos establecer una expresión obligatorio para la contraseña. Dicha expresión, establecemos los requisitos para una contraseña.

En el siguiente ejemplo, establecemos un nuevo input de tipo password requerido que cumpla con la expresión de contenido de letras mayúsculas, minusculas y números y que la longitud sea entre 8 y 11 caracteres.



El resultado es el siguiente:


Contraseña:
• file
: Campo que permite adjuntar y enviar ficheros en un formulario. Para que un formulario envíe ficheros, debemos de incluir el siguiente atributo:


• enctype="multipart/form-data
: Consiste en qu el formulario pueda realizar el control de ficheros enviados. Dependiendo del lenguaje que utilizemos, utilizaremos metodos para su lectura o escritura.
• accept:
Indicación de formatos compatibles para recibir el fichero.
Pueden ser .doc, image/* (formatos de imagenes), video/*(formatos de video) o application/.exe(aplicacion del servidor).

• multiple:
Permite seleccionar y subir más de un fichero.

En el siguiente ejemplo, vamos a realizar un input de tipo file que pueda recoger más de un fichero y que sea requerida para el usuario. Permitirá recoger formatos de imagen.
El codigo es el siguiente donde hay que dar importancia al atributo enctype en la etiqueta form para que pueda controlar ficheros.



El resultado es un boton donde pulsaremos en él para enviar ficheros. Para ello, se nos abrirá una ventana del explorador de archivos de nuestro sistema. Para seleccionar varios ficheros, pulsaremos Ctrl y seleccionaremos ficheros con nuestro cursor del ratón.


Subir imágenes

• email:
Campo de tipo texto especifico para recibir emails. De esta forma, la validación de email se realiza automáticamente.
En cuanto a los atributos, utiliza los siguientes:


• pattern:
Validación de email con una expresión.

• placeholder:
Texto de ejemplo como valor en email.

• maxlength y minlength
: Máximo y mínimo de caracteres.

• multiple
: Para introducir varias direcciones de correo, utilizaremos el caracter ',' para separar las direcciones de correo.

Veamos el siguiente ejemplo donde tenemos un campo email que permita solo dominios .es y que pueda recoger multiples direcciones de correo:



El resultado es el siguiente donde introduciremos nuestro correo con dominio .com y utilizaremos el separador.


Introduce su email




• tel:
Campo de texto específico para recoger un número de telefono. Para ello, se utilizará expresiones como en el siguiente ejemplo donde el requisito es que el número de telefono empieze por 6(movil) o 9(fijo).




Telefono fijo o movil:

• date,dateweek y week
: Analizaremos estos tres tipos de input basados en la representación de una fecha.
• date:
Recoge el día, mes y año. Si queremos limitar con un rango de fechas, utilizaremos los atributos min y max con el formato "año"-"mes"-"dia".



El resultado es el siguiente donde utilizaremos una fecha comprendida entre el año 2000 y 2020




• datetime-local
: Permite ingresar la fecha y el tiempo (hora,minuto, segundo y decimas). El formato debe ser UTC. Cabe destacar que datetime no funciona en los principales navegadores. Datetime es solo compatible con opera y safari. Se recomienda el uso de datetime-local por mayor compatibilidad en navegadores (Firefox).

Importante que los valores que recoge los atributos deben ser compatibles con UTC. Para ello, añadiremos la fecha y la hora, unidos con el caracter "T".






• week
: Recoge la fecha y el número de la semana:

En este caso, para los valores max y min se introducen el formato "año"-"W + numero semana del año"







• color:
Tipo de input especial ya que recoge el valor de un color. El valor que recogerá es de tipo hexadecimal y no podemos utilizar otro formato como rgb o rgba.

Los atributos que se puede indicar son list y autocomplete.
El siguiente ejemplo se va a poner un input tipo color que dispone de un valor por defecto y que incluimos una lista con cuatro colores por defecto.
Codigo:



Resultado:




• range:
Tipo de input especial y destacado por elegir un valor mediante una barra de control. Esta barra puede ser de distinto diseño en función del navegador que estemos usando. Podemos aplicar atributos como max,min o list.

En el siguiente ejemplo, tenemos una barra para seleccionar un valor, aplicando un valor mínimo y máximo. También aplicaremos una lista de valores por defecto.



Acercando el boton a un valor por defecto, inmediatamente el boton coge dicho valor lo que puede ayudar a coger varios valores sin tener buena vista.