Elementos de Formulário em HTML: entenda as tags essenciais

Esse artigo compõe uma série de cinco artigos sobre o que é HTML e suas tags:

No artigo anterior vimos o que são elementos block level e como eles se comportam, agora vamos partir para um outro tópico para entender o que são e quais elementos compõem um formulário.

Formulário

`<form>`

Essa tag indica que estamos iniciando um formulário, recebe como principais atributos method que recebe como valor o método http que esse formulário irá executar (get, post) e action que especifica para onde enviar os dados do formulário quando um formulário é enviado.

A tag

em HTML é usada para criar um formulário em uma página da web. Ela define uma seção do documento HTML que contém elementos interativos, como campos de entrada de texto, caixas de seleção, botões, etc., que permitem aos usuários e usuárias inserir dados ou interagir com o site.

Ela possui vários atributos, usados para especificar como os dados do formulário devem ser processados e enviados para o servidor web:

action: especifica para onde os dados do formulário devem ser enviados quando o formulário é submetido.
method: especifica o método HTTP a ser usado ao enviar os dados do formulário. Os métodos mais comuns são “GET” e “POST”.
enctype: especifica como os dados do formulário devem ser codificados antes de serem enviados para o servidor.

<form></form>

`<input>`

É um campo para que o usuário ou usuária possa inserir algum texto, data, número, cor, etc. possui como principais atributos type, que recebe como valor o tipo do input.

A tag em um formulário HTML é um elemento usado para criar campos de entrada interativos, nos quais as pessoas usuárias podem inserir dados.

Esta tag é essencial para a construção de formulários web. Ela pode ser usada para criar vários tipos de campos de entrada, dependendo do valor do atributo type especificado.

Alguns dos tipos mais comuns de campos de entrada incluem:

text: cria um campo de texto simples, onde é possível inserir texto livremente.
password: cria um campo de senha, onde os caracteres digitados são ocultos.
checkbox: cria uma caixa de seleção que permite selecionar uma ou mais opções.
radio: cria botões de rádio, onde é possível selecionar apenas uma opção de um grupo de opções.
submit: cria um botão de envio que permite que as pessoas usuárias enviem o formulário.
file: cria um campo de seleção de arquivo, que permite enviar arquivos para o servidor.
email, number, date, entre outros: tipos específicos de campos de entrada que fornecem validação e funcionalidades específicas para tipos de dados comuns.

 <input type="text">

`<textarea>`

Representa uma caixa de texto, útil quando você quer permitir à pessoa usuária informar um texto extenso em formato livre, como um comentário ou formulário de retorno.

<textarea></textarea>

`<button>`

Um botão clicável, que possui como principais atributos type, que caso receba submit como valor e esteja dentro de um formulário, irá submeter o formulário.

 <button type="submit">Enviar</button>

`<label>`

Veremos agora o que é label HTML, uma tag muito importante para os campos de formulários.

Ela especifica qual o “rótulo” do input (a que se refere o input, como, por exemplo, envolvê-la em um texto “Nome completo”), e ajuda na experiência do usuário e usuária durante a utilização e preenchimento do formulário.

<label>Nome completo</label>

Veja um exemplo de formulário criado utilizando as tags que aprendemos:

Formulário com dois rótulos, no primeiro está escrito Nome Completo, abaixo tem o campo para digitação, mais abaixo está o segundo rótulo Digite seu elogio, seguido de outro campo para digitação, e por último há o botão de Enviar.

Continua...

Nesse artigo vimos quais elementos utilizamos para compor um formulário, no próximo, veremos o que são atributos e como utilizá-los.

O que é o HTML e suas tags: atributos dos elementos