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
Beatriz Moura

Compartilhe

Autores: Beatriz Moura e Mateus Henrique

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 da Escola de Front-End: Matricula-se na escola de Front-End. Junte-se a uma comunidade de mais de 500 mil estudantes. Na Alura você tem acesso a todos os cursos em uma única assinatura; tem novos lançamentos a cada semana; desafios práticos. Clique e saiba mais!

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

<form></form>

<input>

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

 <input type="text">

<textarea>

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

<textarea></textarea>

<button>

Um botão clicável, 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>

A tag label é 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 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