Formularios en HTML

Desarrollo de Aplicaciones Web

Formularios en HTML

Contenido:


  1. Formularios en HTML
  2. Ejemplos de formularios
  3. Utilidades para formularios

Formularios en HTML

Formularios

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 un formulario se pueden integrar:


  • Cajas y zonas de texto


  • Listas de selección


  • Opciones


  • Casillas de verificación


  • Botones


  • Formularios

    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, Pyton, Ruby, ..). Envío a una web


  • Formularios

    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 facilmente al motor de base de datos MySQL


  • Formularios

    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

    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

    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="reg001" id="reg001"... >



  • 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

    Etiqueta form: action

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


    La acción (si no se emplea 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="nombre_programa.php">

    Formularios

    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

    • GET 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

    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

    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

    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

    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

    Etiqueta input: 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

    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

    Un <fieldset> puede adicionalmente tener un título, mediante el elemento <legend>. En tal caso, el elemento <legend> debe ser el primer hijo de <fieldset> Un <fieldset> puede estar opcionalmente deshabilitado, al establecerse el atributo booleano <disabled> en el elemento. Cuando un <fieldset> es deshabilitado, todos sus hijos se deshabilitan.

    Ejemplos de formularios

    Ejemplos de formularios

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

    Ejemplos de formularios

    Ejemplo de formulario. DAWeb

    Acceso al formulario real

    Utilidades para formularios

    Utilidades para formularios

    Software formularios

    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):


    Utilidades para formularios

    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

    • Zittly herramienta para recopilar opiniones mediante chatbots. Su funcionamiento es de lo más intuitivo.

    • chatform.ai el objetivo principal que pretenden sus creadores es convertir encuestas en conversaciones para apps de mensajería,