Formulários são fundamentais para a interação entre usuários e sites, permitindo o envio de informações como cadastro, login e feedback. Em HTML, a tag <form> é usada para criar formulários e possui uma série de elementos e atributos que permitem personalizar sua funcionalidade.
Estrutura básica de um formulário
A estrutura básica de um formulário em HTML começa com a tag <form>, onde você define o contêiner do formulário e os principais atributos para o envio dos dados.
<form action="/pagina-de-destino" method="POST">
<!-- Elementos do formulário vão aqui -->
</form>action: Especifica o URL para onde os dados do formulário serão enviados.method: Define o método HTTP para o envio dos dados. Os valores mais comuns são:
GET: Envia os dados na URL. Ideal para consultas, pois permite que o link seja salvo ou compartilhado.POST: Envia os dados no corpo da requisição, sendo mais seguro e adequado para envio de dados confidenciais.
Principais elementos de um formulário
Campo de texto (<input type="text">)
Usado para capturar informações como nomes, endereços, etc.
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>name: Define o nome do campo que será enviado no servidor.id: Associa o<label>ao campo, tornando o formulário mais acessível.required: Indica que o campo é obrigatório.
Campo de e-mail (<input type="email">)
Garante que o usuário insira um endereço de e-mail válido.
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>Campo de senha (<input type="password">)
Oculta o texto digitado pelo usuário, ideal para campos de senha.
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha" required>Campos de opções (Radio e Checkbox)
Radio: Permite selecionar uma única opção entre várias.
<p>Gênero:</p>
<input type="radio" id="masculino" name="genero" value="masculino">
<label for="masculino">Masculino</label>
<input type="radio" id="feminino" name="genero" value="feminino">
<label for="feminino">Feminino</label>Checkbox: Permite selecionar múltiplas opções.
<p>Interesses:</p>
<input type="checkbox" id="musica" name="interesses" value="musica">
<label for="musica">Música</label>
<input type="checkbox" id="esporte" name="interesses" value="esporte">
<label for="esporte">Esporte</label>Caixa de Seleção (<select>)
Permite ao usuário selecionar uma opção em uma lista suspensa.
<label for="cidade">Cidade:</label>
<select id="cidade" name="cidade">
<option value="sp">São Paulo</option>
<option value="rj">Rio de Janeiro</option>
<option value="mg">Minas Gerais</option>
</select>Área de texto (<textarea>)
Ideal para capturar informações de múltiplas linhas, como comentários ou mensagens.
<label for="comentarios">Comentários:</label>
<textarea id="comentarios" name="comentarios" rows="4" cols="50"></textarea>Botão de Envio (<input type="submit">)
Envia os dados do formulário.
<input type="submit" value="Enviar">Exemplo completo de formulário
Aqui está um exemplo de formulário HTML completo com diversos tipos de campos:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Formulário de Cadastro</title>
</head>
<body>
<h2>Formulário de Cadastro</h2>
<form action="/processar-cadastro" method="POST">
<!-- Campo de texto -->
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required><br><br>
<!-- Campo de e-mail -->
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required><br><br>
<!-- Campo de senha -->
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha" required><br><br>
<!-- Radio buttons -->
<p>Gênero:</p>
<input type="radio" id="masculino" name="genero" value="masculino">
<label for="masculino">Masculino</label>
<input type="radio" id="feminino" name="genero" value="feminino">
<label for="feminino">Feminino</label><br><br>
<!-- Checkbox -->
<p>Interesses:</p>
<input type="checkbox" id="musica" name="interesses" value="musica">
<label for="musica">Música</label>
<input type="checkbox" id="esporte" name="interesses" value="esporte">
<label for="esporte">Esporte</label><br><br>
<!-- Seleção -->
<label for="cidade">Cidade:</label>
<select id="cidade" name="cidade">
<option value="sp">São Paulo</option>
<option value="rj">Rio de Janeiro</option>
<option value="mg">Minas Gerais</option>
</select><br><br>
<!-- Área de texto -->
<label for="comentarios">Comentários:</label>
<textarea id="comentarios" name="comentarios" rows="4" cols="50"></textarea><br><br>
<!-- Botão de envio -->
<input type="submit" value="Enviar">
</form>
</body>
</html>Validação de dados no HTML
Para garantir que o usuário preencha corretamente o formulário, HTML oferece várias opções de validação:
required: Torna o campo obrigatório.minlengthemaxlength: Definem o número mínimo e máximo de caracteres permitidos.pattern: Usa expressões regulares para validar o formato dos dados, como uma senha complexa.
Exemplo:
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha" required minlength="8" pattern="[A-Za-z0-9]{8,}">Estilizando Formulários com CSS
Usar CSS ajuda a melhorar a experiência visual e facilita a navegação. Aqui está um exemplo básico:
form {
max-width: 400px;
margin: auto;
}
label, input, textarea, select {
display: block;
width: 100%;
margin: 5px 0;
}
input[type="submit"] {
width: auto;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}Formulários em HTML são essenciais para a interação com o usuário, e saber como configurá-los permite capturar dados de maneira eficiente e segura.
Com as diversas opções de campos, validações e personalizações com CSS, você pode criar formulários profissionais e adaptados às necessidades do seu site.
Conheça a Danki Club e tenha acesso a uma infinidade de cursos na área de programação web, Android e IOS. Desenvolvimento de games, Blockchain e criptomoedas. Produtividade, marketing, empreendedorismo e muito mais!
CLIQUE NA IMAGEM ABAIXO E VEJA MAIS DETALHES:
Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação pelo Instituto Paulista de Pesquisa e Ensino IPEP. Apaixonado por tecnologias e games do tempo da vovó!
0 Comentários