17.1 Introducción a los formularios

Un formulario HTML es una sección de un documento que contiene contenido normal, código, elementos especiales llamadoscontroles (casillas de verificación (checkboxes), radiobotones (radio buttons), menúes, etc.), y rótulos (labels) en esos controles. Los usuarios normalmente "completan" un formulario modificando sus controles (introduciendo texto, seleccionando objetos de un menú, etc.), antes de enviar el formulario a un agente para que lo procese (p.ej., a un servidor web, a un servidor de correo, etc.)

Aquí se muestra un ejemplo de un formulario simple que incluye rótulos, radiobotones y botones para reinicializar el formulario o para enviarlo:

 <FORM action="http://algunsitio.com/prog/usuarionuevo" method="post">
    <P>
    <LABEL for="nombre">Nombre: </LABEL>
              <INPUT type="text" id="nombre"><BR>
    <LABEL for="apellido">Apellido: </LABEL>
              <INPUT type="text" id="apellido"><BR>
    <LABEL for="email">email: </LABEL>
              <INPUT type="text" id="email"><BR>
    <INPUT type="radio" name="sexo" value="Varón"> Varón<BR>
    <INPUT type="radio" name="sexo" value="Mujer"> Mujer<BR>
    <INPUT type="submit" value="Enviar"> <INPUT type="reset">
    </P>
 </FORM>

La etiqueta INPUT



La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para crear muchos elementos “interactivos”. La sintaxis de esta etiqueta es la siguiente:


<INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre de elemento">
El atributo name es esencial, ya que permite al script CGI 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 introdujo ningún valor, por el valor predeterminado de la etiqueta value. 
El atributo type se usa para especificar qué tipo de elemento se representa con la etiqueta INPUT. Estos son los 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 al CGI.
hidden: Este campo, que el navegador no muestra, es para definir una configuración única que se enviará al CGI como par nombre/valor.
file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo 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: Un botón de envío personalizado que aparece cuando se ubica una imagen en la ubicación definida por el atributo SRC.
password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para camuflar el texto de entrada.
radio: Un botón que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name. El par nombre/valor del botón radio seleccionado se enviará al CGI. Al aplicar el atributo checked para uno de estos botones se definirá como seleccionado de forma predeterminada.
reset: Un botón de restauración para quitar todos los elementos en el formulario y restablecer sus valores predeterminados.
submit: Un botón de envío para enviar el formulario. El texto en el botón puede definirse usando el atributo value.
text: Una casilla de texto para escribir una línea de texto. El tamaño de la casilla puede definirse usando el atributo size y la extensión máxima del texto con el atributo maxlength.


La etiqueta TEXTAREA



La etiqueta TEXTAREA se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos:

cols: representa el número de caracteres que puede contener un línea
rows: representa el número de líneas
name: representa el 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 en el campo
value: representa el valor predeterminado que se enviará al script si el usuario no ha escrito nada en el cuadro de texto


La etiqueta SELECT



La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son:

name: name: representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el número de líneas de la lista (este valor puede ser más grande que el número de elementos reales de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista


Ejemplo de formulario






Los formularios pueden ubicarse en una página usando tablas (algo recomendable para una presentación profesional). Este es un ejemplo que resume los puntos precedentes, mostrándole cómo disponer un formulario en una página Web mediante una tabla:
<FORM method=post action="cgi-bin/script.pl">
Registro de un usuario
<TABLE BORDER=0>
<TR>
 <TD>Apellido</TD>
 <TD>
 <INPUT type=text name="apellido">
 </TD>
</TR>

<TR>
 <TD>Nombre</TD>
 <TD>
 <INPUT type=text name="nombre">
 </TD>
</TR>

<TR>
 <TD>Género</TD>
 <TD>
 Hombre: 
Mujer: <INPUT type=radio name="género" value="M">
 <br>Mujer: <INPUT type=radio name="género" value="F">
 </TD>
</TR>

<TR>
 <TD>Ocupación</TD>
 <TD>
 <SELECT name="ocupación">
  <OPTION VALUE="profesor">Profesor</OPTION>
  <OPTION VALUE="estudiante">Estudiante</OPTION>
  <OPTION VALUE="ingeniero">Ingeniero</OPTION>
  <OPTION VALUE="jubilado">Jubilado</OPTION>
  <OPTION VALUE="otro">Otro</OPTION>
 </SELECT>
 </TD>
</TR>
<TR>
 <TD>Comentarios</TD>
 <TD>
 <TEXTAREA rows="3" name="comentarios">
 Escriba aquí sus comentarios</TEXTAREA>
Enviar
 </TD>
</TR>

<TR>
 <TD COLSPAN=2>
 <INPUT type="submit" value="Enviar">
 </TD>
</TR>
</TABLE>
</FORM>