HTML - Formulários

O que são formulários HTML?

Formulários HTML são um dos principais pontos de interação entre um usuário e um site ou aplicativo. Eles permitem que os usuários enviem dados para o site. Na maioria das vezes, os dados são enviados para o servidor da web, mas a página da web também pode interceptá-los para usá-los por conta própria.

Um formulário HTML é feito de um ou mais widgets. Esses widgets podem ser campos de texto (de linha única ou de várias linhas), caixas de seleção, botões, checkboxes ou radio buttons. Na maioria das vezes, esses elementos são emparelhados com uma legenda que descreve seu objetivo.

Como usar a tag de formulário HTML?

A tag HTML <form> é usada para criar um formulário na página da web. Os dados a serem coletados são preenchidos pelo usuário no formulário e, ao clicar no botão de envio ou na tecla Enter, os dados são enviados ao servidor para processamento posterior.

A tag <form> do HTML contém outras tags relacionadas para inserir dados no formulário. Alguns deles são input, select, submit, textarea, etc. Todas essas tags, quando combinadas, formam um formulário para coletar informações do usuário.

Vamos entender isso com um exemplo de um formulário para coletar informações do usuário.

HTML

<form action="/process-form.php">
  <input type="text" name="name" placeholder="Your name">
  <input type="email" name="email" placeholder="Your email">
  <input type="submit" value="Submit">
</form>

Neste exemplo, o formulário tem dois campos de entrada: um campo de texto para o nome do usuário e um campo de email. Quando o usuário clica no botão "Enviar", os dados dos dois campos são enviados para o arquivo process-form.php para processamento.

Atributos da tag de formulário HTML

A tag <form> tem vários atributos que podem ser usados para controlar seu comportamento. Alguns dos atributos mais importantes são:

action: Especifica o URL do arquivo que processará os dados do formulário.
method: Especifica o método HTTP que será usado para enviar os dados do formulário. Os valores possíveis são get e post.

Exemplos de formulários HTML

Abaixo estão alguns exemplos de formulários HTML:

Um formulário de login: Este formulário é usado para permitir que os usuários se autentiquem em um site ou aplicativo.
Um formulário de registro: Este formulário é usado para permitir que os usuários se registrem em um site ou aplicativo.
Um formulário de contato: Este formulário é usado para permitir que os usuários entrem em contato com o proprietário de um site ou aplicativo.
Um formulário de pesquisa: Este formulário é usado para permitir que os usuários pesquisem informações em um site ou aplicativo.

Os formulários HTML são uma ferramenta poderosa que pode ser usada para coletar informações dos usuários. Eles são usados em uma ampla variedade de sites e aplicativos, e são uma parte importante da experiência do usuário.

Elementos de Entradas de Dados

<input type="text">: Um campo de texto de uma linha onde os usuários podem inserir texto.
<input type="password">: Usado para senhas, os caracteres digitados são geralmente mascarados.
<input type="number">: Permite a entrada de números, com botões de aumento e diminuição opcionais.
<input type="email">: Projetado para coletar endereços de e-mail e pode ter validação específica para endereços de e-mail.
<input type="tel">: Para números de telefone, com validação para números de telefone.
<input type="url">: Usado para URLs (endereços da web), com validação para URLs.
<input type="date">: Permite a seleção de uma data em um calendário.
<input type="time">: Permite a seleção de um horário.
<input type="datetime-local">: Permite a seleção de data e horário juntos.
<input type="checkbox">: Caixas de seleção que permitem que os usuários escolham uma ou mais opções.
<input type="radio">: Botões de rádio que permitem aos usuários escolher uma única opção de um grupo.
<input type="file">: Permite que os usuários enviem arquivos para o servidor.
<input type="submit">: Um botão que envia o formulário quando clicado.
<input type="reset">: Um botão que redefine todos os campos do formulário para seus valores padrão.
<input type="button">: Um botão genérico que pode ser usado para executar scripts JavaScript.
<input type="hidden">: Um campo oculto que não é exibido no formulário, mas pode ser usado para passar informações adicionais ao servidor.