22.01.2025

Como Inserir Texto Multilinha em HTML com o Tipo de Input='Text'

Resposta Rápida

Para entradas de texto multilinha, é recomendado usar o elemento HTML <textarea> em vez de <input type="text">. O tamanho deste elemento pode ser ajustado usando os atributos rows e cols, ou de forma mais precisa, através de CSS:

<textarea rows="4" cols="50">Digite seu texto aqui...</textarea>

Eficácia do Uso do <textarea>

O elemento <textarea> permite a entrada de texto por várias linhas e pode redimensionar-se automaticamente de acordo com o conteúdo inserido. Para tornar o posicionamento do elemento mais flexível, você pode definir a largura em porcentagens usando width: 100%;, o que melhora a interação com os campos de texto.

Aprimorando o <textarea>

Aplicar CSS e JavaScript ao elemento <textarea> permite expandir as opções de personalização e interação:

• Controle de Tamanho: As propriedades width e height em CSS possibilitam ajustes precisos na aparência do campo de entrada.
• Ajuste Automático de Altura: A função auto_height(this) no evento onInput permite que a altura do campo se adapte ao volume de texto em tempo real.

function auto_height(elem) {
  // Redefinir a altura para corresponder ao volume de texto atual
  elem.style.height = '1px';
  elem.style.height = `${elem.scrollHeight}px`;
}

Para ativar a função JavaScript, você precisa adicionar um manipulador de eventos ao elemento <textarea>:

<textarea rows="1" onInput="auto_height(this)"></textarea>

Visualização

<input type="text" /> é projetado para entrada de texto em uma única linha. Esta é a solução perfeita para anotações curtas, como "Yoda esteve aqui!":

Entrada de uma linha: "Yoda esteve aqui!"

Quando mais informações precisam ser transmitidas, o <textarea> vem ao resgate:

<textarea rows="4" cols="50">
"Faça ou não faça, não há tentativa.
Para ser realmente grande é preciso ver o mundo através dos olhos de uma criança.
Um Jedi utiliza a Força para conhecimento e defesa, nunca para ataque."
</textarea>

Em resumo das diferenças:

Entrada de uma linha = Mensagem curta 🦉  
Entrada multilinha = História extensa 🦖

Trabalhando com <textarea>

Você pode trabalhar com o <textarea> de maneira bastante flexível. Aqui estão vários exemplos de uso:

Adaptabilidade a Tamanhos de Tela

Use valores de largura em porcentagem no CSS para escalar o <textarea> com o tamanho da janela do navegador, evitando atributos de largura fixos.

Configurações Iniciais de Exibição

Configure um campo de entrada compacto com <textarea>, definindo o atributo rows para um valor mínimo, permitindo a expansão dinâmica através do JavaScript para melhorar a acessibilidade e a aparência.

Personalização de Estilo

Garanta a unidade de design e legibilidade para os campos de texto aplicando sua classe CSS ao <textarea>, por exemplo, .auto_height { /* estilos */ }, para integrar com a estética geral do formulário.

Recursos Úteis

1. <textarea>: Elemento de Texto - HTML: Linguagem de Marcação Hiperttexto | MDN — Descrição Detalhada do elemento HTML <textarea>.
2. Tag textarea HTML - W3Schools — Guia para trabalhar com entrada de texto multilinha.
3. Serviço de Validação de Marcação do W3C — Ferramenta para validar código HTML quanto à conformidade com os padrões.
4. Padrão HTML — Especificação Oficial do elemento HTML <input>.
5. WebAIM: Criando Formulários Acessíveis - Controles de Formulário Acessíveis — Recomendações para criar controles de formulário acessíveis, incluindo <textarea>.

Video

Navigation