MENÚS

A veces queremos que un usuario elija entre una serie de opciones ya determinadas y que no introduzca ningún dato. En estos casos utilizamos formularios de menús.

<select name=”menu”> Abre un formulario de menú
</select> cierra un formulario de menú

Para introducir cada opción del menú utilizamos la etiqueta <option></option>

<form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">

<table width=”60%” align=”center”>
<tr>
<td width=”60%”>Nombre: </td>
<td width=”40%”><input type=”text” name=”nombre” size=”15″ maxlength=”30″ /></td>
</tr>
<tr>
<td width=”60%”>Apellido: </td>
<td> <input type=”text” name=”apellido”  size=”15″ maxlength=”8″ /></td>
</tr>
<tr>

<td width=”60%”>Elija un destino: </td>
<td>
<select name=”destino_viaje”>
<option> Barcelona</option>
<option> Sevilla</option>
<option> Bilbao</option>
<option> Valencia</option>
<option> Murcia</option>
</select>
</td>
</tr>
<tr>
<td colspan=”2″ align=”center”>
<input type=”reset” value=”  Borrar  ” />
<input type=”submit” value=”  Enviar  ” />

</td>
</tr>

</table>
</form>

Resultado

Menús de selección múltiple

Si queremos que el usuario pueda ver varias opciones a la vez, tenemos que añadirle a la etiqueta select, cuantas opciones queremos que sean visibles al mismo tiempo, lo hacemos con el atributo multiple size=”numero”.

Veamos el ejemplo anterior, pero con todas las opciones visibles:

<form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">

<table width=”60%” align=”center”>
<tr>
<td width=”60%”>Nombre: </td>
<td width=”40%”><input type=”text” name=”nombre” size=”15″ maxlength=”30″ /></td>
</tr>
<tr>
<td width=”60%”>Apellido: </td>
<td> <input type=”text” name=”apellido”  size=”15″ maxlength=”8″ /></td>
</tr>
<tr>

<td width=”60%”>Elija un destino: </td>
<td>
<select name=”destino_viaje” mutiple size=”5″>
<option> Barcelona</option>
<option> Sevilla</option>
<option> Bilbao</option>
<option> Valencia</option>
<option> Murcia</option>
</select>
</td>
</tr>
<tr>
<td colspan=”2″ align=”center”>
<input type=”reset” value=”  Borrar  ” />
<input type=”submit” value=”  Enviar  ” />

</td>
</tr>

</table>
</form>
Resultado

FORMULARIOS DE CONFIRMACIÓN

Este tipo de casillas (checkboxes), permiten al usuario elegir entre sí y no, sólo hay dos posibilidades o lo elige o no lo elige:

<input type="checkbox" name="Lista"> Texto que acompaña a la casilla

En este ejemplo, el usuario puede elegir una, varias, o todas las opciones que le presentamos:

<form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">

<table width=”60%” align=”center”>
<tr>
<td width=”60%”>Nombre: </td>
<td width=”40%”><input type=”text” name=”nombre” size=”15″ maxlength=”30″ /></td>
</tr>
<tr>
<td width=”60%”>Apellido: </td>
<td> <input type=”text” name=”apellido”  size=”15″ maxlength=”8″ /></td>
</tr>

<tr>

<th colspan=”2″ align=”center”>
Elija las opciones que desea:
</th>

</tr>

<tr>
<td width=”60%”>
<input type=”checkbox” name=”primera”> Primera </td>
<td> <input type=”checkbox” name=”primera”> Con Hotel</td>
</tr>

<tr>
<td width=”60%”>
<input type=”checkbox” name=”primera”> Con coche </td>
<td> <input type=”checkbox” name=”primera”> Con conductor</td>
</tr>

<tr>

<tr>

<td colspan=”2″ align=”center”>

<input type=”reset” value=”  Borrar  ” />
<input type=”submit” value=”  Enviar  ” />

</td>
</tr>

</table>
</form>

Resultado

Si queremos que una o varias de las opciones aparezcan ya marcadas, utilizaremos el atributo checked:

<form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">

<table width=”60%” align=”center”>
<tr>
<td width=”60%”>Nombre: </td>
<td width=”40%”><input type=”text” name=”nombre” size=”15″ maxlength=”30″ /></td>
</tr>
<tr>
<td width=”60%”>Apellido: </td>
<td> <input type=”text” name=”apellido”  size=”15″ maxlength=”8″ /></td>
</tr>

<tr>
<td colspan=”2″ align=”center”>
<input type=”checkbox” name=”primera” checked> Quiero suscribirme al boletín de suscripción
</td>

</tr>

<tr>

<td colspan=”2″ align=”center”>

<input type=”reset” value=”  Borrar  ” />
<input type=”submit” value=”  Enviar  ” />

</td>
</tr>

</table>
</form>

Resultado

BOTONES DE RADIO

Si queremos que el usuario solo pueda elegir UNA de las opciones que le presentamos, utilizaremos botones de radio.

<input type="radio" name="opcion" value="valor">

Por ejemplo, vamos a pedirle al usuario que nos diga cómo va a trabajar:

<form action="mailto:correo@electronico.com" method="post" enctype="text/plain" name="aprendiendo">

<table width=”60%” align=”center”>
<tr>
<th colspan=”3″>¿Cómo se desplaza al trabajo? </th>

</tr>
<tr>
<td><input type=”radio” name=”transporte” value=”Metro”> Metro </td>
<td><input type=”radio” name=”transporte” value=”Bus”> Autobús  </td>
<td><input type=”radio” name=”transporte” value=”Coche”> Coche  </td>
</tr>

<tr>

<td colspan=”2″ align=”center”>

<input type=”reset” value=”  Borrar  ” />
<input type=”submit” value=”  Enviar  ” />

</td>
</tr>

</table>
</form>

Resultado

En este ejemplo, si el usuario eligiera Autobús, nosotros recibiríamos: transporte=Bus.

10 Formularios (1) -  Indice -  12 Marcos