Bem vindo ao Exemplificando, nesse post, você vai aprender a criar um formulário em HTML, entender suas principais funcionalidades e saber quando usar um formulário.
formulário em HTML
Um formulário é definido pela tag <form></form>. Existem outras tags importantes para criar diferentes tipos de campos em um formulário, tais como:
<input>– Para campos de entrada como texto, senha, checkbox, radio, etc.<select>– Para seleção de opções em um menu dropdown.<textarea>– Para campos de entrada de texto multi-linha.<button>– Para botões de envio ou botões de reset.
Quando usar um formulário?
O formulário é muito utilizado para coletar informações dos usuários. Pode ser para diversos propósitos, como:
-
- Realizar uma cotação de serviços.
- Receber sugestões ou feedbacks.
- Obter o primeiro contato com o cliente em sites de comércio eletrônico.
Logo abaixo, mostrarei dois exemplos de formulário, o primeiro exemplo é apenas o código, e você pode testar em nossa outra postagem, onde ensino criar uma tabela html e logo abaixo terá o quadro para testar seu código HTML, acesse aqui. No Exemplo2 temos o código e a exibição do formulário
Exemplo 1
<div style="border: 1px solid #ccc; background-color: #fff; padding: 20px;">
<h1 style=”text-align: center;”>Formulário de Contato</h1>
<form>
<label for=”nome”>Nome:</label><br>
<input id=”nome” name=”nome” required type=”text” style=”width: 100%; padding: 5px; margin-bottom: 10px;”><br>
<label for=”email”>Email:</label><br>
<input id=”email” name=”email” required type=”email” style=”width: 100%; padding: 5px; margin-bottom: 10px;”><br>
<label for=”mensagem”>Mensagem:</label><br>
<textarea id=”mensagem” name=”mensagem” required rows=”4″ cols=”50″ style=”width: 100%; padding: 5px; margin-bottom: 10px;”></textarea><br>
<button type=”submit” style=”background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;”>Enviar</button>
<button type=”reset” style=”background-color: #f44336; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;”>Limpar</button>
</form>
</div>
Exemplo 2
<div style="border: 1px solid #ccc; background-color: #fff; padding: 20px;">
<form action="/receber_comentario.php" method="post" style="margin: 0 auto; width: 300px;">
<label for="comentario" style="display: block; margin-bottom: 5px;">Comentário:</label>
<textarea id="comentario" name="comentario" rows="4" cols="50" style="width: 100%; padding: 5px; margin-bottom: 10px;" required></textarea><br><br>
</form>
</div>
Conclusão
Os formulários em HTML são uma ferramenta essencial para interação com os usuários em páginas da web. Permitem coletar informações de forma estruturada e eficiente. No exemplo apresentado, vimos como criar um formulário básico e discutimos sua importância e uso. Além disso, mencionamos alguns cenários comuns onde os formulários são empregados, como coletar orçamentos, sugestões ou feedbacks dos usuários. Com a combinação certa de tags HTML e estilos CSS, é possível criar formulários atraentes e funcionais para diversos fins.
Veja mais conteudo sobre Formulário no link https://developer.mozilla.org/pt-BR/Forms/
Deixe um comentário ou sugestão. Estou sempre aqui para ajudar! 😊👍
Compartilha conteúdo
