Tecnología

Inicio

Cómo crear un desplegable de selección de la caja en HTML

La Web es una herramienta altamente interactiva, con 2.0 características de Internet como las redes sociales y sitios de vídeo que dominan el ancho de banda. Esto significa que muchas características del sitio web requieren más de HTML simple que se aplican correctamente, con lenguajes de script como JavaScript, ActionScript y jQuery que proporciona la mayor parte de la interactividad. Un cuadro de selección desplegable simple, sin embargo, no requiere nada más que unas pocas etiquetas HTML rápidas para trabajar en cualquier navegador y añade un poco de interacción con el usuario a su sitio.

Instrucciones

1 Localizar la posición dentro del documento HTML en el que desea que aparezca el cuadro desplegable. Es un elemento en línea, por lo que se puede colocar dentro o al final de un párrafo.

2 Escriba la etiqueta de apertura para su cuadro desplegable:

<Select>

3 Pulse la tecla "Return" o "Enter" para moverse hacia abajo a la siguiente línea. Esto no afectará a la disposición de su lista, pero mantendrá su código HTML más limpio y más manejable.

4 Escriba la etiqueta de apertura para el primer elemento de la lista desplegable:

<Opción>

5 Escriba el valor del primer elemento de la lista desplegable en la misma línea.

6 Escriba la etiqueta de cierre para el primer elemento de la lista desplegable una vez más en la misma línea:

</ Option>

7 Repita este proceso para cada elemento de la lista desplegable.

8 Escriba la etiqueta de cierre para el cuadro desplegable en la línea siguiente:

</ Select>

9 Compruebe que el código coincide con la siguiente estructura:

<Select>
<Opción> Punto Primero </ option>
<Opción> Punto Segundo </ option>
<Opción> Punto Tercero </ option>
<Opción> Punto Cuarto </ option>
</ Select>

Consejos y advertencias

  • Puesto que un cuadro desplegable HTML es un elemento en línea, usted tiene que tener cuidado al colocarla. Si desea hacer que aparece separado del resto de su texto, su mejor opción es para diseñarlo con CSS, añadiendo relleno alrededor del mismo para evitar que aparezca la misma en todos los navegadores.
  • Asegúrese de cerrar sus etiquetas de párrafo después de su desplegable si se incluye dentro o al final de un párrafo.