Espera por favor...

Formularios en HTML
Introducción

Un formulario es un documento, ya sea físico o digital, diseñado con el objetivo de proporcionarle datos estructurados (nombre, apellidos, dirección, etc.) en determinadas zonas destinadas a ese propósito, para ser almacenados y procesados posteriormente.

En informática, un formulario consta de un conjunto de campos de datos solicitados por un determinado programa, que se almacenarán para su procesamiento y posterior uso. Cada campo debe albergar un dato específico, por ejemplo, el campo "Nombre" debe rellenarse con un nombre personal; el campo "Fecha de nacimiento" debe aceptar una fecha válida, etc.

Formularios en HTML
Composición

En un formulario se pueden integrar:
  • Cajas y zonas de texto
  • Listas de selección
  • Opciones
  • Casillas de verificación
  • Botones

Formularios en HTML
Procesado

.
Existen diferentes maneras de procesar la información:

  • CGI (Common Gateway Interface). Envío a un ejecutable
  • MAILTO. Envío a una dirección de correo electrónico
  • Lenguajes en el servidor (PHP, Perl, Python, Ruby, ..). Envío a una web

Formularios en HTML
PHP

PHP es un lenguaje parecido a C, que permite escribir scripts ejecutables en un servidor web. Ventajas de PHP frente otros lenguajes Web de servidor:
  • Software libre
  • Esta muy difundido en internet
  • Convive con el código HTML
  • Permite acceder fácilmente al motor de base de datos MySQL

Formularios en HTML
Correo electrónico

El correo electrónico es la forma más fácil de procesar un formulario.

Exige un requisito que lo hace poco útil:
  • En el equipo del usuario es necesario un cliente de correo configurado (Thunderbird, Evolution, ..)
  • No todos los usuarios leen el correo mediante una aplicación de este tipo
  • La mayoría utiliza correos tipo webmail (Yahoo, Gmail, GMX, ...)

Formularios en HTML
Etiqueta form

La etiqueta <form> define un formulario y su cierre es mediante </form>. Entre ambas se colocan los elementos o controles que se muestran más adelante.

Para configurar el comportamiento de un formulario se dispone de los atributos:
  • name e id
  • action
  • method
  • enctype

Formularios en HTML
Etiqueta form: name e id

Para que el código pueda interactuar con un formulario se ha de poner nombre a todo, mediante los atributos name e id. Operan como nombres de variable

    Sintaxis: <form name="reg01" id="reg01"... >

  • Para realizar validaciones Javascript antes del envío al servidor, se usa name
  • Para capturar en PHP los valores enviados desde un formulario, se usa name
  • Para aplicar hojas de estilo, funciones Javascript o AJAX, se utiliza id

Formularios en HTML
Etiqueta form: action

    Especifica la acción a realizar cuando se envía el formulario

    La acción (si no se usa PHP) consiste en enviar la información por correo electrónico, utilizando mailto:

    Sintaxis: <form action="mailto:info@um.es">

    Lo habitual es enviar los datos a un script en lenguaje PHP

    Sintaxis: <form action="programa.php">

Formularios en HTML
Etiqueta form: method

Especifica la forma de envío del contenido del formulario {POST|GET}:

Sintaxis:
<form method="POST">
<form method="GET">

  • GET envía las variables del formulario junto a la url de la página indicada en el atributo action. Proceso análogo a como lo hace el buscador Google
  • POST envía las variables de forma oculta. Permite envíos a través de "mailto"

Formularios en HTML
Etiqueta form: enctype

    Especifica el formato de empaquetado para los datos del formulario {text/plain|multipart/form-data}

    Sintaxis:
    <form enctype="text/plain">
    <form enctype="multipart/form-data>

    Lo habitual es usar texto plano, excepto para binarios (imagen, pdf, ...)

Formularios en HTML
Etiqueta input

    El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web, que reciban datos del usuario. La forma en que <input> funciona varía considerablemente dependiendo del valor de su atributo type.

    Los elementos de formulario como botones y cuadros de texto también se denominan "campos de formulario" y "controles de formulario". La mayoría de controles se crean con la etiqueta <input>, por lo que su definición formal y su lista de atributos es muy extensa.

Formularios en HTML
Etiqueta input: type

