path: root/files/es/web/html/element/select/index.html

---
title: <select>
slug: Web/HTML/Elemento/select
tags:
  - Elemento
  - Formulario(2)
  - HTML
  - Referencia
  - Web
  - formularios html(2)
translation_of: Web/HTML/Element/select
---
<h2 id="Resumen">Resumen</h2>

<p>El elemento select (<code>&lt;select&gt;</code>) de HTML representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos {{HTMLElement("option")}}, los cuales pueden ser agrupados por elementos {{HTMLElement("optgroup")}}. La opcion puede estar preseleccionada por el usuario.</p>

<h2 id="Contenido">Contenido</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Content categories</a></td>
   <td>Elementos <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">interactive content</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable" title="HTML/Content categories#Form resettable">resettable</a>, y <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a>.</td>
  </tr>
  <tr>
   <td>Contenido permitido</td>
   <td>Uno o mas elementos {{HTMLElement("option")}} o {{HTMLElement("optgroup")}}.</td>
  </tr>
  <tr>
   <td>Omisión de etiquetas</td>
   <td>Ninguna, ambas etiquetas son obligatorias</td>
  </tr>
  <tr>
   <td>Elementos padre permitidos</td>
   <td>Cualquier elemento que permita phrasing content.</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p><span style="line-height: 21px;">Este elemento incluye </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt>
 <dd>Este atributo permite especificar un formulario de control que debería tener enfoque de entrada cuando se carga la página, a no ser que el usuario lo sobreescriba, por ejemplo, escribiendo un control diferente. Solo un elemento formulario puede tener el elemento de enfoque de entrada por documento, por lo cual es un atributo booleano.</dd>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>El atributo booleano especifica que el usuario no puede interactuar con el control. Si este atributo no está especificado, el control hereda los ajustes del campo que lo contiene, por ejemplo del fielset; si no hay elemento contenido con el atributo disabled, entonces el control se considera enable (activado).</dd>
 <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
 <dd>El elemento formulario al cual el select está asociado (su propietario del formulario). Si este atributo está especificado, su valor deberá ser el ID de un formulario en el mismo documento. Esto te permite situar elementos en cualquier parte del documento, no solo de manera descendiente con respecto a su elemento formulario.</dd>
 <dt>{{htmlattrdef("multiple")}}</dt>
 <dd>Este elemento booleano indica que se pueden seleccionar múltiples opciones de la lista. Si no está especificado, solo se podrá seleccionar una opción cada vez.</dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>El nombre del elemento de control.</dd>
 <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
 <dd>Es un elemento boooleano que indica si la opcion puede quedar sin seleccionar o si es requerida.</dd>
 <dt>{{htmlattrdef("size")}}</dt>
 <dd>Si el control se presenta como una lista con scroll en caja, este atributo representa el numero de filas que la list tendrá visible la primera vez. Los navegadores no están requeridos a presentar un elemento select como una lista con escroll en caja. El valor por defecto es cero.</dd>
</dl>

<div class="note"><strong>Nota de Firefox: </strong>De acuerdo con las especificaciones de HTML5, el tamaño por defecto debe ser 1; sin embargo, en la práctica, esto hace que se rompan algunas páginas webs, y ningun otro navegador actualmente hace esto, así que Mozilla ha optado por continuar usando 0 desde que empezó con Firefox.</div>

<dl>
</dl>

<h2 id="DOM_Interface">DOM Interface</h2>

<p>Este elemento implementa la interfaz <code><a href="/en-US/docs/DOM/HTMLSelectElement" title="DOM/select">HTMLSelectElement</a>.</code></p>

<h2 id="Ejemplos">Ejemplos</h2>

<pre class="brush: html">&lt;!-- The second value will be selected initially --&gt;
&lt;select name="select"&gt;
  &lt;option value="value1"&gt;Value 1&lt;/option&gt;
  &lt;option value="value2" selected&gt;Value 2&lt;/option&gt;
  &lt;option value="value3"&gt;Value 3&lt;/option&gt;
&lt;/select&gt;
</pre>

<h4 id="Resultado">Resultado</h4>

<p><select name="select"><option value="value1">Value 1</option><option selected value="value2">Value 2</option><option value="value3">Value 3</option></select></p>

<h3 id="Notas">Notas</h3>

<p>El contenido de este elemento es estático y no <a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content_Editable">editable</a>.</p>

<p>El siguiente ejemplo muestra como simular una lista con opciones editables, pero ten cuidado ya que algunos lectores de pantallas y dispositivos de ayuda no lo interpretarán de forma correcta; este ejemplo sería html inválido si usas los elementos correctos:</p>

<p><a href="/files/4563/editable_select.html" style="line-height: 1.5;" title="Simulating an editable select through a fieldset of radioboxes and textboxes">This is an example</a> de un select editable mediante un<span style="line-height: 1.5;"> {{HTMLElement("fieldset")}} de </span><a href="/en-US/docs/HTML/Element/Input" style="line-height: 1.5;" title="HTML/Element/Input">radioboxes</a><span style="line-height: 1.5;"> y </span><a href="/en-US/docs/HTML/Element/Input" style="line-height: 1.5;" title="HTML/Element/Input">textboxes</a><span style="line-height: 1.5;"> (<strong>escrito en CSS puro</strong></span><span style="line-height: 1.5;">, sin JavaScript), </span></p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>required</code> attribute</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>10</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}} [1]</td>
   <td>{{CompatGeckoMobile("1.0")}} [2]</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>required</code> attribute</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>

<p>[1] En la aplicación navegador para Android 4.1 (y posiblemente en versiones posteriores), hay un error cuando el menu triangulo indicador al lado de un elemento {{HTMLElement("select")}} no se muestra si {{ cssxref("background") }}, {{ cssxref("border") }}, o {{ cssxref("border-radius") }} estilos están aplicados al {{HTMLElement("select")}}.</p>

<p>[2] Firefox para Android, por defecto, establece un {{ cssxref("background-image") }} gradiente en todos los elementos <code>&lt;select multiple&gt;</code>. Esto puede desactivarse usando  <code>background-image: none</code>.</p>

<p>[3] Históricamente, Firefox ha permitido eventos de teclado y ratón para mostrar desde el elemento <code>&lt;option&gt; al elemento padre </code>{{HTMLElement("select")}}. Esto no ocurre en Chrome, sin embargo, aunque este comportamiento sigue apareciendo de manera incosciente en muchos navegadores. Para una mayor compatibilidad Web (y por razones técnicas), cuando Firefox está en modo multitarea el elemento <code>&lt;select&gt;</code> se muestra como una lista descendente. Este comportamiento se produce sin cambios si <code>&lt;select&gt;</code>se presenta como elemento en línea y tiene multipleas atributos definidos o tiene un atributo de tamaño cuyo valor sea mayor que uno. Mejor que ver el elemento <code>&lt;option&gt;</code> para eventos, debería mirar el elemento de enventos {event("change")}} en {{HTMLElement("select")}}. Ver {{bug(1090602)}} para detalles.</p>

<p>Tanto Chrome como Safari ignoran {{cssxref("border-radius")}} en los elementos {{HTMLElement("select")}} a no ser que {{cssxref("-webkit-appearance")}} esté invalidado a un valor apropiado.</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>Otros elementos relacionados de formularios: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
</ul>

<div>{{HTMLRef}}</div>