close

Introdução ao Form HTML: estrutura, tipos de entrada e exemplos

O HTML form é uma parte crucial do desenvolvimento da web que permite aos usuários interagir com um site e enviar dados para um servidor. Form são usados ​​para uma ampla gama de finalidades, como coletar form informações do usuário, processar entrada do usuário e permitir ações do usuário em um site. Neste artigo, exploraremos os atributos e diferentes tipos de campos de entrada, elementos de seleção, áreas de texto e botões comumente usados ​​em HTML form.

Campos de entrada

  • <input type="text">: Cria um campo de entrada de texto onde os usuários podem inserir caracteres alfanuméricos.
  • <input type="password">: Exibe um campo de entrada de senha que mascara os caracteres inseridos.
  • <input type="email">: Fornece validação de e-mail para campos de entrada que requerem um endereço de e-mail válido.
  • <input type="number">: Restringe a entrada apenas a valores numéricos.
  • <input type="checkbox">: representa uma caixa de seleção que os usuários podem marcar ou desmarcar.
  • <input type="radio">: representa um botão de opção que permite aos usuários selecionar uma opção em um grupo de opções.
  • <input type="file">: permite que os usuários selecionem e carreguem arquivos.
  • <input type="submit">: Exibe um botão que envia o form quando clicado.
  • <input type="reset">: Exibe um botão que redefine o form ao seu estado inicial.
  • <input type="date">: fornece um seletor de data para selecionar datas.
  • <input type="time">: permite que os usuários insiram valores de tempo.

Selecionar Elementos

  • <select>: cria um menu suspenso com opções selecionáveis.
  • <option>: Define uma opção dentro do menu dropdown, colocado dentro do <select> tag.
  • <optgroup>: agrupa as opções relacionadas no menu suspenso.
  • <select multiple>: permite que os usuários selecionem várias opções simultaneamente mantendo pressionada a tecla Ctrl(ou a tecla Command no Mac) enquanto clica.

Áreas de texto

<textarea>: cria um campo de entrada de texto de várias linhas onde os usuários podem inserir e editar blocos de texto mais longos. Pode ser redimensionado e configurado com atributos como rows e cols para definir suas dimensões.

Botões

<button>: Representa um botão que pode acionar várias ações dentro de um arquivo form. Ele pode ser usado para enviar um form, por form uma função JavaScript ou navegar para uma página diferente.

Exemplo de uso:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Este exemplo mostra o uso de vários form elementos, incluindo input campos, textarea, e um botão. Sinta-se à vontade para personalizar os elementos e atributos com base em seus requisitos específicos. checkbox select dropdown submit form