E-cursos / Curso de HTML 4.01 / Internet para vos - Desarrollo web

13. Formularios

13.1 Etiqueta FORM. Generalidades

Los formularios tienen la finalidad de recoger los datos que nos interesan sobre nuestros visitantes.

Decimos que hay dos formas de procesar la información del formulario: la más simple es recoger los datos y que se envíen por e-mail mediante el programa predeterminado de correo electrónico del usuario; la segunda consiste en ejecutar un script (javascript, ajax, php, asp, cgi) que procese los datos en el servidor y luego los envíe al correo del administrador del sitio.

Si utilizamos alguna de las opciones con scripts y bases de datos, es posible almacenar la información de los formularios para realizar acciones de marketing.

La estructura general de un formulario es la siguiente:

<form action"mailto:e-mail" method="post" enctype="text/plain">
      Cuerpo del formulario con los campos (datos) que contendrá.
</form>

La etiqueta form es la que engloba todos los elementos del formulario. Tiene cierre.

Atributos de la etiqueta FORM:

Atributo	Descripción	Ejemplo
action	Acción que se realizará al presionar el botón Enviar. En este ejemplo, enviamos el formulario por e-mail. Al trabajar con otros lenguajes, aquí iría el nombre del archivo que procesará la acción.	action="mailto:e-mail" Ejemplos de archivos de procesamiento: action="procesar.php" action="form.cgi"
method	Forma de envío de los datos. Hay dos alternativas: get (por defecto), mediante la cual los datos viajan por la url y son visibles en el navegador; y post, que oculta los datos.	method="get" method="post"
enctype	Codificación que tomarán los datos para ser enviados al destino. Text/plain es formato de texto plano. Multipart/form-data se utiliza para enviar contenidos complejos, largos y en general va asociado al method post. El valor por defecto es application/x-www-form-urlencoded que es un formato amplio.	enctype="text/plain" enctype="multipart/form-data" enctype="application/x-www-form-urlencoded"*
name	Es el nombre del formulario. Usualmente utilizamos este atributo cuando procesamos el formulario con otros lenguajes (asp, php, cgi).	name="contacto"

*al utilizar esta codificación, según la versión de navegador utilizada, nos llegará un archivo denominado POSTDATA.ATT, que se puede abrir con el bloc de notas.

Hasta ahora sólo vimos la etiqueta principal del formulario, pasemos a las etiquetas que manejan los campos (que recogerán la información).

13.2 Etiqueta INPUT - Textos y passwords

La etiqueta <INPUT> tiene varios usos, según los atributos que definamos para ella. Podemos utilizarla para el ingreso de textos cortos, passwords, habilitar/deshabilitar casillas de confirmación, hacer listas con múltiples opciones y para el envío/borrado del formulario. Esta etiqueta no tiene cierre. Suele ir acompañada por la etiqueta <LABEL> que hace mención al id o name del campo para que se pueda asociar. Ampliamos más adelante en este módulo.

Ejemplo:

Código ejemplo:

<form action="mailto:e-mail" method="post">
  <label for="nombre">Nombre: </label><br>
  <input type="text" name="nombre" id="nombre"><br>
  <label for="clave">Clave: </label><br>
  <input type="password" name="clave" id="clave"><br>
  <input type="submit" value="Enviar"> <input type="reset" value="Borrar">
</form>

Al e-mail llegará el nombre de cada campo con su información.

Atributos de la etiqueta input para textos y passwords:

Atributo	Descripción	Ejemplo
type	Indica el tipo de información que se ingresará en ese campo. En este caso, veremos text (texto, letras y números), password (password, texto oculto), reset (para el botón borrar formulario) y submit (para el botón enviar formulario).	type="text" type="password" type="reset" type="submit"
size	Tamaño de la casilla de texto en caracteres.	size="20"
maxlength	Cantidad máxima de caracteres que se podrán ingresar en la casilla. Puede coincidir o no con el tamaño. En el caso del password, mediante este atributo restringimos a 6 la cantidad de caracteres que se podrán ingresar en este campo.	maxlength="6"
name, id	Nombre del campo. NAME e ID es lo mismo. Utilizamos los dos porque algunos navegadores leen uno u otro.	name="nombre" id="password"
value	Texto por defecto que tendrá el campo. El usuario lo puede cambiar si así lo desea o enviar el formulario con dicho texto. En el caso de los botones, es el texto que se verá en ellos.	value="su nombre aquí" value="6 caracteres" value="Borrar form" value="Enviar form"

