Tag <textarea> em HTML

Nosso objetivo neste capítulo é estudar Tag textarea através de exemplos , na expectativa de satisfazer as necessidades dos alunos.

A tag <textarea> em HTML é um elemento de controle de formulário usado para criar um campo de entrada de texto de várias linhas em uma página da web. Ele permite que os usuários insiram e editem várias linhas de texto em um formulário e é comumente usado para comentários, feedback e outros tipos de entrada do usuário que requerem entrada de texto mais longa.

O elemento <textarea> é semelhante ao elemento <input>, mas permite uma área de entrada maior que pode ser expandida vertical e horizontalmente para caber no texto digitado pelo usuário. Ele também oferece suporte a caracteres especiais, como quebras de linha, que não são permitidos em um campo de entrada de linha única.

Índice-

Atributos HTML Textarea

O elemento <textarea> possui alguns atributos adicionais que controlam seu comportamento e aparência:

  1. name: Este atributo é usado para associar a entrada com um nome que pode ser usado para referenciá-la no servidor quando o formulário é enviado.
  2. linhas e colunas: Esses atributos controlam o tamanho da área de texto. O atributo rows especifica o número de linhas de texto visíveis, enquanto o atributo cols especifica o número de colunas visíveis.
  3. Conteúdo: O conteúdo entre as tags <textarea> de abertura e fechamento é o valor padrão que será exibido no campo de entrada. Esse conteúdo pode ser pré-preenchido com um valor padrão ou um texto de espaço reservado.

Usando a tag <textarea> , você pode criar um campo de entrada de texto para os comentários dos usuários:

Example: 

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<form>
<label for="comments">Enter your comments:</label>
<textarea id="comments" name="comments" rows="5" cols="30"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você pode desativar a opção de redimensionamento padrão seguindo estas etapas:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
resize: none;
}
</style>
</head>
<body>
<form>
<label for="mrreview">Review of mrexamples:</label>
<textarea id="mrreview" name="mrreview" rows="4" cols="50">
At
mrexamples.com you will learn how to make a website. They offer free tutorials
in all web development technologies.
</textarea>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Adicionar atributos somente leitura ou desativados o torna não editável:

Example: 

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<form>
<label for="mrreview">Mr Examples:</label>
<textarea readonly>This textarea is readonly</textarea>
<textarea disabled>This textarea is disabled</textarea>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

A tag Textarea também pode ser estilizada usando CSS aqui está um exemplo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<title>Example of the textarea tag</title>
<style>
textarea {
font-size: 16px;
padding: 10px;
border-radius: 5px;
border: 2px solid gray;
width: 50%;
}
</style>
</head>
<body>
<h1>Leave a Comment</h1>
<form>
<label for="comments">Enter your comments:</label>
<textarea id="comments" name="comments" rows="5" cols="30" maxlength="500" placeholder="Enter your comments here"></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html><html><p>
Execute
</p></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conselho: Para garantir métodos eficazes de acessibilidade, inclua a tag <label> !

Uso da área de texto da tag

A Tag <textarea> representa um controle de entrada de dados de múltiplas linhas.

O elemento Tag textarea <textarea> é comumente utilizado em formulários para armazenar informações fornecidas pelos usuários, principalmente críticas e comentários.

Não há limite para o número de caracteres que podem ser contidos em uma área de texto, e o texto é exibido em uma fonte de largura fixa (geralmente Courier).

Usando Tag textareas , determinamos a largura e a altura de uma área de texto usando os atributos <cols> e <rows> ou através do CSS.

Para que os dados do formulário sejam acessados ​​após o envio, é necessário o atributo name. Se o atributo name não estiver presente, nenhum dado da área de texto será enviado ao servidor.

Para relacionar um rótulo a uma área de texto, o atributo id deve ser usado.

A tag <textarea> pode ser usada de várias maneiras, como:

  • <textarea> pode ser usado para criar campos de entrada para comentários do usuário, feedback e outros tipos de entrada de texto mais longo.
  • Um formulário de contato pode incluir um campo <textarea> para os usuários inserirem sua mensagem ou consulta.
  • <textarea> é comumente usado em sistemas de gerenciamento de conteúdo para permitir que os usuários insiram e editem grandes quantidades de texto para artigos, postagens de blog e outros tipos de conteúdo.
  • Alguns editores de HTML usam <textarea> para fornecer uma área de entrada de texto maior para edição de código HTML.
  • Sistemas de mensagens, como bate-papo ou e-mail, podem usar <textarea> para fornecer uma área de entrada de texto maior para compor mensagens.

Atributos

Global

A Tag textarea <textarea> são compatíveis com Atributos Globais em HTML.

Evento

A tag <textarea> também acomoda atributos de evento HTML.

Lista de Atributos

Atributo Valor Visão geral
auto-foco auto-foco Permite que a área de texto ganhe foco automaticamente ao carregar a página.
cols número Determina a largura de uma área de texto que será exibida.
dirname textareaname .dir Declare que a direção do texto da área de texto deve ser enviada.
desabilitado desabilitado Desative a área de texto.
forma form_id Determine o formulário para o qual a área de texto é atribuída.
comprimento máximo número Permite que a área de texto contenha um número máximo de caracteres.
nome texto Forneça um nome para a área de texto.
espaço reservado texto Forneça uma breve descrição do resultado pretendido da área de texto.
somente leitura somente leitura Fornece instruções para tornar uma área de texto somente leitura.
obrigatório obrigatório Indica que uma área de texto é necessária ou deve ser preenchida
linhas número Define o número de linhas visíveis em uma área de texto
enrolar duro
macio		 Sempre que enviado em um formulário, isso indica como o texto em uma área de texto deve ser quebrado

Compatibilidade do navegador

Elemento
<área de texto> Sim Sim Sim Sim Sim

Vantagens da tag textarea

Algumas dessas vantagens incluem:

  • A tag <textarea> permite que os usuários insiram e editem várias linhas de texto, tornando-se um mecanismo de entrada flexível para vários tipos de entrada do usuário.
  • <textarea> oferece suporte a leitores de tela e outras tecnologias assistivas, tornando-o acessível a usuários com deficiências.
  • <textarea> fornece uma experiência de usuário consistente em diferentes navegadores e plataformas da Web, tornando mais fácil para os desenvolvedores criar formulários da Web que funcionem de maneira confiável para todos os usuários.
  • A aparência e o comportamento de <textarea> podem ser personalizados usando CSS, permitindo que os desenvolvedores criem campos de entrada que correspondam à aparência de seu site.
  • <textarea> é suportado por todos os navegadores da web modernos, tornando-o uma escolha confiável para criar formulários da web que funcionam em diferentes plataformas e dispositivos.
  • <textarea> fornece uma grande área de entrada que permite aos usuários inserir muito texto de uma só vez, tornando-o ideal para campos de formulário mais longos, como comentários, feedback e entrada de mensagens.
Se este artigo foi informativo o suficiente para atender aos seus desejos educacionais, compartilhe essas informações significativas com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.