---
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> (<select>) 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"><!-- O segundo valor estará selecionado inicialmente -->
<select name="select">
<option value="valor1">Valor 1</option>
<option value="valor2" selected>Valor 2</option>
<option value="valor3">Valor 3</option>
</select>
</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', '<select>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}</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="Browser_compatibility">Compatibilidade com 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><select multiple></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>