HTML5: Forms

HTML Forms permitem a interação do usuário com a aplicação, coletando e enviando dados ao servidor para processamento.

O que são os Forms?

Qual problema os HTML Forms resolveram?

Antes de tudo, e dos HTML Forms o envio de dados de um usuário para o servidor era mais limitado e menos intuitivo. Não havia uma maneira direta de capturar entradas de texto, escolhas em dropdowns ou upload de arquivos de forma padronizada. As interfaces de interação eram mais estáticas e exigiam soluções personalizadas para cada tipo de input de usuário. Isso dificultava o desenvolvimento de aplicações dinâmicas e interativas.

Ao passo que, com o advento dos Forms em HTML, foi possível criar interfaces dinâmicas que permitem uma comunicação bidirecional entre o front-end e o back-end. Finalmente agora, o desenvolvedor pode facilmente capturar dados como nome, e-mail, senha e outros detalhes pessoais em uma interface amigável e encaminhá-los ao servidor. Dessa maneira, isso revolucionou o desenvolvimento de aplicações web e facilitou a interação do usuário com sistemas complexos.

Vamos a alguns exemplos de código:

Formulário básico de login

<form action="/login" method="POST">
<label for="usuario">Usuário:</label>
<input type="text" id="usuario" name="usuario" required>

<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha" required>

<button type="submit">Login</button>
</form>

Este exemplo demonstra um formulário simples de login. Ele coleta o nome de usuário e a senha, enviando os dados via método POST para a URL /login.

Formulário com validação de e-mail

<form action="/subscribe" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<button type="submit">Assinar</button>
</form>

Neste exemplo, utilizamos o tipo email para validar automaticamente o campo de e-mail. O navegador garante que o valor inserido tenha o formato correto antes de enviar.

Formulário com seleção de opções (radio buttons)

<form action="/survey" method="POST">
<p>Escolha a sua linguagem de programação favorita:</p>
<input type="radio" id="python" name="language" value="python">
<label for="python">Python</label><br>

<input type="radio" id="javascript" name="language" value="javascript">
<label for="javascript">JavaScript</label><br>

<input type="radio" id="csharp" name="language" value="csharp">
<label for="csharp">C#</label><br>

<button type="submit">Submit</button>
</form>

Assim sendo, aqui, o usuário pode escolher sua linguagem de programação preferida através de botões de rádio. Apenas uma opção é permitida por vez.

Formulário com upload de arquivo

<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="file">Escolha o arquivo para upload:</label>
<input type="file" id="file" name="file">

<button type="submit">Upload</button>
</form>