Selecione o valor padrão em HTML

Este artigo mostra como definir uma opção como escolha inicial em uma lista suspensa HTML. Coloque o atributo selected na opção desejada <option>, dentro de <select>. Você pode escrever o atributo com um valor explícito ou usar sua forma booleana, sem valor. Os dois exemplos abaixo usam as mesmas opções e valores para que você possa comparar diretamente as duas formas.

Defina uma opção padrão com selected="selected"

Escreva selected="selected" na tag de abertura da opção que deve estar selecionada quando a página for carregada pela primeira vez. O atributo pertence a <option>, não a <select> nem a uma tag <selected> separada. Neste exemplo, a terceira opção é selecionada inicialmente e seu valor enviado é 3.

A opção selecionada permanece na posição original da lista. Adicionar o atributo define a seleção inicial; não move a opção para antes das outras. Quem usa a página pode escolher outra opção, que passa a ser a seleção atual.

O atributo name fornece um nome de campo ao controle do formulário, e o value da opção selecionada fornece o valor desse campo quando o formulário é enviado. O rótulo é associado ao controle por meio de valores correspondentes em for e id, o que ajuda pessoas que usam tecnologia assistiva a entender a opção escolhida. Se a página precisar começar com outra opção, mova o atributo selected para ela.

O HTML a seguir é um exemplo de marcação estática. Ele ilustra o código-fonte da página e não é o resultado de uma execução.

<label for="number">Choose a number:</label>
<select id="number" name="number">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected="selected">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

Este exemplo executável em JavaScript modela os valores das opções da marcação e apresenta o valor da opção marcada como selecionada. O comportamento do navegador é mostrado pelos exemplos HTML acima.

const options = [
  { value: "1", selected: false },
  { value: "2", selected: false },
  { value: "3", selected: true },
  { value: "4", selected: false },
  { value: "5", selected: false },
];

const initialValue = options.find((option) => option.selected).value;
console.log(initialValue);

3

Use o atributo booleano selected

selected é um atributo booleano: sua presença marca a opção como selecionada inicialmente. Em HTML, você pode omitir seu valor, escrevendo apenas selected, ou usar a forma explícita selected="selected" mostrada acima. Neste caso, as duas formas expressam a mesma escolha; o nome do atributo deve continuar sendo selected.

Neste exemplo correspondente, a segunda opção é a escolha inicial. Seu value é 2, enquanto o texto exibido para quem lê é Two. Manter um value em cada opção deixa claro o valor do formulário e o diferencia do rótulo exibido. Se o formulário for enviado antes de a pessoa alterar a escolha, será enviado o valor da opção selecionada.

Use essa forma booleana quando quiser escrever HTML mais conciso. Adicione o atributo dentro da tag de abertura exatamente da opção que deseja selecionar. Não escreva <selected> após uma opção: essa não é a sintaxe do atributo. A opção permanece na posição em que foi listada, e a pessoa ainda pode escolher outro valor.

Este também é um exemplo de marcação estática, não uma listagem de resultados em tempo de execução.

<label for="number-short">Choose a number:</label>
<select id="number-short" name="number">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>