Curso de HTML / Usar textarea, select, option e button

Use textarea para texto em várias linhas, select com option para uma lista de escolhas preparada, e button para uma ação explícita. Esses elementos têm diferentes maneiras de manter valores e enviar um formulário.

Digite várias linhas com textarea

O valor inicial de um textarea é colocado entre suas tags de abertura e fechamento em vez de em um atributo value. Compare o conteúdo inicial com uma dica que desaparece usando os exemplos de caixa de texto em Adicionar texto indicativo aos campos de formulário.

<label for="message">Sua mensagem</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows e cols influenciam o tamanho inicialmente exibido; o CSS pode ajustar o controle à largura disponível. O name é necessário se seu conteúdo precisar ser enviado. O texto entre as tags se torna um verdadeiro valor inicial. Se você quiser apenas mostrar um exemplo, use um placeholder como dica adicional e mantenha o rótulo. Use textarea em vez de uma entrada de uma única linha quando os leitores precisarem poder editar uma resposta mais longa.

Sugira opções com select e option

<label for="topic">Assunto</label>
<select id="topic" name="topic">
  <option value="order">Pedidos</option>
  <option value="delivery">Entrega</option>
  <option value="other">Outro</option>
</select>

A tela exibe "Pedidos", mas o valor enviado é order. id="topic" conecta o controle ao seu rótulo, enquanto name="topic" nomeia os dados enviados. Escolha as opções value que correspondem ao que o servidor espera. Sem interação, a primeira opção é selecionada. Se os usuários precisarem escolher conscientemente, comece com <option value="">Escolher um assunto</option> e adicione required a select. Se houver um valor padrão razoável, a primeira opção real pode ser preferível.

Teste os controles juntos em um mesmo formulário

Salve este documento com o nome controls.html. A primeira opção vazia e o atributo obrigatório significam que um assunto real deve ser selecionado antes do envio. O botão de redefinir está incluído para este exercício comparativo.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercício sobre controles de formulário</title>
  <style>
    textarea, select { box-sizing: border-box; max-width: 100%; font: inherit; }
    textarea { width: 24rem; }
  </style>
</head>
<body>
  <h1>Praticar com os campos de contato</h1>
  <form id="controls-form" method="get">
    <p><label for="topic-choice">Assunto</label>
      <select id="topic-choice" name="topic" required>
        <option value="">Escolher um assunto</option>
        <option value="order">Pedidos</option>
        <option value="delivery">Entrega</option>
      </select></p>
    <p><label for="message-text">Mensagem</label>
      <textarea id="message-text" name="message" rows="4">Pergunta de teste</textarea></p>
    <button type="submit">Revisar os valores inseridos</button>
    <button type="reset">Restaurar os valores iniciais</button>
  </form>
</body>
</html>

1. Envie sem escolher um assunto para testar a seleção obrigatória.
2. Escolha a entrega, modifique a mensagem e envie. O valor enviado é delivery, enquanto o rótulo visível é «Entrega».
3. Modifique novamente e redefina. O assunto volta à primeira opção e a mensagem retorna ao seu texto inicial.

Um controle sem texto inicial aparece vazio após a reinicialização; um controle com um valor inicial retorna a esse valor. Reabra o arquivo para comparar seu estado inicial.

Referência de textarea na MDN · Referência de select na MDN · Referência de button na MDN

Indique o tipo de cada botão

Dentro de um formulário, um button destina-se por padrão ao envio. Use type="button" para uma ação de script diferente para que ele não envie acidentalmente. Observe como os nomes e valores são enviados em Estrutura do formulário e GET vs. POST.

<form method="get">
  <label for="note">Nota</label>
  <textarea id="note" name="note" rows="4"></textarea>
  <button type="submit">Enviar</button>
  <button type="reset">Redefinir</button>
</form>

Em navegadores que permitem o envio GET de arquivos locais, você pode observar a consulta na URL sem um servidor. Para verificar uma requisição HTTP real no painel Rede, abra a página por um servidor web. A redefinição retorna os controles aos seus valores iniciais; ela nem sempre os torna vazios. Se um textarea começasse com texto, a redefinição restaura esse texto. Um botão de redefinição pode apagar o trabalho de alguém, portanto só o inclua em um formulário real quando tiver um propósito e posição claros. Consulte a referência de elementos HTML da MDN para os atributos individuais.

type="button" impede o envio do formulário, mas não cria uma nova ação por si só. Sem um script conectado, clicar neste botão não faz nada. Diferencie as ações de envio e de redefinição integradas do HTML das ações que requerem um script.