+---

+title: <select>

+slug: Web/HTML/Element/select

+translation_of: Web/HTML/Element/select

+---

+<h2 id="Sumário">Sumário</h2>

+<p>O elemento HTML <em>select</em> (&lt;select&gt;) representa um controle que apresenta um menu de opções. As opções dentro do menu são representadas pelo elemento <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">{{HTMLElement("option")}}</span>, que podem ser agrupados por elementos<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">{{HTMLElement("optgroup")}}</code><span style="line-height: 1.5;">. As opções podem ser pré-selecionadas para o usuário.</span></p>

+<h2 id="Contexto_de_uso">Contexto de uso</h2>

+<table class="standard-table">

+ <tbody>

+ <tr>

+ <td><a href="/pt-BR/docs/HTML/Categorias_de_conteúdo" title="HTML/Categorias de conteúdo">Categorias de conteúdo</a></td>

+ <td><a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_fluido" title="HTML/Categorias de conteúdo#Conteúdo fluido">conteúdo fluido</a>, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_fraseado" title="HTML/Categorias de conteúdo#Conteúdo fraseado">conteúdo fraseado</a>, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Conteúdo_interativo" title="HTML/Categorias de conteúdo#Conteúdo interativo">conteúdo interativo</a>, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Listado_em_formulários" title="HTML/Categorias de conteúdo#Listado em formulários">listado</a>, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Rotulável_em_formulários" title="HTML/Categorias de conteúdo#Rotulável em formulários">rotulável</a>, <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Resetável_em_formulários" title="HTML/Categorias de conteúdo#Resetável em formulários">resetável</a>, e <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Enviável_em_formulários" title="HTML/Categorias de conteudo#Enviável em formulários">enviável</a> <a href="/pt-BR/docs/HTML/Categorias_de_conteúdo#Associado_a_formulários" title="HTML/Categorias de conteúdo#Associado a formulários">associado a formulários</a></td>

+ </tr>

+ <tr>

+ <td>Conteúdo permitido</td>

