select, textarea e botões
Quando as opções são limitadas, um select evita erros de digitação. Quando o texto é longo, um textarea dá espaço. E nem todo botão deveria enviar o formulário.
Estudar esta lição interativa →Nem todo campo é um <input> de uma linha. Quando você quer que a pessoa escolha entre um conjunto fechado de opções (um país, um estado, um assunto), um menu suspenso evita erros de digitação e padroniza a resposta. Quando o texto pode ser longo (uma mensagem, um comentário), um campo de várias linhas é mais confortável. E, para fechar o formulário, existe o botão, que também tem os seus detalhes.
<select>
Menu suspenso. Cada opção é uma tag <option> dentro dele, com o value que será enviado.
<textarea>
Campo de texto de várias linhas, ótimo para mensagens e comentários. O atributo rows sugere a altura inicial.
<button>
O elemento de botão. O atributo type define o comportamento: submit (envia o formulário), reset (devolve todos os campos ao valor inicial) ou button (não faz nada sozinho, para lógica sob medida).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Um select, um textarea e dois botões (enviar e limpar).
Um exemplo de produto real: o formulário de "Fale conosco" de praticamente qualquer site usa esse trio, um select para o assunto ("Dúvida", "Reclamação", "Elogio"), um textarea para a mensagem em si, e um button para enviar.
Dentro de um <form>, um <button> sem o atributo type assume, por padrão, type="submit". Isso pega muita gente de surpresa: um botão pensado só para, digamos, "mostrar mais opções" acaba enviando o formulário inteiro sem querer, porque ninguém especificou type="button" nele. Regra prática: em formulários com mais de um botão, seja sempre explícito sobre o type de cada um.
O exemplo traz um type="reset" só para você ver o que ele faz: ao clicar, todos os campos voltam ao valor inicial, sem pedir confirmação. Num formulário longo, um clique sem querer apaga tudo o que a pessoa digitou, e raramente alguém precisa dele. Na dúvida, não coloque. O que o botão de envio faz com os dados (e por que o name de cada campo importa) é o assunto da próxima lição.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Monte o select, o textarea e o botão.