Etiqueta LABEL

Por motivos de accesibilidad, cada ítem o campo del formulario deberá estar precedido por la etiqueta label correspondiente. Su sintaxis es la siguiente: <label for="nombre"></label>, donde "nombre" debe ser el id o name del campo que antecede. Se utiliza para todos elementos del formulario excepto los botones.

13.3 Etiqueta INPUT - Opciones y casillas de verificación

La etiqueta input también ofrece posibilidades de recabar datos de opciones múltiples y casillas de verificación. Veamos un código de ejemplo:

Atributos de la etiqueta input para listas y casillas:

Atributo	Descripción	Ejemplo
type	Indica el tipo de información que se ingresará en ese campo. Aquí estamos viendo checkbox que es para marcar opciones. Admite dos alternativas: On, si está marcada y Off, si está desmarcada. Con el atributo checked queda marcada desde el comienzo. La opción por defecto es Off, o sea, desmarcada.	type="checkbox"
type	Otro tipo de atributo posible es radio, que utilizamos para hacer listas, donde la opción es una entre varias, como ser encuestas de opinión, y otros.	type="radio"
checked	En cualquiera de estas dos alternativas de listas, con este atributo añadido se muestra la opción marcada por defecto.	checked
name	Nombre del campo. NAME e ID es lo mismo. Utilizamos los dos porque algunos navegadores leen uno u otro. En la opción radio, es importante mantener el mismo nombre o ID para todas las opciones de una misma lista. En el caso de tener listas diferentes, por ejemplo, una encuesta por un tema y otra encuesta por otro tema, necesitamos utilizar dos nombres o id diferentes.	name="opinion" name="puntaje"
value	Este atributo asigna un valor a cada ítem del listado de opciones. Y será recogido por el formulario si la opción está tildada, junto con su nombre o id.	value="Muy bueno" value="Bueno" value="Regular"

13.4 Etiqueta TEXTAREA

Mediante esta etiqueta, podemos colocar una casilla de varios renglones de alto, para ingresar textos más extensos que con la casilla input text. Tiene apertura y cierre, y la codificación es la siguiente:

<p>Enviá tu comentario: <br>
<textarea name="comentario" id="comentario" rows="4" cols="50">Escribí tu opinión  aquí.</textarea></p>

A continuación de la etiqueta de apertura de textarea, se puede escribir un texto que aparecerá por defecto en la caja. Si no, la caja aparece vacía.

Ejemplo del código de arriba:

Para hacer formularios alineados, podemos realizar una tabla y colocar en una primera columna los títulos o nombres de los campos y en la segunda las etiquetas de campo propiamente dichas, utilizando una celda para cada ítem.

13.5 Etiqueta SELECT

Esta etiqueta nos permite seleccionar un ítem, de una lista desplegable. Es común encontrarla como menú de salto o menú de acceso rápido en sitios que tienen muchas páginas y también cuando queremos seleccionar fechas, países, localidades y otros. Tiene etiqueta de apertura y cierre y además, cada opción va inicializada por la etiqueta <OPTION>, que no tiene cierre.

Atributos de la etiqueta SELECT:

Atributo	Descripción	Ejemplo
name	Nombre o id, similar a lo visto en la etiqueta input.	name="pais" id="pais"
size	Cantidad de opciones que podremos ver. Si es 1, veremos una lista desplegable, si es mayor que uno, veremos una lista de selección, con la barra de navegación vertical, según la cantidad de opciones que haya.	size="5"
multiple	Si este atributo está en la etiqueta, se podrá seleccionar más de una alternativa, con la tecla CTRL y el clic del mouse.	multiple

Atributos de la etiqueta OPTION:

Atributo	Descripción	Ejemplo
value	Es el valor por defecto que tomará esa opción al ser seleccionada. Funciona de forma similar a las listas de la etiqueta input radio.	value="Argentina"
selected	Si este atributo está presente en una opción, se verá resaltado, o sea, seleccionado por defecto.	selected="selected"