HTML5 Textarea Attributes: Here’s What You Should Know

admin

What is <textarea> Used For?

A maioria dos formulários HTML é composta por um elemento do formulário pai, um punhado de elementos de entrada (pelo menos um dos quais será do tipo submeter), e uma ou mais áreas de texto. Se você precisar de campos de formulário para aceitar endereços de e-mail, números de telefone e outros conteúdos fáceis de definir, use o tipo de entrada apropriado. Entretanto, quando você precisar de um campo que possa aceitar qualquer combinação e comprimento de letras, números e símbolos de texto simples, <textarea> é o elemento que você está procurando.

HTML5 Textarea Attributes

HTML5 introduziu alguns novos atributos que podem ser usados com elementos de área de texto. Aqui estão alguns dos atributos mais importantes:

  • form: Associar a área de texto a um formulário. Use o atributo ID do formulário como o valor para os atributos do formulário de área de texto. Isto permite que você coloque uma área de texto em qualquer lugar em uma página web, mesmo fora do elemento do formulário, e ainda tenha o conteúdo da área de texto incluído quando o formulário é submetido.
  • maxlength e minlength: Usado para especificar um número mínimo ou máximo de caracteres que podem ser inseridos em uma área de texto.
  • placeholder: Adiciona texto de espaço reservado à área de texto que desaparece assim que um usuário coloca o cursor dentro do elemento.
  • required: Requer que a área de texto contenha conteúdo antes de permitir a submissão de formulários.
  • wrap: Especifica se devem ou não ser adicionados retornos difíceis ao conteúdo submetido em uma área de texto.

Atributos em Ação

Aqui está um exemplo de como alguns desses novos atributos podem ser usados para controlar o comportamento de uma área de texto.

<p>This text area is limited to just 10 characters</p> <textarea cols="50" rows="3" maxlength="10" placeholder="Just 10 characters allowed"></textarea> <p>This text area is readonly and cannot be changed</p> <textarea cols="50" rows="3" readonly>This value can't be changed</textarea>

If we pair those textarea elements with a simple script and button element, we get the following form:

Adam is a technical writer who specializes in developer documentation and tutorials.