Introducción

Un formulario es un documento, ya sea físico o digital, diseñado con el propósito de que el usuario introduzca datos estructurados (nombre, apellidos, dirección, etc.) en las zonas del documento 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, los cuales 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.

Introducción

En un formulario se pueden integrar:

• Cajas y zonas de texto
• Listas de selección
• Opciones
• Casillas de verificación
• Botones

Introducción

Existen diferentes maneras de procesar la información:

• Lenguajes en el servidor (PHP, Perl, Pyton, Ruby, ..). Envío a una web


• CGI (Common Gateway Interface). Envío a un ejecutable


• MAILTO. Envío a una dirección de correo electrónico

Introducción

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

Introducción

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

Exige un requisito que hace que la hace poco útil:

En el ordenador del usuario se precisa 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, ...)

Etiqueta form

La etiqueta <form> define un formulario y su cierre es mediante </form>. Entre ambas etiquetas se colocan los elementos o controles que se muestran más adelante. Para configurar el comportamiento de un formulario se disponde de los siguientes atributos:

• name e id
• action
• method
• enctype

Etiqueta form

name e id

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

<form name="registro001" id="registro001"... >

Ejemplos:

Para realizar validaciones Javascript antes del envío a un servidor, se emplea name


Para capturar desde PHP los valores enviados desde un formulario, se emplea name

Para aplicar hojas de estilo, funciones Javascript o para AJAX, se utiliza id

Etiqueta form

action

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

La acción (para quien no sepa PHP) consiste en enviar la información por correo electrónico, utilizando mailto:

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

Lo lógico sería enviar los datos a un script en lenguaje PHP

    <form action="gestion.php">

Etiqueta form

method

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

    <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"

Etiqueta form

enctype

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

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

Habitual usar texto plano, excepto para binarios (imagen, pdf, ...)

Etiqueta input

La etiqueta input es esencial para los formularios Se usa para crear elementos “interactivos” La sintaxis de esta etiqueta es la siguiente:

<input type="Tipo del campo" value="Valor predeterminado" name="Nombre del elemento">

El atributo name es imprescindible, permite al script reconocer qué campo está asociado con un par nombre/valor, lo que significa que el nombre del campo estará seguido de un signo igual ("=") seguido de un valor que el usuario introdujo, o si el usuario no dio ningún valor, por el valor predeterminado de la etiqueta value

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). Cuando la casilla es seleccionada, el par nombre/valor se envía
• 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 ubica una imagen en la ubicación definida por el atributo SRC

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

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

Etiqueta input

select

Sirve para crear una lista desplegable de elementos (especificados por las etiquetas option dentro de ella). Atributos de esta etiqueta:

• name: 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

Ejemplo formulario

Ejemplo formulario

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de formulario en sitio web. DAWEB. Rafael Barzanallana</title>
</head>
<body>
<center>
  <form action="MAILTO:barzana@um.es" method="post" enctype="text/plain">
    <table border="1" width="70%">
      <tbody><tr> 
        <td>Nombre</td>
        <td> 
          <input name="nombre" size="25" maxlength="50" type="text">        </td>
      </tr>

Ejemplo formulario

 
      <tr>      
              <td>Apellidos</td>
        <td> 
          <input name="apellidos" size="25" maxlength="50" type="text">        </td>
      </tr>
      <tr> 
        <td>e-mail</td>
        <td> 
          <input name="correo" size="30" maxlength="100" type="text">        </td>
      </tr>
      <tr>
              <td>Contraseña</td>
        <td> 
          <input name="contraseña" size="8" maxlength="8" type="password">        </td>
      </tr>

Ejemplo formulario

      <tr> 
        <td>Valora la documentación</td>
        <td> 
          <input name="opinion" value="buena" checked="" type="radio">
          Buena 
          <input name="opinion" value="normal" type="radio">
          Normal 
          <input name="opinion" value="mala" type="radio">
          Mala </td>
      </tr>
      <tr> 
        <td>¿Qué secciones te gustaron?</td>
        <td> 
          <p> 
            <input name="seccion1" value="si" type="checkbox">
            Seccion 1</p>
          <p> 
            <input name="seccion2" value="si" type="checkbox">
            Seccion2</p>
          <p> 
            <input name="seccion3" value="si" type="checkbox">
            Seccion 3</p>
          <p> </p>        </td>
      </tr>

Ejemplo formulario

      <tr> 
        <td>Zona de residencia:</td>
        <td> 
          <select name="continente">
            <option value="america">América</option>
            <option value="europa">Europa</option>
            <option value="africa">África</option>
            <option value="asia">Asia</option>
            <option value="oceania">Oceanía</option>
          </select>        </td>
      </tr>
    </tbody></table>
    <p> 
      <input name="enviar" value="Enviar" type="submit">
      <input name="borrar" value="Borrar" type="reset">
    </p>
  </form>
</body>
</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

Agrupación en formularios

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

Software formularios

cPanel (control Panel o Panel de control) es una herramienta de administración basada en tecnologías web para gestionar sitios de manera fácil, con una interfaz limpia. Se trata de un software no libre disponible para Linux

Otras herramientas semejantes, aunque menos conocidas son:

DirectAdmin

InterWORx

plesk

Gestores de scripts:

Fantastico de Luxe

Installatron

Softaculous

Incluyen varios programas para gestionar formularios