Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

A tag < form >, Formulários em HTML - O que são e para que servem

Neste artigo de nosso Curso de HTML e CSS, iremos dar início a um importante conceito em HTML, dos formulários! Assunto essencial e de extrema importância, que é usado em todo e qualquer tipo de site.
Obtenha aqui seu certificado do Curso de HTML


Um pouco de história do HTML e da criação de sites

Quando o físico Tim Berners-Lee criou o HTML seu objetivo era bem simples: criar uma maneira de mostrar dados, de fornecer informações de uma maneira mais organizada, formatada e melhor apresentável.

Ou seja, o foco era a troca de informação, entre cientistas, de maneira mais padronizada, pois se cada um resolvesse compartilhar seus documentos com formatações próprias, a coisa ficaria muito bagunçada.

Ou seja, desde o início do HTML uma coisa fica bem clara: ele serviria para exibir informações.
Se chegou a usar a internet e acessava sites na década de 90, certamente vai se lembrar que a gigantesca maioria dos sites servia somente para isso: receber informações.

Você acessava um site, lia seu conteúdo e depois saia.
O máximo de interação era através de e-mail, e depois através dos fóruns.
Hoje em dia chamamos essa era de web 1.0, e um grande passo para essa mudança foi através dos formulários, que iremos aprender agora em nosso curso de HTML & CSS.



Formulário - Interação do HTML com o Leitor

Se notar bem, até o momento em nossa apostila de HTML online, apenas exibimos informações.
Aprendemos a criar links, inserir imagens em sites, formatar textos e até criar um site com tabelas e frames em HTML.
Ou seja: exibimos informação.

Em contrapartida, não recebemos nenhuma. Nãos nos comunicamos ou trocamos dados com o usuário. E é nesse ponto que entram os formulários (ou forms, em inglês).

Os formulários servem para que nós, sites e webmasters, possamos receber informações dos usuários.Certamente você já deve ter tido contato já hoje com diversos formulários.

Para logar na sua conta de e-mail, por exemplo, você deve preencher um formulário, com seu e-mail e senha. Essa é uma maneira muito comum dos sites se comunicarem com o usuário.


O leitor envia seus dados, um script (código de programação, em PHP, por exemplo) pega esses dados e consulta um banco de dados.
Se estiver ok, você tem acesso ao seu e-mail.

Curso de HTML5 & CSSComo veremos ao longo desta seção de nosso curso, há diversos tipos de formulários, como os que pedem nossa data de nascimento, há formulários para receber seu CEP em um e-commerce, e depois retornar o valor do frete.

Um tipo de formulário bem simples são aqueles de marcar, onde só é possível continuar se você marcar a opção.
O exemplo mais comum deste tipo de formulário é aquele de aceitar os termos de condição:

Tutorial de HTML e CSS



A tag <form> - Os atributos action e method

No decorrer desta seção de nossa apostila, iremos aprender a usar cada um dos diversos tipos de formulários.

Porém, eles tem uma certa estrutura em comum, alguns atributos são iguais e essenciais no estudo dos formulários em HTML, e vamos dar uma introdução sobre esse assunto.

A primeira coisa que iremos fazer é usar a tag <form> para podermos usarmos formulários.
Antes de entrarmos em detalhes sobre os atributos e uso desta tag, devemos nos lembrar que o HTML serve apenas para definir a maneira como as informações, inclusive os formulários, estão localizados em uma página de um site.

Assim, vamos criar botões, caixas de texto, caixas de senha etc.
Mas ao clicar, nada vai ocorrer, pois para fazer alguma ação (como efetuar o login), devemos entrar mais a fundo nos códigos e usar códigos de programação, como em PHP ou JavaScript.
Mas antes de aprendermos essas linguagens, precisamos entender o HTML.

O atributo action

Quando clicamos em um botão ou escrevemos em uma caixa de texto, estamos fazendo uma ação.
A ação pode ser o envio de e-mail e senha para fazer o login, ou pode ser que ao pressionar um botão todos os campos de textos sejam limpos.
Uma ação, como a abertura de uma janela, pode ser tomada se marcamos uma opção numa lista.

Enfim, as ações são infinitas, e é o programador que vai decidir o que será feito quando o usuário interagir com o formulário.
Essa interação e comandos da ação está definida em um arquivo que contém um script, que são códigos de programação.

Logo, este atributo action vai armazenar o endereço, a URL deste arquivo:
<form action="URL_do_script">

O atributo method

Já para o atributo method usaremos dois tipos de valores: get e post

Os dois valores, get e post servem para enviar as informações obtidas pelo formulário para o handler, que é o código de programação que vai trabalhar, lidar com as informações inseridas no formulário.

Quando usamos o valor get, o dado é passo direto na URL do documento.
Por exemplo, se tiver um formulário de nome 'lingua'  e você insere no formulário a informação que a língua é o português do Brasil, o 'pt_BR', e no código do formulário você usa o get, a URL vai ficar: www.URL-ANTIGA.com.br/algo.html&lingua=pt_BR

Já se você usar o post, vai passar a informação do mesmo jeito, mas não vai ser de uma maneira visível, como no caso do get que mostra a informação na URL.
Não precisamos nos 'estressar' com o get e post no momento, veremos mais sobre eles nos tutoriais futuros de nosso curso.

Assim, a sintaxe geral de um formulário é:
<form action="URL_do_script" method="post">
<form action="URL_do_script" method="get">

4 comentários:

Alan Silva disse...

Muito obrigado por compartilhar o conhecimento

Anônimo disse...

Foi muito útil! Obrigado!

Alverne disse...

Com Ajax fazendo post eu preciso usar form ?

Unknown disse...

Gostaria de tirar um texto da caixa de texto para forma de span ao clicar no botão.

Tutoriais de HTML e CSS