Formulários em HTML 5 – veja como funciona passo a passo

Olá, seja-vindo, se você quer aprender o básico de formulários em HTML 5, você está no lugar certo. Neste artigo continuaremos nossos estudos em HTML 5, pois temos outros artigos anteriores falando de temas relacionados ao HTML.

Falando de formulários, em HTML é comum o uso de formulários(<form></form>) pois são eles que permitem a entrada de dados em nosso sistemas web. Exemplo, quando um usuário precisar fazer um cadastro em algum site, geralmente ele preenche um formulário com seus dados, como nome, e-mail e senha. Essa é uma dinâmica frequente em sites que requer autenticação para que o usuário posso usar alguns serviços oferecidos em sites web.

Leia também: listas em HTML entenda como criar listas OL e UL.

Diante disso, entender como se cria e como funciona os formulários em HTML 5 é super importante para qualquer programador. Então, vamos começar a entendê-los agora.

Afinal como criar um Formulário em HTML 5?

Para criar um formulário precisamos usar a tag principal que é a form. Então basta escrevê-la dessa forma:

<form></form>

Acima apenas escrevemos a tag contêiner do formulário, no entanto, não colocamos nenhuma informação desse formulário ainda. Afinal, quais são essas informações que precisamos adicionar? Isso depende, pois existem diversos tipos de informações que podemos requerer por meio de um formulário. Como, por exemplo, nome, idade, endereço, telefone, sexo, etc.

Criando um formulário, na prática:

Escrevamos um formulário que pede, nome, e-mail e senha do usuário, depois explico cada uma das tags e linha de código:

Explicando cada linha e tag e atributo acima:
Na linha 1 temos a abertura da tag form e na linha 10 seu fechamento, tudo que estiver dentro é conteúdo deste formulário. O atributo action é para onde que vai esses dados, ou seja, é o arquivo que lidará com manipulação dos dados, no nosso exemplo é o arquivo form.php, mas poderia ser outro.

O atributo method define o tipo de requisição HTTP que será solicitada após o usuário submeter esse form. Também poderia ser do tipo: GET, UPDATE, e DELETE, os mais usados são GET e POST.

Linhas 2, 5, e 8 temos a tag label que serve para adicionamos campos de texto para explicar ou contextualizar uma entrada de informação. Neste cada o label está explicando os inputs abaixo. O atributo for em label permite relacionar o label ao input que tenha o atributo name igual.

Linhas 3, 6 e 9 são tags input que neste exemplo criará uma caixa de texto para que o usuário possa digitar suas informações.

Os atributos type, name e placeholder da tag input significam respectivamente: type é o tipo de entrada do campo, name é chave para recuperação dessa informação, e placeholder é um texto de dica para o usuário digitar, logo que o usuário digitar a primeira letra ele desaparece.

Linha 10 é um input do type submit por conta desse atributo ele será um botão que irá disparar o evento de envio do formulário para o backend da nossa aplicação. O atributo value será texto que será exibido no botão gerado pelo input.

O resultado do código acima após carregado no navegador é o seguinte:

Então você acabou de ver um exemplo prático de formulário simples

Bom essas são apenas algumas tags que gerou um formulário simples, então é importante entender o básico para depois partir para formulários mais complexos.

Recomendo que assista o vídeo no YouTube e veja mais detalhes de forms HTML.

Vou ficando por aqui e te veja nos próximos artigos do site.