Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Referencia HTML > Tags HTML > Tag HTML select

Bypass main content

Tag HTML select

 Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.

Bypass main content

Descripción

El elemento HTML select inserta una lista desplegable de opciones en un documento o formulario. Este tipo de control presenta un conjunto de opciones (elemento HTML option), que pueden ser organizadas en grupos (elemento HTML optgroup).

Esencialmente, este control es una alternativa a los botones radio o a las casillas de verificación, dependiendo del valor del atributo "multiple".

Nota, que solo las opciones seleccionadas serán adjuntadas al formulario cuando éste sea enviado.

Ejemplos

Código
<form action="ejemplo.php">
<div>
<select>
<optgroup label="Lenguajes del lado servidor">
<option>PHP</option>
<option>ASP</option>
</optgroup>
<optgroup label="Lenguajes del lado cliente">
<option>JavaScript</option>
<option>VBScript</option>
</optgroup>
</select>
</div>
</form>
Vista

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).

<p id="parrafo1">Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.</p>

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").

<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks... y es más importante que el anterior.</p>

style (style)

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.

Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".

<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido.</p>
<p>Y este es otro texto sin estilo.</p>

title (text)

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.

Código
<a title="HTMLQuick.com" href="http://www.htmlquick.com/es/">Código HTML</a>
Vista

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".

Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es válido.

<p lang="en" xml:lang="en">This is a paragraph in English.</p>
<p lang="es" xml:lang="es">Este es un párrafo en español.</p>

dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

  • RTL: derecha a izquierda.
  • LTR: izquierda a derecha.
<q lang="he" dir="rtl">...una cita en Hebreo...</q>

name (cdata)

Asigna un nombre al elemento que será usado para identificarlo por el agente procesador cuando el formulario sea inviado.

<select name="mascotafavorita">
...Opciones...
</select>

disabled

Los usuarios no podrán cambiar el contenido del control cuando este atributo esté presente. Además, el control no podrá recibir el enfoque y su información no será enviada con el formulario.

Los navegadores habitualmente muestran los controles visuales de manera diferente, como si fueran semitransparentes, con una combinación de colores grises.

Recuerda que en XHTML, los atributos booleanos debe tomar su propio nombre como valor (por ejemplo, nombreatributo="nombreatributo").

Código
<select disabled="disabled">
<option>Películas</option>
<option>Música</option>
<option>Deportes</option>
</select>
Vista

tabindex (number)

Especifica la posición de este elemento en el orden de tabulación. El orden de tabulación define una secuencua con todos los elementos que pueden recibir el enfoque. Los usuarios pueden navegar esta secuencia mediante el teclado (usualmente con la tecla "tab").

Nombre: <input type="text" name="nombre" tabindex="1" />
Apellido: <input type="text" name="apellido" tabindex="2" />
Número telefónico: <input type="text" name="numerotel" tabindex="3" />

size (number)

Cuando el control se muestra como una caja con barras de desplazamiento, este atributo expecifica la altura de dicha caja como un número de líneas.

La decisión de mostrar este control como una caja con barras de desplazamiento o no es librada a los agentes de usuario. La mayoría de ellos muestran este control como una lista desplegable a menos que el atributo "multiple" esté presente el atributo "size" tome un valor mayor a 1.

Código
<select size="3">
<option>Películas</option>
<option>Música</option>
<option>Deportes</option>
<option>Teatro</option>
<option>Libros</option>
</select>
Vista

multiple

Cuando este atributo booleano está presente el usuario puede escoger más de una opción mantieniendo presionada la tecla CTRL al seleccionar. Cuando está ausente, sólo una opción puede ser seleccionada a la vez.

Los navegadores habitualmente muestrar el control como una caja con barras de desplazamiento, en lugar de una lista desplegable, cuando este atributo está presente.

Recuerda que en XHTML, los atributos booleanos deben tomar sus propios nombres como valor (por ejemplo, nombreatributo="nombreatributo").

Código
<select multiple="multiple">
<option>Películas</option>
<option>Música</option>
<option>Deportes</option>
<option>Teatro</option>
<option>Libros</option>
</select>
Vista

Eventos

  • onfocus
  • onblur
  • onchange
  • onclick
  • ondblclick
  • onmousedown
  • onmouseup
  • onmouseover
  • onmousemove
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

Ve a la lista completa de eventos en HTML.

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona