Você está acompanhando nossa série Como a Web Funciona. Se ainda não leu as duas primeiras publicações, faça isso primeiro e depois continue aqui.
Resolvi fazer uma publicação sobre os formulários separada do restante do conteúdo por conta do comportamento dos formulários. Enquanto tags como <p>, <h1> são estáticas, os elementos de formulário recebem interação do usuário do seu site.
Assim os dados de um formulário podem ser modificados ou criados a partir do desejo do usuário e estes dados podem ser enviados para algum lugar, como um banco de dados, emails ou outras ferramentas como APIs externas à sua.
Como funcionam os formulários
Formulários são elementos de controle interativo que permitem que um visitante do seu site, faça alguma interação com você, enviando e-mails, mensagens, etc.
É importante ficar atento que existe uma combinação de elementos que devem ser utilizados para que um formulário funcione, são eles: <form>, <label>, <input> e <button>. Estes são os elementos básicos que precisam ser utilizados em um formulário. Vamos ao exemplo:
<form action="pagina-destino.php">
<label for="nome-completo">Nome completo</label>
<input id="nome-completo" type="text" />
<button>Enviar</button>
</form>Lembrando que os formulários podem ser muito mais elaborados, mas nesse momento vamos buscar apenas o entendimento básico deles.
Todos os elementos precisam ficar dentro de uma tag <form>. Essa tag tem alguns atributos que foram omitidos neste momento para facilitar o entendimento.
A tag <label> exibe o título para o campo input a qual se referencia. Essa referência vem através do atributo for, nesse caso, “nome-completo”. O conteúdo do atributo for, deve ser o id do <input> correspondente.
A tag <input> tem, além de outros, os atributos id e type e uma sintaxe um pouco diferente de outras tags. O atributo type pode ter diferentes valores e são padronizados pelo HTML. Você não pode colocar type="tipo-que-inventei", não vai funcionar. Os types mais comuns são: text e password. A versão 5 do HTML trouxe novos types, mas não vamos abordá-los nesse guia.
A tag <button> é um botão clicável utilizado também dentro do <form>. Quando for clicado, as informações serão enviadas para o destino especificado no atributo action conforme o exemplo acima.