+ <td>Zero ou mais elementos {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.</td>

+ </tr>

+ <tr>

+ <td>Omissão de tag</td>

+ <td>Nenhuma, tanto tag de início quanto de fim são obrigatórias</td>

+ </tr>

+ <tr>

+ <td>Elementos pai permitidos</td>

+ <td>qualquer elemento que aceite conteúdo fraseado</td>

+ </tr>

+ </tbody>

+</table>

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

+<p><span style="line-height: 21px;">Este elemento inclui os </span><a href="/pt-BR/docs/Web/HTML/Atributos_globais" style="line-height: 21px;" title="HTML/Atributos globais">atributos globais</a><span style="line-height: 21px;">.</span></p>

+<dl>

+ <dt>

+ {{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt>

+ <dd>

+ Este atributo permite especificar que um controle de formulário deve ter foco de entrada quando a página é carregada, a não ser que o usuário o substitua, por exemplo digitando em um controle diferente. Somente um elemento de formulário em um documento pode ter o atributo <code style="font-style: normal; line-height: 1.5;">autofocus</code><span style="line-height: 1.5;">, que é booleano.</span></dd>

+ <dt>

+ {{htmlattrdef("disabled")}}</dt>

+ <dd>

+ Este atributo booleano indica que o usuário não pode interagir com o controle. Caso esse atributo não seja especificado, o controle herda a configuração do elemento que o contém, por exemplo o elemento <code style="font-style: normal;">fieldset</code>; se não há nenhum elemento que o contém com o atributo <code style="font-style: normal; line-height: 1.5;">disabled,</code><span style="line-height: 1.5;"> então o controle está habilitado.</span></dd>

+ <dt>

+ {{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>

+ <dd>

+ O elemento form ao qual o elemento select é associado (algo como "formulário dono" do select). Se este atributo for especificado, seu valor deve ser o ID de um elemento form no mesmo documento. Isso permite que você coloque elementos select em qualquer lugar dentro do documento, e não apenas como descendentes de elementos form.</dd>

+ <dt>

+ {{htmlattrdef("multiple")}}</dt>

+ <dd>

+ Este atributo booleano indica que várias opções podem ser selecionadas na lista. Se não for especificado, apenas uma opção poderá ser selecionada de cada vez.</dd>

+ <dt>

+ {{htmlattrdef("name")}}</dt>

+ <dd>

+ O nome do controle</dd>

+ <dt>

+ {{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>

+ <dd>

+ Um atributo booleano que indica que uma opção com um valor de string que não esteja vazia deve ser selecionada.</dd>

+ <dt>

+ {{htmlattrdef("size")}}</dt>

+ <dd>

+ Se o controle é apresentado como uma list box com scroll, este atributo representa o número de linhas na list box que devem estar visíveis num determinado momento. Os navegadores não são obrigados a apresentar elementos select com uma list box scroll. O valor padrão é 0.</dd>

+</dl>

+<div class="note">

+ <strong>Nota sobre o Firefox:</strong> De acordo com a especificação HTML5, o valor padrão para o size deveria ser 1; no entanto, na prática, notou-se que isso quebrava alguns sites, e nenhum outro navegador faz isso no momento, então a Mozilla escolheu por continuar devolvendo 0 por enquanto no Firefox.</div>

+<dl>

+</dl>

+<h2 id="Interface_DOM">Interface DOM</h2>

+<p>Este elemento implementa a interface <code><a href="/pt-BR/docs/DOM/HTMLSelectElement" title="DOM/select">HTMLSelectElement</a></code>.</p>

+<h2 id="Exemplos">Exemplos</h2>

+<pre class="brush: html">&lt;!-- O segundo valor estará selecionado inicialmente --&gt;

+&lt;select name="select"&gt;

+  &lt;option value="valor1"&gt;Valor 1&lt;/option&gt;

+  &lt;option value="valor2" selected&gt;Valor 2&lt;/option&gt;

+  &lt;option value="valor3"&gt;Valor 3&lt;/option&gt;

+&lt;/select&gt;

+</pre>

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

+<p><select name="select"><option value="valor1">Valor 1</option><option selected value="valor2">Valor 2</option><option value="valor3">Valor 3</option></select></p>

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

+<p>O conteúdo deste elemento é estático e não <a href="/pt-BR/docs/HTML/Content_Editable" title="HTML/Content_Editable">editável</a>.</p>

+<p>A seguir um exemplo de como simular uma lista de seleção com opções editáveis, <strong>mas esteja ciente </strong>de que leitores de tela e dispositivos de acessibilidade <em>não </em>interpretarão o formulário corretamente; este exemplo seria HTML inválido se os elementos corretos fossem usados:</p>

+<p><a href="/files/4563/editable_select.html" style="line-height: 1.5;" title="Simulando um select editável com um fieldset de botões de escolha e caixas de texto">Este é um exemplo</a> de um select editável usando um<span style="line-height: 1.5;"> {{HTMLElement("fieldset")}} de </span><a href="/pt-BR/docs/HTML/Element/Input" style="line-height: 1.5;" title="HTML/Element/Input">botões de opção</a><span style="line-height: 1.5;"> e </span><a href="/en-US/docs/HTML/Element/Input" style="line-height: 1.5;" title="HTML/Element/Input">caixas de texto</a><span style="line-height: 1.5;"> (</span><strong style="line-height: 1.5;">escrito somente com CSS</strong><span style="line-height: 1.5;">, sem JavaScript), </span></p>

+<h2 id="Especificações">Especificações</h2>

+<table class="standard-table">

+ <thead>

+ <tr>

+ <th scope="col">Especificação</th>

+ <th scope="col">Estado</th>

+ <th scope="col">Comentários</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>

+ <tr>

+ <th scope="col"> </th>

+ <th scope="col"> </th>

+ <th scope="col"> </th>

+ </tr>

+ </tbody>

+</table>

+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>

+<div>

+ {{CompatibilityTable}}</div>

+<div id="compat-desktop">

+ <table class="compat-table">

+ <tbody>

+ <tr>

+ <th>Funcionalidade</th>

+ <th>Chrome</th>

+ <th>Firefox (Gecko)</th>

+ <th>Internet Explorer</th>

+ <th>Opera</th>

+ <th>Safari</th>

+ </tr>

+ <tr>

+ <td>Suporte básico</td>

+ <td>1.0</td>

+ <td>{{CompatGeckoDesktop("1.0")}}</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatVersionUnknown}}</td>

+ </tr>

+ <tr>

+ <td>Atributo <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>Funcionalidade</th>

+ <th>Android</th>

+ <th>Firefox Mobile (Gecko)</th>

+ <th>IE Mobile</th>

+ <th>Opera Mobile</th>

+ <th>Safari Mobile</th>

+ </tr>

+ <tr>

+ <td>Suporte básico</td>

+ <td>{{CompatVersionUnknown}} [1]</td>

+ <td>{{CompatGeckoMobile("1.0")}} [2]</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatVersionUnknown}}</td>

+ </tr>

+ <tr>

+ <td>Atributo <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] No aplicativo Browser para Android 4.1 (e possivelmente versões posteriores), há um bug em que o triângulo indicador de menu ao lado de um {{HTMLElement("select")}} não será exibido se {{ cssxref("background") }}, {{ cssxref("border") }} ou {{ cssxref("border-radius") }} forem aplicados ao {{HTMLElement("select")}}.</p>

+<p>[2] Firefox para Android, por padrão, define uma {{ cssxref("background-image") }} gradiente em todos os elementos <code>&lt;select multiple&gt;</code>. Isso pode ser desabilitado usando <code>background-image: none</code>.</p>

+<p> </p>

+<h2 id="Veja_também">Veja também</h2>

+<ul>

+ <li>Outros elementos relacionados a formulários: {{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")}} e {{HTMLElement("meter")}}.</li>

+</ul>

+<div>

+ {{HTMLRef}}</div>