Ejemplos Formularios Web

Categories:

Una vez que agrupamos los campos del formulario según su función y que revisamos los métodos de envío de datos vamos a ver un ejemplo de formularios utilizando cada uno de los métodos de envío.

Antes de pasar a los ejemplos vamos revisar los usos comunes de cada grupo de campos.

Campos Básicos

Tipo Visualización Usos comúnes
Llaves primarias al editar un registro.
Campos con métodos de envío distintos a GET / POST.

Ej. _put, _patch, _delete

Tokens de seguridad asociados al formulario – para que, cuando se reciba el formulario, se verifique la existencia del token y el valor -.
Cualquier valor de texto menor a 255 caracteres.
Contraseña y confirmación de la contraseña.
input type=’file’ Adjuntar archivo(s).

El formulario necesita tener establecido el atributo enctype=”multipart/form-data”
El formulario debe ser enviado con el método POST.
El script de procesamiento obtiene los datos y el archivo con la variable $_FILES.
Cualquier valor de texto mayor a 255 caracteres.

Campos Excluyentes

Tipo Visualización
input type=’radio’
Elegir un valor de texto entre 2 o máximo 3 opciones.

Por ejemplo elegir un método de pago, una dirección de envío, etc.

Aunque se pueden incluir más de 3 opciones visualmente puede degradar la experiencia de usuario.
select Elegir un valor de texto entre más de 3 opciones.

Por ejemplo elegir un registro con el cuál se quieren asociar los datos que se muestran en el formulario (1:M).

Aunque se pueden incluir 1 o 2 opciones se puede degradar la experiencia de usuario.

Campos Incluyentes

Tipo Visualización Usos comúnes
input type=”checkbox”



Asociar los datos del formulario que se está llenando con muchos registros que se muestran como opciones (M:M).
Utilizar como método para validar la aceptación de políticas y / o términos.
Select con atributo “multiple” Uso similar al de input[type=”checkbox”]
En Windows / Linux:
Presionar CTRL al momento de seleccionar una opción para marcar / desmarcar.
En OS X (macOS):
Presionar CMD al momento de seleccionar una opción para marcar / desmarcar.

Acciones

Tipo Visualización Usos comúnes
input type=’submit’ Enviar los valores de los campos del formulario hacia el archivo especificado en el atributo action del mismo.
input type=’button’ Visualizar un botón dentro del formulario.
La funcionalidad se incluye con JavaScript.
input type=’image’ Misma funcionalidad que input[type=”submit”].
Incluir el atributo src con la ruta hacia una imagen.
El valor del atributo value no va a ser visualizado.

Campos introducidos en HTML5

De manera general los siguientes campos funcionan como input[type=”text”]:
input[type=”email”], input[type=”url”], input[type=”search”], input[type=”color”], input[type=”number”]
Este tipo de campos los incluyo con los “campos básicos” porque el valor introducido en los campos depende del usuario. En los campos excluyentes / incluyentes somos nosotros – como desarrolladores – quienes tenemos que incluir las opciones que visualizan para elegir.

Tipo Visualización Usos comúnes
input type=’email’ Incluye validación para que el valor tenga el formato de una dirección de correo electrónico.
input type=’url’ Incluye validación para que el valor tenga el formato de una URL.
input type=’search’ Al momento de llenar el campo aparece un icono para borrar el contenido.
input type=’color’ Al presionar el botón se visualiza un selector de color.
input type=’number’ Incluye validación para que el valor sea un número.
Se pueden especificar los valores mínimo y máximo con los atributos min / max.
Se puede especificar el incremento con el atributo step.
input type=’range’ Los valores permitidos son números – similar a input[type=”number”] -.
Se pueden especificar los valores mínimo y máximo con los atributos min / max.
Se puede especificar el incremento con el atributo step.
La visualización es de un slider – control deslizante -.
input type=’date’ Permite especificar la fecha directamente en el campo.
Al presionar el control de la izquierda (tache) se borran los valores establecidos
Al presionar control central (flechas) permite aumentar / disminuir el valor para el mes, día o año.
Al presionar el control de la derecha (triángulo)se visualiza un componente para seleccionar la fecha.
input type=’month’ Permite especificar el mes y año en el campo.
Cuenta con controles similares a input[type=”date”]
input type=’week’ Permite especificar la semana y año en el campo.
Cuenta con controles similares a input[type=”date”] pero incluyen la semana.
input type=’time’ Permite especificar hora y minutos directamente en el campo.
Al presionar el control de la izquierda (tache) se borran los valores establecidos
Al presionar control central (flechas) permite aumentar / disminuir el valor para las horas o minutos.

input type=’datetime’ Aunque existe, al parecer no hay soporte para este campo –
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input/datetime.
input type=’datetime-local’ Permite especificar la fecha y hora directamente en el campo.
Cuenta con controles similares a input[type=”date”].

Ya que vimos los usos comunes puedes descargar el archivo formularios.zip

Este archivo tiene cuatro archivos php – recuerda que, para que funcionen los ejemplos, tienes que descomprimir la carpeta dentro de una ubicación accesible al servidor web -.

Al visitar 01.formulario.get.php / 03.formulario.post.php se debe de visualizar un formulario como el de la imagen siguiente.
La diferencia entre los archivos radica en el método de envío y recepción de los datos.

Al enviar los valores se debe de visualizar el tipo de campo junto al valor que se envío – en la imagen envié el formulario sin llenar, el campo oculto tiene un valor asignado y otros campos tienen valores asignados de manera predefinida -.

Nota
Estos ejemplos no consideran el envío de archivos aún cuando se haya incluido el campo, sólo es una referencia de cómo se visualiza del lado del cliente.

El comprender cómo fluyen los datos nos va a servir al momento de implementar nuestra funcionalidad.