Indica qué tipo de elemento se representa con la etiqueta input. Valores posibles:

  • checkbox: Las casillas de elección pueden adoptar uno de dos estados: checked (seleccionado) o unchecked (no seleccionado).
  • hidden: El navegador no lo muestra, sirve para definir una configuración única que se enviará como par nombre/valor
  • file: Permite al usuario especificar una ruta de archivo que lleva al fichero que se enviará con el formulario. Los tipos de archivo que pueden ser enviados deben especificarse utilizando el atributo ACCEPT de la etiqueta <form>
  • image: Botón de envío personalizado que aparece cuando se situa una imagen en la ubicación definida por el atributo SRC

Formularios en HTML
Etiqueta input: type

  • password: Casilla donde los caracteres escritos aparecen como asteriscos para camuflar el texto
  • radio: Botón que permite elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name. Se enviará el par nombre/valor del botón radio seleccionado. Al aplicar el atributo checked para uno de estos botones se definirá como seleccionado de forma predeterminada
  • reset: Botón para eliminar todos los elementos en el formulario y restablecer sus valores predeterminados
  • submit: Botón para enviar el formulario. El texto en el botón puede definirse usando el atributo value
  • text: Casilla para escribir una línea de texto. El tamaño puede definirse usando el atributo size y la extensión máxima del texto con el atributo maxlength

Formularios en HTML
Etiqueta input: textarea

Se usa para definir un cuadro de texto más grande que la línea simple. Tiene los siguientes atributos:
  • cols: Número de caracteres que puede contener una línea.
  • rows: Número de líneas
  • name: Nombre asociado con el cuadro de texto, que permite su identificación en el par nombre/valor
  • readonly: Impide que el usuario modifique el texto predeterminado
  • value: Valor predeterminado que se enviará al script si el usuario no ha escrito nada en el cuadro

Formularios en HTML
Etiqueta select

Sirve para crear una lista desplegable de elementos (especificados por las etiquetas option dentro de ella). Atributos de esta etiqueta:
  • name: Nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor
  • disabled: Lista desactivada, aparece atenuada
  • size: Número de líneas de la lista
  • multiple: Permite al usuario seleccionar varios campos

Formularios en HTML
Etiqueta label

El lenguaje HTML incluye una etiqueta denominada <label> y que se utiliza para establecer el título de cada campo del formulario. Se emplea para definir el título o leyenda de los campos definidos en un formulario
    Ejemplo, el nombre de los campos de formulario incluido mediante un texto normal:

    Nombre
    <input type="text" name="nombre" value="" />

    y utilizando la etiqueta <label>, cada campo de formulario puede disponer de su propio título:

    <label for="nombre">Nombre</label> <br/> <input type="text" id="nombre" name="nombre" value="" />

Formularios en HTML
Agrupación en formularios

Puede ser útil en formularios grandes, donde la legibilidad y la facilidad de acceso pueden ser mejoradas con la segmentación
  • fieldset: Agrupa de forma lógica varios campos de un formulario
  • legend: Define el título o leyenda de un conjunto de campos de formulario agrupados con la etiqueta fieldset

Formularios en HTML
Ejemplo de formularios

Enlace al ejemplo del curso "HTML & CSS: Curso práctico avanzado". Universidad de Alicante

Formularios en HTML
Ejemplo de formularios

Ejemplo de formulario. DAWeb

Acceso al formulario real

Formularios en HTML
Software de formularios

Los servicios de alojamiento suministran programas para gestionar formularios, de forma que nos evitan todo el trabajo de codificación. Se indican algunos servicios que los incluyen.

cPanel es una herramienta de administración basada en tecnologías web para gestionar sitios, con una interfaz limpia. Software no libre, disponible para Linux
Otras herramientas semejantes, aunque menos conocidas son:
Gestores de scripts (incluyen programas de gestión de formularios):

Formularios en HTML
Chatbots

Con los chatbots es posible llamar la atención de los usuarios y conseguir que den respuesta a cuestiones de una forma más sencilla para ellos: manteniendo una conversación con un bot.
Se indican tres herramientas para reemplazar formularios con chatbots:
  • Tars permite crear todo tipo de bots, desde los orientados a la atención al cliente hasta aquellos encargados de recoger opiniones, pasando incluso por bots educativos
  • chatform.ai el objetivo principal que pretenden sus creadores es convertir encuestas en conversaciones para apps de mensajería. En Producthunt se muestran diversas alternativas a chatform.ai

Búsquedas en UMU

Búsquedas sobre informática