Lección 7 / 7.3

Apéndices

7.3 Input Boxes

Prácticamente todo formulario incluye al menos un input box. Para aprender como crear y manipular apropiadamente un input box trataremos de emular el formulario que se ilustra en la figura de abajo.

Utilicemos primero los códigos que ya conocemos para crear la tabla donde insertaremos los elementos del formulario:

<HTML>

<HEAD>
<TITLE>Tabla Gráfica</TITLE>
</HEAD>

<BODY>

   <table width="249" border="0" cellspacing="2" cellpadding="2" bgcolor="#333333">
     <tr>
       <td width=33% bgcolor="#999999"><b>Usuario:</b></td>
       <td colspan="2" bgcolor="#999999"> </td>
     </tr>
     <tr>
       <td bgcolor="#999999"><b>Contraseña:</b></td>
       <td colspan="2" bgcolor="#999999"> </td>
    </tr>
    <tr bgcolor="#FFFFFF" align="right">
     <td colspan="3"> </td>
     </tr>
</table>

</BODY>

</HTML>

Sugerimos que estudie cuidadosamente el código fuente que arriba presentamos y trate de encontrar la función de cada línea de código. La salida que se produce es:

Para insertar en la segunda celda de la primera fila la caja de texto que usaremos para recolectar el userid, primero debemos declarar que incluiremos un formulario en la página.

<HTML>

<HEAD>
<TITLE>Tabla Gráfica</TITLE>
</HEAD>

<BODY>

<FORM NAME=CIE>
   <table width="249" border="0" cellspacing="2" cellpadding="2" bgcolor="#333333">
     <tr>
       <td width=33% bgcolor="#999999"><b>Usuario:</b></td>
       <td colspan="2" bgcolor="#999999"> </td>
     </tr>
     <tr>
       <td bgcolor="#999999"><b>Contraseña:</b></td>
       <td colspan="2" bgcolor="#999999"> </td>
    </tr>
    <tr bgcolor="#FFFFFF" align="right">
     <td colspan="3"> </td>
     </tr>
</table>
</FORM>

</BODY>

</HTML>

El tag <INPUT> permite insertar una caja de texto. Su sintaxis general en este caso es:

<INPUT NAME=nombre del campo VALUE=valor SIZE=valor MAXLENGTH=valor>

donde NAME es el nombre del campo. La información que se entre en la caja de texto se enviará al servidor para ser procesada por el CGI script, apareada con el nombre del correspondiente campo. El CGI script tiene que estar programado para identificar adecuadamente la información que se le envía desde la página web.

La propiedad VALUE se refiere al contenido que aparecerá por omisión en la caja de texto; la propiedad SIZE fija el ancho de la caja de texto (medido en cantidad de caracteres) y la propiedad MAXLENGTH la cantidad de caracteres que serán admitidos.

El código fuente

<FORM>

<table width="249" border="0" cellspacing="2" cellpadding="2" bgcolor="#333333">
<tr>
<td width=33% bgcolor="#999999"><b>Usuario:</b></td>
<td colspan="2" bgcolor="#999999"><INPUT NAME=userid SIZE=20 MAXLENGTH=8></td>
</tr>
<tr>
<td bgcolor="#999999"><b>Contraseña:</b></td>
<td colspan="2" bgcolor="#999999"> </td>
</tr>
<tr bgcolor="#FFFFFF" align="right">
<td colspan="3"> </td>
</tr>
</table>

</FORM>

</BODY>

</HTML>

produce la salida

La segunda caja de texto, que insertaremos en la cuarta celda (segunda fila, segunda columna) es un tanto especial, pues normalmente no deseamos que los caracteres que se escriban dentro de esta caja puedan ser leídos. Para que los caracteres sean sustituidos por asteriscos (u otro tipo de bullet) se utiliza la propiedad TYPE del tag INPUT como se muestra abajo.

<FORM>

<table width="249" border="0" cellspacing="2" cellpadding="2" bgcolor="#333333">
<tr>
<td width=33% bgcolor="#999999"><b>Usuario:</b></td>
<td colspan="2" bgcolor="#999999"><INPUT NAME=userid SIZE=20 MAXLENGTH=8></td>
</tr>
<tr>
<td bgcolor="#999999"><b>Contraseña:</b></td>
<td colspan="2" bgcolor="#999999"><INPUT TYPE=password NAME=password SIZE=20 MAXLENGTH=8></td>
</tr>
<tr bgcolor="#FFFFFF" align="right">
<td colspan="3"> </td>
</tr>
</table>

</FORM>

</BODY>

</HTML>

El código fuente que se muestra arriba produce la siguiente salida

Para completar el formulario solamente falta insertar los botones, los que se estudiará en el siguiente epígrafe.

Lección 7 | 7.1 | 7.2 | 7.3 | 7.4 | 7.5 |