MENÚSA 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>
||
Código: ||
|| <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> ||
Menús de selección múltipleSi 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:
||
Código: ||
|| <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> ||
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:
|| Código: ||
|| <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:
||
Código: ||
|| <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> ||
Si queremos que una o varias de las opciones aparezcan ya marcadas, utilizaremos el atributo checked:
||
Código: ||
|| <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> ||
BOTONES DE RADIOSi queremos que el usuario solo pueda elegir UNA de las opciones que le presentamos, utilizaremos botones de radio.
|| Código: ||
|| <input type="radio" name="opcion" value="valor"> ||
Por ejemplo, vamos a pedirle al usuario que nos diga cómo va a trabajar:
||
Código: ||
|| <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> ||
En este ejemplo, si el usuario eligiera Autobús, nosotros recibiríamos: transporte=Bus.
