Formulários HTML: Crie e Estruture Formulários Web

Introdução

Os formulários HTML são uma parte fundamental da web, permitindo que os usuários interajam com sites inserindo informações. Isso pode variar de uma caixa de pesquisa simples a uma página de registro complexa. Neste laboratório, você aprenderá os conceitos básicos da criação de um formulário HTML, incluindo como adicionar campos de texto, rótulos (labels) e botões de envio (submit buttons). Construiremos um formulário de contato simples passo a passo.

O ambiente de laboratório já iniciou um servidor web para você. Você pode escrever seu código HTML no arquivo index.html e ver a pré-visualização ao vivo clicando na aba Web 8080 no canto superior esquerdo.

Criar a tag form com o atributo action

Neste passo, começaremos criando o contêiner para os nossos elementos de formulário. A tag <form> é usada para criar um formulário HTML para entrada do usuário. Todos os elementos do formulário, como campos de texto, botões e caixas de seleção (checkboxes), devem ser colocados dentro de uma tag <form>.

O atributo action especifica para onde enviar os dados do formulário quando o formulário for submetido. Para este laboratório, o deixaremos vazio, pois estamos focando na estrutura HTML, não no processamento do back-end.

Por favor, abra o arquivo index.html no explorador de arquivos à esquerda e adicione o seguinte código.

<form action=""></form>

Após adicionar o código, você pode mudar para a aba Web 8080 para pré-visualizar a página. Você ainda não verá nada, pois o formulário está atualmente vazio.

Adicionar a tag input com type text para campo de texto

Neste passo, adicionaremos um campo para os usuários inserirem texto. A tag <input> é um dos elementos de formulário mais utilizados. Ela pode ser exibida de várias maneiras, dependendo do atributo type.

Para criar um campo de entrada de texto de linha única, usamos type="text". Isso é perfeito para coisas como nomes de usuário, nomes ou endereços de e-mail.

Agora, vamos adicionar um campo de entrada de texto dentro das tags <form> no seu arquivo index.html.

<form action="">
  <input type="text" />
</form>

Salve o arquivo e mude para a aba Web 8080. Agora você deverá ver uma pequena caixa de texto na página onde pode digitar.

Inserir a tag input com type submit para botão

Neste passo, adicionaremos um botão para permitir que os usuários submetam o formulário. Podemos criar um botão de submissão usando novamente a tag <input>, mas desta vez com type="submit".

Quando um usuário clica neste botão, os dados do formulário são enviados para o servidor especificado no atributo action da tag <form>. Você pode definir o texto exibido no botão usando o atributo value.

Vamos adicionar um botão de submissão ao nosso formulário em index.html.

<form action="">
  <input type="text" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Também adicionamos as tags <br><br> para criar algum espaço vertical entre o campo de texto e o botão para um melhor layout. Salve o arquivo e verifique a aba Web 8080 para ver o novo botão "Submit".

Usar a tag label com o atributo for para rotulagem

Neste passo, adicionaremos um rótulo ao nosso campo de texto. A tag <label> define um rótulo para muitos elementos de formulário. Ela melhora a usabilidade e a acessibilidade, pois clicar no rótulo focará o campo de entrada correspondente.

Para conectar um <label> a um <input>, o atributo for do <label> deve ser o mesmo que o atributo id do <input>.

Vamos adicionar um id à nossa entrada de texto e um <label> correspondente em index.html.

<form action="">
  <label for="username">Name:</label><br />
  <input type="text" id="username" name="username" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Adicionamos um label para "Name:" e o vinculamos ao campo de entrada usando id="username" e for="username". Também adicionamos um atributo name à entrada, que é importante para identificar os dados quando o formulário é submetido.

Salve o arquivo e visualize as alterações na aba Web 8080. Agora, se você clicar no texto "Name:", o cursor se moverá automaticamente para a caixa de texto.

Adicionar a tag textarea para entrada de múltiplas linhas

Neste passo, adicionaremos uma área de texto maior para os usuários escreverem uma mensagem. Enquanto <input type="text"> é para uma única linha de texto, a tag <textarea> é usada para entrada multilinha.

Você pode controlar o tamanho de um <textarea> com os atributos rows e cols, que especificam o número visível de linhas e caracteres por linha, respectivamente.

Vamos adicionar um <textarea> para uma mensagem ao nosso formulário, completo com seu próprio <label>. Atualize seu arquivo index.html com o código final abaixo.

<form action="">
  <label for="username">Name:</label><br />
  <input type="text" id="username" name="username" />
  <br /><br />
  <label for="message">Message:</label><br />
  <textarea id="message" name="message" rows="4" cols="30"></textarea>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Agora nosso formulário tem um campo de nome e uma área de mensagem. Salve o arquivo e dê uma olhada no formulário completo na aba Web 8080. Você agora tem um formulário HTML funcional e bem estruturado.

Resumo

Parabéns! Você construiu com sucesso um formulário HTML básico. Neste laboratório, você aprendeu a:

Usar a tag <form> como um contêiner para elementos de formulário.
Criar um campo de texto de linha única com <input type="text">.
Criar um botão de envio com <input type="submit">.
Melhorar a acessibilidade e usabilidade associando um <label> a um campo de entrada usando os atributos for e id.
Adicionar uma área de texto multilinha com a tag <textarea>.

Estes são os blocos de construção fundamentais para criar formulários interativos na web. Agora você pode explorar outros tipos de entrada e atributos de formulário para construir formulários mais complexos e poderosos.