Nessa aula você vai aprender os tipos de entradas de dados e dominar a criação de formulários no HTML.

As páginas web podem ser usadas como uma via de mão única, no qual ela fornece informações ao usuário, como pode também ser um meio de interação em que o usuário fornece informações ao site.

Uma das formas mais comuns de pessoas interegirem com as páginas web, lhes fornecendo informações é por meio dos formulários.

O formulário é uma maneira de usuários enviarem dados aos sites, que os recebe no momento em que o usuário preenche informações de um formulário e o submete.

então o HTML nessa interação tem o papel de intermediar, ser a interface, criar os campos e possibilitar que os usuários escrevam ou marquem informações nesses campos.

O HTML nos fornece várias possibilidades para criarmos os campos de um formulário. Podemos criar facilmente no HTML campos de texto, de selecionar numa lista suspensa, de “checar”, etc.

Criando os formulários no HTML

Para iniciarmos um formulário primeiramente usamos a tag <form> como visto abaixo:

<form></form>

Além dos atributos globais, dentro da tag form podemos usar alguns atributos específicos como por exemplo “method” e “action”, mas como envolvem questões de backend quanto ao recebimento dos dados do form, vamos ficar apenas com a criação dos campos nessa aula.

Criando o input

Dentro da tag form vamos iniciar a criação dos campos. Primeiramente vamos criar o campo no qual as pessoas preenchem com um texto. Segue um exemplo:

Esse exemplo acima seria mostrado na tela dessa forma:

Nesse exemplo acima criamos um campo com a tag <input>, essa tag indica que se trata de uma entrada de dados que pode ser de diversos tipos. O tipo é indicado no atributo “type”, no caso acima criamos um input do tipo texto.

O atributo “name” é onde criamos uma identificação para esse campo. Essa identificação será muito útil no momento em que o formulário for enviado para o sistema backend, para ele identificar os dados e saber de que campo veio.

Placeholder

Já o atributo “placeholder” é um benefício que a versão HTML5 nos trouxe. Esse atributo nos permite criar um texto para ser mostrado ao usuário dentro do campo, indicando uma orientação sobre o que se deve escrever ali.

No exemplo que usamos, o placeholder “Digite seu usuário” indica que o valor que as pessoas devem inserir nesse campo é o nome de usuário. Lembrando que o placeholder só é mostrado quando o campo está vazio.

A tag input serve para criarmos elementos do formulário de diversos tipos. Além do que vimos (texto) podemos por exemplo criar um campo do tipo checkbox, email, password e diversos outros, mas vamos ficar com os mais usados:

Input do tipo senha (password):

<input type=”password” name=”senha” placeholder=”Digite sua senha”>

Input do tipo checkbox:

Manga Abacaxi

O input do tipo checkbox tem uma particularidade: Como ele se apresenta como várias opções marcáveis de uma informação, como por exemplo: “quais frutas mais gosta?” Nessa caso todas as opções devem ter o mesmo “name” e o que as diferencia é o “value”.

Input do tipo “submit”:

<input type=”submit” value=”Enviar formulário”>

O input “submit” deve ser o último campo do formulário. Diferente dos demais, ele não vai carregar informações, ele será o botão que deve ser clicado pelo usuário para fazer o envio do formulário ao final.

O atributo “value” é o texto que vai aparecer dentro do botão.

Existem outros campos de formulários no HTML diferentes de input. Um exemplo é o <select> no qual criamos uma lista de opções que o usuário deve escolher como no exemplo abaixo:

Nesse exemplo de <select> o name do campo fica na tag select, e dentro dessa tag devem ir as opções, as escolhas do menu select em forma de “option”. O atributo “value” representa a escolha feita pelo usuário.