Formulários HTML

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.