DEV Community

Cover image for Criar um formulário HTML com campos relevantes
Stefany Repetcki
Stefany Repetcki

Posted on

Criar um formulário HTML com campos relevantes

Criar um formulário HTML pode ser um desafio para muitos desenvolvedores, especialmente se eles estão iniciando. Neste artigo, vamos mostrar como criar um formulário HTML com campos relevantes, fornecendo exemplos para ajudar nós desenvolvedores a entender melhor a criação de formulários.

1. Formulário de contato

Um formulário de contato é um dos tipos mais comuns de formulários HTML que você pode criar. Ele permite que os usuários enviem mensagens para você através do site. Um exemplo de código para um formulário de contato pode ser:

<form action="enviar.php" method="post">

  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>

  <label for="mensagem">Mensagem:</label>
  <textarea id="mensagem" name="mensagem" required></textarea>

  <input type="submit" value="Enviar">
</form>
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, há campos para o nome, e-mail e mensagem do usuário, todos com a tag <label> para indicar o tipo de informação solicitada. Além disso, há a tag <textarea> para o campo de mensagem, permitindo que o usuário escreva mais texto.

2. Formulário de cadastro

Outro tipo comum de formulário é o formulário de cadastro, que é usado para coletar informações do usuário para criar uma conta ou perfil. Um exemplo de código para um formulário de cadastro pode ser:

<form action="cadastrar.php" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>

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

  <label for="confirma_senha">Confirme a senha:</label>
  <input type="password" id="confirma_senha" name="confirma_senha" required>

  <input type="submit" value="Cadastrar">
</form>
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, há campos para o nome, e-mail, senha e confirmação de senha do usuário, todos com a tag <label> para indicar o tipo de informação solicitada. Além disso, há a tag <input type="password"> para os campos de senha, ocultando a entrada do usuário.

3. Formulário de pesquisa

Um formulário de pesquisa é usado para permitir que os usuários encontrem informações específicas no seu site. Um exemplo de código para um formulário de pesquisa pode ser:

<form action="buscar.php" method="get">
  <label for="pesquisa">Pesquisar:</label>
  <input type="text" id="pesquisa" name="pesquisa" required>

  <input type="submit" value="Buscar">
</form>
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, há um campo para o usuário inserir o termo de pesquisa, com a tag <label> para indicar o tipo de informação solicitada. Além disso, o formulário utiliza o método.

Stefany Repetcki - Dev Front End

Top comments (1)

Collapse
 
guilhermepereirafonseca profile image
Guilhermepereirafonseca

ótimo