O que é o HTML e suas tags? Parte 4: elementos de um formulário

O que é o HTML e suas tags? Parte 4: elementos de um formulário
Beatriz Moura, mateus-henrique
Beatriz Moura, mateus-henrique

Compartilhe

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

  1. O que é o HTML e suas tags: estrutura básica
  2. O que é o HTML e suas tags: elementos inline
  3. O que é o HTML e suas tags: elementos block-level
  4. O que é o HTML e suas tags: elementos de um formulário
  5. O que é o HTML e suas tags: atributos dos elementos

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

Banner promocional da Semana Carreira Tech, organizada pela Alura e FIAP. Texto: 'Descubra como graduações tech estão transformando o futuro. Cinco lives gratuitas para você mergulhar nas áreas mais transformadoras da atualidade, desde o que se estuda nas graduações até a prática do mercado. Garanta sua vaga de 01 a 05 de julho.' Imagem de profissionais usando equipamentos tecnológicos avançados, como óculos de realidade aumentada. Botão destacado com a chamada 'Garanta sua vaga'. Logotipos da Alura e FIAP no canto superior direito.

<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.

Beatriz Moura
Beatriz Moura

Estudante de Analise e Desenvolvimento de Sistemas, troquei a área da saúde e mergulhei em programação!Apaixonada por desenvolvimento Front-end e entusiasta de UX/UI Design.Descobri a paixão por ensinar sendo monitora durante uma outra graduação de ensino, onde também era presidente de Liga Acadêmica e Diretora de Mídia no Diretório Acadêmico.Atualmente sou Instrutora e Desenvolvedora de Software na Alura e já fiz parte do Scuba Team de Front-end.

Veja outros artigos sobre Front-end