📋Tags de Formulário

A tag <input> cria campos de entrada: text para texto, password para senhas, email para e-mails, checkbox para seleções e radio para opções. Formulários (<form>) coletam e enviam dados do usuário.

Introdução

A tag <input> é usada em HTML para criar diferentes tipos de campos de entrada em formulários. Dependendo do atributo type, você pode criar campos de texto, senhas, e-mail, caixas de seleção e botões de opção. Vamos explorar os tipos mais comuns e o uso do atributo placeholder.

Tipos Comuns de <input>

1. Text (type="text"):

   • Cria um campo de entrada de texto onde o usuário pode digitar texto livremente.

   <label for="nome">Nome:</label>
   <input type="text" id="nome" name="nome" placeholder="Digite seu nome">

2. Password (type="password"):

   • Cria um campo de entrada onde o texto digitado é mascarado com asteriscos ou pontos para esconder a senha.

   <label for="senha">Senha:</label>
   <input type="password" id="senha" name="senha" placeholder="Digite sua senha">

3. Email (type="email"):

   • Cria um campo de entrada específico para e-mails. Este tipo de campo valida automaticamente se o texto digitado está no formato de um endereço de e-mail.

   <label for="email">E-mail:</label>
   <input type="email" id="email" name="email" placeholder="Digite seu e-mail">
   

4. Checkbox (type="checkbox"):

   • Cria uma caixa de seleção que o usuário pode marcar ou desmarcar.

   <label for="newsletter">Assinar newsletter:</label>
   <input type="checkbox" id="newsletter" name="newsletter">

5. Radio (type="radio"):

   • Cria um botão de opção que permite ao usuário selecionar apenas uma opção entre várias.

   <label for="genero">Gênero:</label>
   <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>

Uso do Atributo placeholder

O atributo placeholder fornece uma dica ou instrução curta dentro do campo de entrada, ajudando o usuário a entender o que deve ser inserido no campo.

Exemplo de Placeholder:

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Digite seu nome">

No exemplo acima, o texto "Digite seu nome" aparecerá dentro do campo de entrada até que o usuário comece a digitar.

Uso de Formulários

Um formulário em HTML é usado para coletar dados do usuário e enviar esses dados para um servidor para processamento. A tag <form> é usada para definir um formulário.

Estrutura Básica de um Formulário

<form action="/submit" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" placeholder="Digite seu nome">
  
  <label for="senha">Senha:</label>
  <input type="password" id="senha" name="senha" placeholder="Digite sua senha">
  
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" placeholder="Digite seu e-mail">
  
  <label for="newsletter">Assinar newsletter:</label>
  <input type="checkbox" id="newsletter" name="newsletter">
  
  <label for="genero">Gênero:</label>
  <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>
  
  <input type="submit" value="Enviar">
</form>

• <form>: Define o formulário.

• action: Especifica a URL para onde os dados do formulário serão enviados.

• method: Define o método HTTP a ser usado ao enviar os dados (GET ou POST).