Textarea em HTML
Antes, form="id" e form* tratavam propriedade e encaminhamento de envio. Textarea é outro trabalho: controlo de texto multilinha para comentários e notas. Um input de uma linha não serve bem para parágrafos. Use textarea quando o utilizador precisa de mais do que uma linha.
Por que o textarea existe
Contacto, tickets, bios e avaliações precisam de altura com scroll. Textarea envia esse texto como um único campo com name. Continuam a fazer falta label, name e indícios de tamanho — mas o conteúdo vive entre as tags, não em value como no input.
Resposta direta
1) Escreva textarea com id, name e rows. 2) Ligue um label com for. 3) Texto predefinido entre as tags — não value. 4) Opcional: placeholder, maxlength, readonly, disabled, required, wrap. 5) Entrada multilinha — não a associação form= anterior.
📊 Textarea attributes beginners use
| Attribute | Role | Beginner tip |
|---|---|---|
| name | Submit key | Required if the text should post with the form |
| id | Label hook | Match label for= for accessible naming |
| rows | Visible height hint | Lines of height before scrolling |
| cols | Visible width hint | Prefer CSS width for responsive layouts |
| placeholder | Soft hint | Disappears when the user types |
| maxlength | Character cap | Browser-enforced upper bound |
| readonly / disabled | Lock vs mute | readonly still submits; disabled usually does not |
| wrap | Soft/hard wrap | Affects how line breaks are submitted (soft vs hard) |
Formulário de feedback: caixa de mensagem
Um feedback curto mantém o e-mail como input de uma linha e a mensagem como textarea. O texto inicial fica entre as tags.
<form action="/feedback" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="6" cols="40"
placeholder="What went well? What can improve?">Thanks for reading —</textarea>
<button type="submit">Send feedback</button>
</form>
Ler o demo de feedback
- Multilinha é textarea, não input
- id corresponde ao label for
- name chaveia o parágrafo enviado
- rows/cols sugerem tamanho
- Texto predefinido entre as tags
- Mantenha labels claros
- form= desnecessário aqui — campos dentro do form
Tamanho, limites e wrap
Segundo demo: bio com maxlength, wrap=soft e CSS em vez de cols. readonly num resumo só de leitura.
<label for="bio">Short bio</label>
<textarea id="bio" name="bio" rows="4" maxlength="280"
wrap="soft"
style="width:100%; max-width:28rem; resize:vertical;"
placeholder="Up to 280 characters"></textarea>
<label for="summary">Auto summary (read-only)</label>
<textarea id="summary" name="summary" rows="3" readonly>Generated preview — edit the bio above.</textarea>
Ler o demo de tamanho
- maxlength limita o comprimento
- wrap=soft para quebras visuais sem hard
- CSS width e resize afinam
- readonly vê-se sem editar
- name continua necessário para enviar
- Seguinte: select para escolher de uma lista
Escolher textarea vs input
- Uma linha curta: input
- Parágrafos/mensagens: textarea
- Tamanho com rows e CSS; cols é legado
- Conteúdo predefinido entre tags — não value
- Sempre label e name
- Aninhe no form se puder
- Não confundir com formaction/propriedade
Prática — construir e redimensionar
- Copie o feedback; mude o texto entre tags
- Reduza rows
- Adicione maxlength
- Substitua cols por width CSS
- Teste value um momento e remova
- Frase: textarea entre tags; input com value
- Listas vão no select a seguir
Erros fáceis
- Texto predefinido em value em vez de entre tags
- Esquecer name
- Sem label
- input de uma linha quando precisa de várias
- Confundir com form=/formaction
- Só cols para largura responsive
- disabled em vez de readonly
Resumo
- textarea = texto multilinha
- label e normalmente name
- Texto predefinido entre as tags
- rows/CSS; opcional maxlength, placeholder, readonly
- Não são os atributos de associação do form anterior
- Seguinte: select
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo