Introdução

Os formulários HTML constituem um dos pontos de interação mais significativos entre um usuário e um website ou aplicativo. Um desenvolvedor web tem a capacidade de criar formulários HTML baseados em modelos específicos, utilizando os elementos HTML pertinentes, visto que esses formulários são construídos com base em elementos de formulário HTML. Estes últimos são utilizados para a criação de variados tipos de campos de formulário, como caixas de texto, botões, caixas de seleção, entre outros.

Os formulários HTML são processados pelos navegadores, e os dados são enviados para o servidor web. A maioria dos navegadores executa o processamento de formulários HTML em conformidade com as especificações do W3C para HTML5.

Objetivos da aula

●      Definir o conceito de formulários HTML?

●      Descrever a estrutura básica de um formulário em HTML

●      Discutir os principais elementos aplicados a um formulário HTML.

Resumo

O que são formulários? Estrutura básica de um formulário

Os formulários são estruturas utilizadas para coletar a entrada de dados do usuário e enviar para o servidor.

A construção de um formulário inicia-se sempre com a tag <form> e termina com a tag </form>. Esses elementos são um contêiner para diferentes tipos de campos de entrada de dados, tais como: campos de texto, caixas de seleção, botões de opção, botões de envio etc. O elemento <form> possui alguns atributos referente à forma como o formulário será submetido:

◦         O atributo action define recebe como valor o destino dos dados que serão submetidos no formulário, que, normalmente é uma página em uma linguagem de backend como PHP, Java, ASP etc. Ex.: <form action=“/action_page.php”>

◦         O atributo target especifica onde exibir a resposta recebida após o envio do formulário, como por exemplo _blank (em uma nova janela), _self (na janela atual), _parent (no quadro pai), _top (em todo o corpo da janela) ou  framename (em um iframe nomeado).  Ex.: <form action=“/action_page.php” target=“_blank”>

◦         O atributo method especifica o método HTTP a ser usado ao enviar os dados do formulário, que podem ser enviados como variáveis de URL (method=“get”) ou como transação HTTP post (method=“post”). Exemplo: <form action=“/action_page.php” method=“post”>

Tipos de campos para envio de dados

O elemento HTML <input> é o mais comumente usado nos formulários. Um elemento <input> pode ser exibido de várias maneiras, dependendo do valor do atributo type, por exemplo:

●     <input type=“text”> Exibe um campo de entrada de texto de uma linha.

●     <input type=“radio”> Exibe um botão para cada item de uma série de opções, onde somente um item pode ser selecionado.

●     <input type=“checkbox”> Exibe uma caixa de seleção para cada item de uma série de opções, onde pode-se selecionar mais de um item.

●     <input type=“submit”> Exibe um botão enviar (para submeter o formulário)