Formularios básicos en HTML

Este tutorial analizará la funcionalidad de los formularios, enfocándose en un pequeño conjunto de controles básicos que los autores de sitios web pueden utilizar para recolectar información ingresada por el usuario.

Concepto

Los formularios en HTML sirven al propósito de recolectar información proporcionada por los visitantes del sitio, la cual es luego enviada nuevamente al servidor. Para su correcto funcionamiento es importante que el formulario provisto en HTML sea acompañado de un código del lado servidor, al que denominaremos "agente procesador", que se encargará de recibir y procesar la información como el autor vea conveniente. Este procesamiento puede consistir en, por ejemplo, el almacenamiento de la información o su envío mediante correo electrónico.

Un formulario (form) es básicamente un contenedor para controles. Cada control en un formulario está pensado para recolectar información ingresada por los usuarios, en formas que pueden ir desde líneas de texto a subida de archvios, pasando por opciones, fechas, contraseñas y mucho más. Una vez que los usuarios han rellenado el formulario con los datos, pueden enviarlo de regreso al servidor para que el agente procesador administre la información recolectada.

El siguiente código muestra la estructura de un formulario, con sus etiquetas de apertura y cierre encerrando un conjunto de controles.

<form>
  [Conjunto de controles]
</form>

Pero este modelo no dice nada acerca de cómo y dónde será procesado el formulario. Tal información puede ser especificada con atributos tales como: action, que indica la ubicación del agente procesador; method que determina el método utilizado para empaquetar el formulario antes de ser enviado al agente procesador; y target, que indica dónde serán mostrados los resultados del proceso. Aquí hablaremos únicamente del atributo action, dejando los otros dos para ser analizados en la referencia del elemento form.

El siguiente formulario ha sido declarado con el URI de un agente procesador que he preparado para propósitos de aprendizaje, en el atributo action. Puedes ver al agente procesador tomando el control del proceso en una nueva ventana cuando envías el formulario.

<form action="../form-result.php" target="_blank">
  <input type="submit" value="Enviar el formulario">
</form>

El envío del formulario ha sido llevado a cabo por un botón de envío. Este tipo particular de control será tratado más adelante en este tutorial.

Controles de texto

Los controles de texto proveen los medios necesarios para recolectar información textual, como nombres, direcciones, frases, mensajes, contraseñas, etc. En las secciones siguientes analizaremos dos de los controles de texto más básicos y utilizados.

Campos de texto de una sola línea

Un campo de texto de una sola línea, que permite el ingreso de una única línea de texto, es uno de los tantos controles que se declaran con el elemento input. En este caso, el elemento input debe tener el valor "text" en su atributo type.

Cuando la tecla ENTER es presionada en este tipo de campos, los navegadores habitualmente envían el formulario que los contiene, en lugar de pasar a una nueva línea del control. Esto se debe a la naturaleza del control que solo acepta una línea de texto.

Con sólo esto, el control ya es visible, pero se necesita de un nombre (en el atributo name) si existe la intención de recolectar la información ingresada por el usuario en este control. El valor del atributo name identificará, en el lado servidor, a los datos ingresados por el usuario en el control. El siguiente ejemplo muestra una implementación básica de un control de texto de una sola línea. Adicionalmente, estaremos encerrando al control y su etiqueta en un párrafo, ya que puede considerarse a estos dos como una unidad con un idea que los separa del resto.

<form action="../form-result.php" target="_blank">
  <p>
    Ingresa tu nombre completo: <input type="text" name="nombrecompleto">
    <input type="submit" value="Enviar la información">
  </p>
</form>

Ingresa tu nombre completo:

Una vez que el formulario es enviado puedes ver claramente en la información mostrada por el agente procesador, cómo la información es recibida del lado servidor. Allí puedes ver también que el nombre (name) declarado para el control es asociado a la información ingresada por el usuario.

Campo de texto multilínea

Este tipo de control es muy similar al anterior, pero tiene la particularidad de permitir el ingreso de mútiples líneas de texto. Un campo de texto multilíea es habitualmente representado como una caja, lo suficientemente alta como para contener más de una línea de texto a la vez. Esta representación, usualmente provee un mecanismo de desplazamiento para permitir a los usuarios ver todo el texto ingresado, especialmente cuando es lo suficientemente largo como para exceder los límites de la caja.

Un campo de texto multilínea se inserta con el elemento textarea. Como anteriormente, el atributo name provee un nombre para el control que ayudará al agente procesador a identificar la información enviada por el usuario.

En el siguiente ejemplo mejoraremos el formulario anterior para permitir al usuario ingresar ambos tipos de cadenas de texto (de una sola línea y multilínea). En el ejemplo propuesto, cada control se adapta mejor al tipo de información que debe recolectar.

<form action="../form-result.php" target="_blank">
  <p>Ingresa tu nombre completo: <input type="text" name="nombrecompleto"></p>
  <p>
    Deja un mensaje:<br>
    <textarea name="mensaje"></textarea>
  </p>
  <input type="submit" value="Enviar la información">
</form>

Ingresa tu nombre completo:

Deja un mensaje:

1234Próx