Formulários HTML: A Porta de Entrada para a Interação com o Utilizador
Até agora, os nossos sites têm sido uma "rua de sentido único". Nós apresentamos informação, e o visitante consome. Mas a web é sobre diálogo, sobre interação. E a principal ferramenta para iniciar esse diálogo é o formulário HTML.
Seja para uma página de contato, uma caixa de login, um campo de pesquisa ou uma compra online, os formulários estão em todo o lado. Hoje, vamos construir a fundação, aprendendo as tags e os atributos essenciais para criar um formulário de contato simples, mas funcional.
Parte 1: A Estrutura Principal - <form>, <label> e <input>
Tudo começa com a tag <form>, que serve como o contentor principal para todos os nossos campos.
Dentro do formulário, os dois elementos mais importantes são:
<input>: É o campo onde o utilizador insere os dados. Existem muitos tipos deinput!<label>: É a etiqueta de texto que descreve o que oinputpede (Ex: "O seu Nome:"). É crucial para a acessibilidade.
Vamos ao nosso ficheiro contato.html e substituir o conteúdo do seu <body> por este formulário básico:
<body>
<main>
<h1>Formulário de Contato</h1>
<form action="/enviar-mensagem" method="post">
<div>
<label for="nome">O seu Nome:</label>
<input type="text" id="nome" name="nome_utilizador">
</div>
<div>
<label for="email">O seu Email:</label>
<input type="email" id="email" name="email_utilizador">
</div>
<div>
<label for="mensagem">A sua Mensagem:</label>
<textarea id="mensagem" name="texto_mensagem"></textarea>
</div>
<div class="button">
<button type="submit">Enviar Mensagem</button>
</div>
</form>
</main>
</body>
Parte 2: Desvendando o Código
Vamos analisar o que acabámos de escrever:
<form action="/enviar-mensagem" method="post">:action: Diz ao navegador para onde enviar os dados do formulário quando for submetido. Por agora, isto é apenas um exemplo, pois precisaríamos de PHP para processar estes dados.method="post": É o método HTTP usado para enviar os dados. "POST" é usado para enviar dados para serem processados.
<label for="nome">e<input id="nome">: A ligação mágica! O atributofornalabeldeve ser exatamente igual ao atributoidnoinput. Isto faz duas coisas:Ajuda os leitores de ecrã a associar a etiqueta ao campo.
Permite que o utilizador clique na etiqueta de texto para focar automaticamente no campo de input.
Tipos de
<input>:type="text": Um campo de texto simples para uma única linha.type="email": Um campo de texto que o navegador espera que contenha um email. Em telemóveis, ele até mostra um teclado otimizado com o símbolo "@".
<textarea>: Usamos esta tag quando esperamos que o utilizador escreva um texto mais longo, com várias linhas, como uma mensagem.<button type="submit">: Este é o nosso botão de submissão. Quando clicado, ele aciona oactiondo formulário.
Conclusão
Que passo incrível! Acabámos de construir a nossa primeira ponte de interação. Agora já sabes como pedir informações aos teus utilizadores, seja um nome, um email ou uma mensagem.
Se abrires a página, vais notar que o formulário está "cru", sem qualquer estilo. Funciona, mas não é bonito. Isso é de propósito!
Na nossa próxima aula, vamos pegar neste formulário e usar todo o nosso conhecimento de CSS para o transformar numa peça de design bonita e fácil de usar. Vamos estilizar os campos, os botões e dar-lhe um aspeto profissional. Até lá!
Comentários
Enviar um comentário