Aula 31/08 Formulários

Hoje o conteúdo da aula será sobre formulários e seus elementos.

Mas o que são formulários?
Em um site, formulários são aqueles espaços aonde algumas informações são solicitadas para preenchimento do internauta, por exemplo: um espaço aonde há um campo de texto para informar o seu email para receber novidades, é um formulário. Ou então, aquelas páginas de contato solicitando seu nome, telefone, e uma mensagem, estas informações constituem um formulário.

Um exemplo de um formulário de contato em uma página

Para criar um formulário em uma página nós utilizamos a tag FORM. É muito simples, veja:
<form>
Tudo aqui dentro é meu formulário
</form>

Dentro de um formulário nós podemos inserir diversos tipos de campos, podemos solicitar uma informação textual, ou então uma opção, ou uma lista de opções, etc.
Vamos conhecer abaixo alguns tipos de informações para formulários.

Campo de Texto
Para solicitar que o internauta informe um texto, nós usamos a tag INPUT com a propriedade type = "text". Veja a seguir:
<form>
Nome: <input type="text" name="nome" size="60" />
</form>

Lista de opções
Outra ferramenta igualmente útil é a possibilidade de criar uma lista de opções para a escolha do internauta, para tal utilizamos a tag SELECT, informando cada opção com a tag OPTION. Segue:
<form>
Escolha um estado: 
<select>
<option>SP</option>
<option>RJ</option>
<option>ES</option>
</select>
</form>

Campo de confirmação
Quando você quiser solicitar uma informação cuja resposta é apenas "sim" ou "não", como por exemplo "Você é casado?", a melhor opção é um INPUT com o type = "checkbox". Veja:
<form>
<input type="checkbox" checked="false" /> Concordo com o conteúdo da aula.
</form>

Botão de envio
Botões de envio também são criados pela tag INPUT, com type = "submit", é bem simples, veja:
<form>
<input type="submit" value="Enviar dados" />
</form>

Outros botões
Demais botões podem ser criados com a tag BUTTON, a diferença erá explicada nas próximas aulas.
<form>
<button>Limpar</button> <button>Sair</button>
</form>

Fácil? Só decorar qual tipo é mais apropriado para qual necessidade e praticar bastante!
Nas próximas aulas aprenderemos a interagir com o formulário via javascript e PHP.