Até agora trabalhamos com informação textual. Neste capítulo iremos trabalhar com campos que dependem da interação com o usuário.

Os navegadores possuem suporte para diversas tags diferentes feitas para formulários, aqui iremos abordar apenas as principais delas.

Formulários costumam ser complexos, e por isto necessitam de muito cuidado durante a estruturação do HTML para manter a acessibilidade.

Lembre-se que o HTML serve para a estruturação da página, e não para o design. Aqui utilizaremos a tag br para quebras de linha, embora quando introduzido o CSS estas tags parem de ser necessárias, se tornando não recomendadas.

form

A tag form é a principal tag que inicia a área de um formulário, todos os itens pertencentes ao formulário devem estar contidos dentro dela.

<form>
	...
</form>

label

A tag label serve para indicar o que deve ser preenchido, ou a qual informação, cada campo do formulário pertence.

Ela cerca nodos correspondentes a descrição do campo, que podem ser apenas texto livre, e um atributo for.

O atributo for recebe o id do elemento ao qual a label está descrevendo. Se temos uma label sobre uma entrada de texto com o id igual a "campo_texto_um" então ela deve conter: for="campo_texto_um".

<label for="id_do_campo_descrito">Descrição da informação</label>

inputs

Os inputs são os mais básicos elementos de um formulário. Existem vários tipos de inputs para diferentes tipos de dados.

text input

Para definir este input precisamos configurar o atributo type com o valor "text" e se desejarmos podemos utilizar um placeholder para definir um texto que será exposto enquanto nada estiver escrito.

<label for="name">Digite seu dinonome:</label><br/>
<input type="text" id="name" placeholder="Dino da Silva">

checkbox input

Este tipo de input serve para criar uma caixa de seleção. Cada item pode ser selecionado ou não, criando um valor booleano.