formularios para crear una lista corta

Para ello usaremos HTML y en concreto, el código necesario para construir un campo desplegable de un formulario. El código básico sería este:

<form name="formulario" method="post" action="">
<label>MIS SITIOS</label>
<select name="destinos">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select><input onclick="location.href=formulario.destinos.value;" type="button" value="IR" name="button">
</form>

Por cada nuevo enlace habría que añadir una nueva OPTION, con sus correspondientes etiquetas de apertura y cierre, incluyendo un VALUEigual a la dirección de destino. La etiqueta LABEL justo después de abrir el formulario, sólo contiene texto para servir de título sobre lo que el desplegable contiene. Se puede eliminar si se desea. El resultado sería este:

MIS SITIOS
  Google YouTube GMail 

Notaréis que la etiqueta INPUT genera el botón que sirve para ir al enlace seleccionado. El texto del VALUE puede ser el que queráis (en el ejemplo "IR").

Pero también podríamos modificar un poco el código, para que se acceda al enlace sin necesidad del botón. Esto haría que fuéramos directamente a la dirección, nada más cambiar nuestra selección:

MIS SITIOS
Google YouTube GMail 

En este segundo caso, suprimiríamos el mencionado INPUT (botón "IR") y tendríamos que colocar un ONCHANGE en la etiqueta SELECT:

<form name="formulario2" method="post" action="">
<label>MIS SITIOS</label>
<select name="destinos2" onchange="location.href=formulario2.destinos2.value;">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select>
</form>

Actualización.

Para abrir el resultado de la selección en una ventana/pestaña nueva, sustituimos dentro del onclick, location.href por window.open.

<form name="formulario" method="post" action="">
<label>MIS SITIOS</label>
<select name="destinos">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select><input onclick="window.open(formulario.destinos.value);" type="button" value="IR" name="button">
</form>

MIS SITIOS
 Google YouTube GMail 

Posted in: Formularios