Tutorial de Entrada Multilinha HTML - Aprenda a Usar Textarea

Introdução

A tag HTML <textarea> permite que os utilizadores insiram e submetam texto livre dentro de um formulário. Neste laboratório, vamos criar um formulário HTML simples com uma entrada <textarea> e aplicar alguns atributos comumente usados.

Nota: Pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, pode atualizar o separador Web 8080 para visualizar a página web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 92%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Criar a Estrutura HTML

Crie um ficheiro HTML vazio chamado index.html e insira o código boilerplate básico do HTML5.

<!doctype html>
<html>
  <head>
    <title>Tutorial da Tag HTML Textarea</title>
  </head>
  <body>
    <!-- Your HTML code here -->
  </body>
</html>

Adicionar um Elemento de Formulário

Adicione um elemento <form> ao corpo HTML. Usaremos este formulário para recolher informações do utilizador.

<form>
  <!-- Form elements go here -->
</form>

Adicionar um Input Textarea

Adicione um elemento <textarea> dentro do elemento <form>. Pode personalizar o tamanho da área de texto definindo os atributos rows e cols.

<form>
  <label for="feedback">Introduza o seu feedback:</label>
  <textarea id="feedback" name="feedback" rows="10" cols="50"></textarea>
</form>

Aqui, adicionámos uma etiqueta (label) para descrever o campo de entrada (feedback) e uma entrada <textarea> com um atributo id de "feedback". O atributo name é usado para identificar o campo de entrada no lado do servidor.

Adicionar Outros Atributos de Formulário

Podemos adicionar outros atributos HTML aos nossos elementos de formulário e de entrada. Por exemplo, podemos adicionar um atributo required para garantir que o utilizador insira algum texto.

<form>
  <label for="feedback">Introduza o seu feedback:</label>
  <textarea
    id="feedback"
    name="feedback"
    rows="10"
    cols="50"
    required
  ></textarea>
  <input type="submit" value="Submit Feedback" />
</form>

Aqui, adicionámos um elemento input do tipo submit para permitir que o utilizador envie o seu feedback. Agora, o utilizador não pode enviar um formulário em branco, uma vez que o atributo required foi adicionado ao <textarea>.

Personalização Adicional com CSS

Finalmente, pode aplicar alguns estilos CSS aos elementos do formulário e de entrada para tornar o formulário mais apelativo visualmente.

<style>
  form {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px auto;
    max-width: 500px;
  }

  label,
  textarea,
  input[type="submit"] {
    display: block;
    margin-bottom: 10px;
    width: 100%;
  }
</style>

Aqui, definimos uma borda, adicionámos preenchimento (padding) e margem (margin), e restringimos a largura máxima do formulário. Também ajustámos a exibição (display) e a largura da etiqueta (label), da área de texto (textarea) e dos elementos de entrada de envio (submit).

Resumo

Neste laboratório, aprendemos como criar um formulário HTML básico com uma entrada <textarea> e aplicar atributos comumente usados. Também aplicamos alguns estilos CSS para personalizar a aparência dos elementos do formulário. Pode personalizar ainda mais o formulário e os elementos de entrada de acordo com as suas necessidades.