---
title: <select>
slug: Web/HTML/Element/select
tags:
  - Element
  - Forms
  - HTML
  - HTML forms
  - Reference
  - Web
translation_of: Web/HTML/Element/select
---
<h2 id="Sumari">Sumari</h2>

<p>L'element HTML <em>seleccionar</em> (<code>&lt;select&gt;</code>)  és un control que mostra un menú d'opcions. Les opcions del menú estan representades per elements <code>{{HTMLElement("option")}}</code>, que es poden agrupar per elements <code>{{HTMLElement("optgroup")}}</code>. Les opcions poden ser pre-seleccionades per l'usuari.</p>

<h2 id="Contingut_d'ùs">Contingut d'ùs</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Categories de contingut</a></td>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contingut dinàmic</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">i contingut interactiu</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">enumerat</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">etiquetable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable" title="HTML/Content categories#Form resettable">reiniciable</a>, i <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">enviable</a> de elements <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated "> asociats a formularis </a></td>
  </tr>
  <tr>
   <td>Contingut permès</td>
   <td>Zero o més elements {{HTMLElement("option")}} o {{HTMLElement("optgroup")}}.</td>
  </tr>
  <tr>
   <td>Omissió de l'etiqueta</td>
   <td>Cap, <span id="result_box" lang="ca"><span>tant</span> <span>l'etiqueta</span> <span>inicial com la</span> <span>final són</span> <span>obligatories</span></span></td>
  </tr>
  <tr>
   <td>Elements pares permesos</td>
   <td>Qualsevol element que accepti phrasing content</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els<span style="line-height: 21px;"> </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributs globals</a><span style="line-height: 21px;">.</span></p>

<dl>
 <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt>
 <dd>Aquest atribut permet especificar que un control de formulari ha de tenir el focus d'entrada quan es carrega la pàgina, llevat que l'usuari el redefineixi, per exemple escrivint en un control diferent. Només un element de formulari en un document pot tenir l'atribut <code>autofocus</code>, el qual és un valor booleà.</dd>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>Aquest atribut booleà indica que l'usuari no pot interactuar amb el control. Si no s'especifica aquest atribut, el control hereta la seva configuració des de l'element que ho conté, per exemple <code>fieldse</code>t; si no hi ha cap element que ho conté amb l'atribut <code>disabled</code> establert, llavors el control està <code>enabled</code>.</dd>
 <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
 <dd>L'element formulari en el qual està associat l'element select (el seu "formulari propietari"). Si s'especifica aquest atribut, el seu valor ha de ser l'ID d'un element formulari en el mateix document. Això li permet col.locar elements select en qualsevol lloc dins d'un document, no només com descendents dels seus elements de formulari.</dd>
 <dt>{{htmlattrdef("multiple")}}</dt>
 <dd>Aquest atribut booleà indica que es poden fer seleccions múltiples a la llista. Si no s'especifica, llavors només una opció pot ser seleccionada alhora.</dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>El nom del control.</dd>
 <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
 <dd><span id="result_box" lang="ca"><span>Un atribut</span> <span>booleà que</span> <span>indica</span> <span>que una opció</span> <span>amb</span> <span>un valor</span> <span>de cadena</span> <span>no</span> <span>buida</span> <span>ha d'està</span> <span>seleccionat.</span></span></dd>
 <dt>{{htmlattrdef("selected")}}</dt>
 <dd>Un atribut booleà el qual indica que una opció específica es pot seleccionar inicialment.</dd>
 <dt>{{htmlattrdef("size")}}</dt>
 <dd>Si el control es mostra com un quadre de llista desplegable, aquest atribut representa el nombre de files en la llista que han de ser visibles alhora. Els navegadors no estan obligats a presentar un element de selecció com un quadre de llista desplegable. El valor per defecte és 0.</dd>
</dl>

<div class="note"><strong>Nota Firefox:</strong> D'acord amb l'especificació d'HTML 5, el valor per defecte per a la mida ha de ser 1; No obstant això, en la pràctica, s'ha trobat que això trenca alguns llocs web, i cap altre navegador actualment té això, pel que Mozilla ha optat per seguir retornant 0, de moment amb Firefox.</div>

<dl>
</dl>

<h2 id="Interfície_DOM">Interfície DOM</h2>

<p>Aquest element implementa la interfície <code><a href="/en-US/docs/DOM/HTMLSelectElement" title="DOM/select">HTMLSelectElement</a></code>.</p>

<h2 id="Exemples">Exemples</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>

<h3 id="Resultat">Resultat</h3>

<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="Notes">Notes</h3>

<p>El contingut d'aquest element és estàtic i no <a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content_Editable">editable</a>.</p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</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="Navegadors_compatibles">Navegadors compatibles</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}<sup> [3]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>required</code></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>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}<sup> [1]</sup></td>
   <td>{{CompatGeckoMobile("1.0")}}<sup> [2]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>atribut <code>required</code></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 l'aplicació del navegador per Android 4.1 (i possiblement versions posteriors), hi ha un error en el qual el triangle indicador de menú al costat d'un {{HTMLElement("select")}} no es mostrarà si un estil {{ cssxref("background") }}, {{ cssxref("border") }} o {{ cssxref("border-radius") }} s'aplica a {{HTMLElement("select")}}.</p>

<p>[2] Firefox per a Android, per defecte, fixa un gradient {{ cssxref("background-image") }} en tots els elements <code>&lt;select multiple&gt;</code>. Això es pot desactivar usant <code>background-image: none</code>.</p>

<p>[3] Històricament, Firefox ha permès que els esdeveniments del teclat i ratolí es generin des de l'element <code>&lt;opció&gt;</code> fins l'element pare {{HTMLElement ("select")}}. Això no succeeix en Chrome, encara que aquest comportament és incoherent en molts navegadors. Per a una millor compatibilitat web (i per raons tècniques), quan Firefox està en modalitat multi-procés l'element <code>&lt;select&gt;</code> es mostra com una llista desplegable. El comportament és sense canvis si <code>&lt;select&gt;</code> es mostra en línia i té l'atribut <code>multiple</code> definit o un atribut <code>size</code> ajustat a més de 1. En lloc d'observar esdeveniments en elements <code>&lt;option&gt;</code>, heu d'estar atents en els esdeveniments {{event("change")}} en {{HTMLElement("select")}}. Veure {{bug(1090602)}} per a més informació.</p>

<p>Tant Chrome com Safari ignoren {{cssxref("border-radius")}} en elements {{HTMLElement("select")}} a menys que es reemplaci {{cssxref("-webkit-appearance")}} a un valor apropiat.</p>

<h2 id="Veure">Veure</h2>

<ul>
 <li>Altres elements relacionats amb formularis : {{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>