Formulários são muito comuns em páginas web. Quase todos os websites têm algum formulário de contato, através do qual o internauta pode buscar informações adicionais sobre uma empresa, realizar um cadastro ou comentar algum artigo ou post em blogs.
Em sistemas web corporativos, formulários são utilizados
em praticamente todas as páginas, servindo como interface
entre os usuários e as informações
presentes em bancos de dados.Formulários apresentam elementos que possibilitam ao usuário interagir
inserindo informações como textos, selecionar opções em
menus de seleção, caixas ou botões.
São utilizados para enviar dados para um servidor que vai utilizar
os dados inseridos ou escolhidos pelo usuário de acordo com a
finalidade do mesmo através do clique em um botão de envio,
normalmente conhecido com "submit".
A tag utilizada para criar um formulário é
<form></form>.
Vejamos uma página simples que apresenta um formulário com dois campos:
<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8">
<title>Formulário Simples</title>
</head>
<body>
<form action="dados.php">
<h4>Insira seus dados</h4>
<p>
Login: <input type="text" name="login" id="login"><br>
</p>
<p>
Senha: <input type="password" name="senha" id="senha"><br>
</p>
</form>
</body>
</html>
Vejamos agora uma figura detalhando os principais componentes de
elementos de formulários em html:
Ao abrir a página no navegador, vemos:
Elementos input
Nesta página simples utilizamos dois elementos chamados
"input" em um formulário. O primeiro elemento
é do tipo "text", ou seja, um texto comum. Já o
segundo é um tipo especial de elemento, chamando password,
que mascara os caracteres digitados substituindo-os por asteriscos ou
"bolinhas" para que não apareçam no momento da digitação.
Após a digitação dos textos, normalmente há um botão para enviar os
dados para um servidor que receberá e tratará esses dados, geralmente
gravando ou atualizando os mesmos em bancos de dados.
Para que os dados inseridos pelo usuário possam
ser recebidos no servidor, é necessário informar um nome para o elemento.
Esse primeiro formulário não tem muita utilidade, pois não foi
adicionado nenhum botão ou outro mecanismo para envio do mesmo ao servidor. Vamos fazer uma página com um formulário mais completo,
mas primeiro vejamos os principais tipos de elementos input
que podemos usar em formulários:
| Elemento Input | type | Característica | |||
|---|---|---|---|---|---|
| Botão | button | Define um botão utilizado para chamar alguma função | |||
| Caixas de seleção | checkbox | Deixa o usuário selecionar uma ou mais opções | |||
| Escondido | hidden | Define um campo que não aparece no formulário mas mantém valores | |||
| Upload | file | Define um campo para o usuário realizar um upload de arquivos | |||
| Imagem | image | Define uma imagem com um botão submit | |||
| Campo de Senha | password | Campo mascarado para senhas (*****) | |||
| Botão de seleção | radio | Deixa o usuário selecionar somente uma das opções | |||
| Botão Reset | reset | Define um botão que reinicia todos os campos do formulário para seus valores iniciais. | |||
| Botão "Enviar" | submit | Usado para enviar dados do formulário para o servidor | |||
| Campo de texto | text | Texto de uma só linha |
Os elementos da tabela acima devem ser utilizados dentro de formulários.
Mas o próprio formulário é um elemento em uma página html, e também possui seus atributos.
Os mais utilizados são os atributos
action e method,
que definem para qual página no servidor serão enviados os dados
contidos no formulário e qual a forma de envio.
Aqui vale uma explicação com relação a formulários e servidores.
Sites estáticos versus sites dinâmicos
Normalmente, websites e sistemas web não contêm somente textos e imagens.
Sites sem formulários ou que não tragam seu conteúdo de
banco de dados são chamados de estáticos.
Ou seja, quando não há interação com os visitantes.
Já os sites dinâmicos normalmente utilizam-se
de bancos de dados e alguma linguagem de programação, como PHP, ASP,
Java, Ruby on Rails, etc.
Conteúdo dinâmico é aquele que se altera de acordo com
a interação do visitante ou que esteja programado para tal.
Por exemplo, quando respondemos a um post na internet, ou seja,
fazemos um comentário sobre algum artigo, logo após enviarmos nosso comentário o mesmo
aparece na página que estamos visitando.
Ou quando efetuamos um login, logo após aparece
alguma mensagem no site, do tipo:
"Bem-vindo Marcos", ou algo parecido. Esse tipo de site é
dinâmico, pois está respondendo com um conteúdo de forma interativa.
Outro fator importante é a questão das linguagens de programação e servidores web.
Existem diversos servidores web, que permitem aceitar requisições
http de clientes, que normalmente
são navegadores. Ao receber a requisição, o servidor responde fornecendo respostas http, que
geralmente são páginas web, incluindo textos, figuras, etc.
O que aprendemos neste curso serve para qualquer plataforma,
seja um servidor Apache, IIS ou outro, e independe da linguagem de programação utilizada.
Outros elementos de formulários
Além dos elementos input temos alguns outros
que podem ser utilizados em formulários:
| Elemento | Nome | Característica | |
|---|---|---|---|
| Área de Texto | textarea | Define um campo para inserção de texto com mais de uma linha. | |
| Lista de Seleção | select | Define uma lista de itens em um menu drop-down para o usuário escolher. | |
| Item de Lista de Seleção | option | Define cada um dos itens de uma lista de seleção. | |
| Cabeçalho em Lista de Seleção | outgroup | Define um cabeçalho para os itens de uma lista de seleção. | |
| Conjunto de Campos | fieldset | Define uma borda que separa os campos em seu interior. | |
| Etiqueta | label | Define uma etiqueta que quando clicada direciona o foco no formulário para o campo de acordo com o id. |
Vamos codificar uma página com alguns dos elementos citados acima:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Formulário Completo</title>
</head>
<body>
<form action="form_dados.php" method="get">
<p>Nome:<br>
<input type="text" name="nome">
</p>
<p>Senha:<br>
<input type="password" name="senha">
</p>
<p>Sexo:<br>
<input type="radio" name="sexo" value="masculino" checked="checked">Masculino
<input type="radio" name="sexo" value="feminino">Feminino
</p>
<p>Interesses:<br>
<input type="checkbox" name="interesse" value="cinema">Cinema
<input type="checkbox" name="interesse" value="teatro">Teatro
<input type="checkbox" name="interesse" value="esportes">Esportes
<input type="checkbox" name="interesse" value="tecnologia">Tecnologia
</p>
<p>Mensagem:<br>
<textarea name="mensagem" rows="2" cols="20"></textarea>
</p>
<p>Meio de Transporte:
<select name="veiculo">
<option value="carro">Automóvel</option>
<option value="bicicleta">Bicicleta</option>
<option value="motocicleta">Motocicleta</option>
<option value="onibus">Ônibus</option>
</select>
</p>
<p>
<input type="submit" value="Enviar">
</p>
</form>
</body>
</html>
E, visualizando o resultado:
No script da página acima podemos notar a utilização dos
atributos do elemento form
action="form_dados.php" e method="get".
Como dissemos anteriormente, o atributo
action define para qual página serão enviados os
dados inseridos pelo usuário. Já o atributo method
define qual o método de envio dos dados.
Apesar de este curso não tratar de maneira detalhado sobre linguagens
de programação veremos os coneceitos que envolvem os métodos
get e post
utilizados em formulários html.
Métodos get e post
Estávamos falando sobre os métodos de envio de dados de formulários
em páginas web. Vale ressaltar que tais métodos só serão utilizados
quando o desenvolvedor estiver utilizando alguma linguagem de
programação para web, como PHP, ASP, etc. Poderíamos até mesmo
considerar que tal assunto fuja do escopo deste curso. No entanto, a fim de ilustrar
como os dados são enviados a outras páginas, daremos uma breve
introdução aos métodos de envio dos dados de formulários html.
Existem basicamente dois métodos de envio de dados:
get e
post
O método get envia os parâmetros dentro da url. Isso só vai
funcionar se a página estiver inserida dentro de um ambiente de servidor.
Para exemplificar, inseri a página acima em um servidor
apache, preenchi os dados e cliquei no botão
submit. Veja como ficou a url:
http://localhost/form_dados.php?nome=Marcos&senha=123456&sexo=masculino
&interesse=cinema&interesse=tecnologia&mensagem=
Envio+de+dados+do+formul%C3%A1rio&veiculo=carro
&interesse=cinema&interesse=tecnologia&mensagem=
Envio+de+dados+do+formul%C3%A1rio&veiculo=carro
Observação:
não há a necessidade de realizar este teste para os alunos deste curso, a menos
que o aluno já tenha conhecimentos de linguagens de programação e já tenha um servidor
instalado na máquina. Este teste foi realizado somente para ilustrar a diferença entre os
métodos get e post.
Notamos que, logo após o nome do formulário que recebeu os dados
(form_dados.php), há um caractere de interrogação
e em seguida aparecem os parâmetros na url, separados pelo
caractere & (e comercial).
Essa é a maneira de envio de parâmetros pelo método get.
Se o método utilizado fosse o post, a url seria simplesmente:
http://localhost/form_dados.php
O método post não utiliza a url para o envio dos dados,
tendo a vantagem de não ter o tamanho dos dados limitados,
como no caso do método get.
Atributos de Elementos de Formulários
Vamos analisar cada um dos elementos do formulário utilizados
na página anterior, explicando os atributos utilizados e mostrando
outros que também podem ser úteis.
Elemento form
Começaremos na linha 8, na abertura da tag form:
Nesta linha, vemos a utilização do atributo
action, apontando para a página
form_dados.php, que será a página para a
qual serão enviados os dados dos campos
preenchidos pelo usuário. Neste formulário foi utilizado o método
get:
<form action="form_dados.php" method="get">Elemento input do tipo text
Em seguida, na linha 9 temos a abertura de uma tag
<p>, que inicia um parágrafo.
Dentro desse parágrafo vemos o primeiro elemento input,
do tipo text, que é um elemento de texto de
somente uma linha:
<p>Nome:<br>
<input type="text" name="nome">
</p>Elemento input do tipo password
Mais abaixo, na linha 12 temos um novo parágrafo que contém
outro elemento input, desta vez
do tipo password, utilizado para senhas.
Esse campo esconde ("mascara") tudo que o usuário digitar,
substituindo a visualização do texto por * ou
•. A ideia é que ninguém veja o
que está sendo digitado. Por exemplo, se o
usuário estiver digitando seu login e senha durante uma
apresentação de slides, ou se houver
alguém atrás do usuário enquanto o mesmo o faz,
somente o usuário saberá o que está sendo digitado:
<p>Senha:<br>
<input type="password" name="senha">
</p>
Campos de texto do tipo text e password
têm um tamanho para 20 caracteres por padrão. Isso pode ser alterado através
do atributo size.
Veja como ficaria um campo com um tamanho maior:
<p>Nome:<br>
<input type="text" name="nome">
</p>
<p>Senha:<br>
<input type="password" name="senha" size="40">
</p>
Veja a diferença no browser:
Elemento input do tipo radio
Nas linhas 16 e 17 temos a utilização de um elemento do tipo radio,
também conhecido como radio button.
Esse elemento obriga o usuário a escolher somente uma opção. Quando o
usuário muda a opção, a anterior é desmarcada:
<p>Sexo:<br>
<input type="radio" name="sexo" value="masculino" checked="checked"> Masculino
<input type="radio" name="sexo" value="feminino">Feminino
</p>
Podemos observar que o nome para todos os elementos é o mesmo,
porém o atributo value é que vai determinar
qual foi a escolha do usuário.
Caso o desenvolvedor deseje que algum botão do radio
apareça marcado por padrão, pode utilizar o atributo
checked="checked" no mesmo, como foi utilizado
no radio com value="masculino"
Elemento input do tipo checkbox
Entre as linhas 20 a 23, vemos um conjunto de checkboxes,
que são elementos que permitem mais de uma escolha por parte do usuário:
<p>Interesses:<br>
<input type="checkbox" name="interesse" value="cinema"> Cinema
<input type="checkbox" name="interesse" value="teatro"> Teatro
<input type="checkbox" name="interesse" value="esportes"> Esportes
<input type="checkbox" name="interesse" value="tecnologia"> Tecnologia
</p>
No caso do elemento checkbox, o nome para os
elementos que podem ser escolhidos é o mesmo, porém o atributo
value vai determinar as escolhas do usuário.
Elemento textarea
Na linhas 26 temos um elemento textarea,
que permite ao usuário inserir um texto com mais de uma linha:
<p>Mensagem:<br>
<textarea name="mensagem" rows="2" cols="20"></textarea>
</p>
Determinamos o tamanho do elemento textarea
através dos atributos rows (linhas) e cols
(colunas). No entanto, o tamanho determinado não limita o número de linhas que o usuário
pode digitar, apenas limita o tamanho de forma visual.
Caso o usuário digite mais de três linhas, aparece uma barra de
navegação na lateral direita do campo:
Elemento select
Nas linhas 29 a 34, vemos um exemplo de elemento de lista de
seleção (select). Este elemento também permite ao
usuário a escolha de somente um elemento, e é muito comum
em formulários. Por exemplo, em combo-box de
Cidades, Estados, etc. Poderia ser utilizado
um conjunto de elementos radio button,
mas ocuparia muito espaço na página.
<p>Meio de Transporte:
<select name="veiculo">
<option value="carro">Automóvel</option>
<option value="bicicleta">Bicicleta</option>
<option value="motocicleta">Motocicleta</option>
<option value="onibus">Ônibus</option>
</select>
</p>
Assim como no caso do elemento radio, é possível determinar
que uma escolha esteja pré-selecionada, através do
atributo selected="selected".
Botão Submit
E, por último, na linha 37, temos um botão submit que,
quando clicado, envia os dados que o usuário selecionou ou digitou para a
página determinada no atributo action na abertura do
formulário:
<p>
<input type="submit" value="Enviar">
</p>Fieldsets (Conjuntos de Campos)
Se um formulário tiver muitos campos é interessante
organizá-los em categorias. Para esta finalidade, são utilizados os
fieldsets.
Fieldsets são exatamente o que a tradução sugere:
conjunto de campos. Eles definem uma borda em volta dos campos
que estiverem entre suas tags. Normalmente, tags fieldset são
utilizadas em conjunto com a tag <legend></legend>:
<fieldset>
<legend>Dados Pessoais</legend>
<input ...>
</fieldset>
A tag legend proporciona uma etiqueta para o conjunto de campos.
Vamos codificar uma página simples utilizando um fieldset:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fildsets</title>
</head>
<body>
<form action="form_dados.php" method="get">
<fieldset>
<legend>Sexo</legend>
<p>Feminino
<input type="radio" name="sexo" id="feminino">
<p>Masculino
<input type="radio" name="sexo" id="masculino">
</fieldset>
<p><input type="submit" value="Enviar">
</form>
</body>
</html>
Visualizando o resultado:
Vemos que o fieldset agrupa de maneira inteligente
os campos que estiverem em seu interior
e o texto utilizado na tag legend serve
como etiqueta para o conjunto de campos.
Elemento label
A tag label define rótulos para campos de formulários.
Labels não alteram o texto que aparece ao lado do campo,
mas melhoram a interação dos usuários que utilizam
mouse, pois se o usuário clicar no texto da label,
o foco do controle do campo é acionado.
Isso é útil principalmente em radio buttons,
pois o usuário não precisa clicar dentro do botão
do mesmo para setá-lo, basta clicar no texto que o define.
Para que o controle da tag label funcione adequadamente,
é necessário que o campo para o qual a mesma foi definida
tenha um atributo id (identificador):
<input type="radio" name="sexo" id="feminino">
Vejamos uma página que utiliza labels e sua funcionalidade:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Label</title>
</head>
<body>
<form action="form_dados.php" method="get">
<fieldset>
<legend>Dados Pessoais</legend>
<label for="feminino">Feminino</label>
<input type="radio" name="sexo" id="feminino">
<br>
<label for="masculino">Masculino</label>
<input type="radio" name="sexo" id="masculino">
</fieldset>
<p><input type="submit" value="Enviar"></p>
</form>
</body>
</html>
Ao testarmos a página, verificamos que não há a necessidade
de clicar dentro do campo radio button,
basta clicar na label do mesmo:
Elemento outgroup
Vimos que o elemento select é muito utilizado
em formulários por facilitar o agrupamento de opções em uma
lista sem utilizar muito espaço na página.
No entanto, pode ser útil categorizar a lista de opções do elemento select.
Essa é a finalidade da tag outgroup.
A utilização dessa tag é realizada em conjunto com o atributo label.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Outgroup</title>
</head>
<body>
<form action="form_dados.php" method="get">
<p>
<select>
<optgroup label="Cinema">
<option value="acao">Ação</option>
<option value="aventura">Aventura</option>
</optgroup>
<optgroup label="Esportes">
<option value="futebol">Futebol</option>
<option value="atletismo">Atletismo</option>
<option value="basquete">Basquete</option>
</optgroup>
</select>
<input type="submit" value="Enviar">
</p>
</form>
</body>
</html>
Visualizando o resultado:
Vemos que a utilização da tag outgroup facilita
a visualização dos itens no combo-box,
melhorando a ergonomia para o usuário.
Elemento reset
O elemento reset serve para restaurar um formulário ao seu
estado inicial.
Os campos de formulários podem vir com alguns dados já preenchidos
como sugestão ao usuário do que deve digitar. Para isso, deve-se
utilizar o atributo value com o valor desejado
ou inserir os dados entre a abertura e fechamento do elemento:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Botão reset</title>
</head>
<body>
<form action="form_dados.php" method="get">
<p>Nome:<br>
<input type="text" name="nome" value="Seu nome aqui.">
</p>
<p>Mensagem:<br>
<textarea name="mensagem" rows="2" cols="20">Preencha a mensagem.</textarea>
</p>
<p>
<input type="reset" value="Reset"><input type="submit" value="Enviar">
</p>
</form>
</body>
</html>
Visualizando o resultado no navegador:
Se o usuário apagar algum texto do formulário e em seguida
clicar no botão "Reset" o texto será restaurado.
Elemento hidden
Elementos do tipo hidden não aparecem no formulário.
São utilizados para armazenar valores que podem ser utilizados por
scripts em Javascript. Normalmente armazenam um valor padrão ou podem
ter seu valor alterado por um script.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Campo Escondido</title>
</head>
<body>
<form action="form_dados.php" method="get">
<p>Nome:<br>
<input type="text" name="nome">
</p>
<p>
<input type="hidden" name="cidade" value="Curitiba">
</p>
<p>
<input type="submit" value="Enviar">
</p>
</form>
</body>
</html>
Na página acima, o formulário contém um campo do tipo
hidden que não vai aparecer no navegador
mas contém um valor que pode ser útil para o sistema ou site.
Vejamos o resultado:
Podemos notar que o campo definido como hidden
não apareceu na janela do navegador. Mas o valor contido em
seu atributo value pode ser capturado por
um script em Javascript ou mesmo nas páginas subsequentes através
de uma linguagem de programação como PHP.
Elemento file
O elemento file é utilizado para proporcionar ao
usuário a oportunidade de fazer um upload (carregamento) de um
arquivo para o servidor.
Esse elemento gera um campo de texto e um botão que aciona
uma janela com acesso ao Desktop do usuário para que o mesmo
possa escolher o arquivo a ser carregado.
Se o usuário clicar no botão ou no campo o efeito é o mesmo.
Primeiro, vejamos a sintaxe para esse tipo de campo:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Upload</title>
</head>
<body>
<form action="form_dados.php" method="get">
<p>
<input type="file" name="arquivo">
</p>
</form>
</body>
</html>
Agora vejamos como o elemento input gera não somente
o campo mas também o botão já com um texto de acordo com o seu idioma:
Quando clicamos no botão, abre-se uma janela para a escolha do arquivo:
Note que, além de trazer os arquivos presentes na Área de Trabalho
a janela já traz o primeiro arquivo como sugestão para upload.
Neste caso, como não estamos utilizando nenhuma linguagem de programação
nem nenhum servidor o arquivo não será carregado.
No entanto, o endereço do arquivo será automaticamente preenchido
no campo correspondente:
Para este tipo de campo de formulário normalmente é preciso inserir
também um botão submit para que o arquivo seja
enviado ao servidor.
Elemento image
Este elemento define uma imagem em substituição ao botão
submit tradicional.
Para tal, é importante que a imagem seja significativa, ou seja,
mostra ao usuário que a imagem serve para envio do formulário.
Para exemplificar, vamos utilizar uma imagem simples feita no
Gimp para utilização em um formulário:
Se quiser utilizar a imagem acima em sua página para testar,
clique com o botão direito do mouse sobre a mesma e selecione
"Salvar Imagem Como". Em seguida copie a
imagem para o diretório de imagens do seu site.
Agora vejamos o formulário:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Botão Image</title>
</head>
<body>
<form action="form_dados.php" method="get">
<p>Nome:<br>
<input type="text" name="nome">
</p>
<p>
<input type="image" src="imagens/botao_enviar.png" alt="Submit">
</p>
</form>
</body>
</html>
E a visualização no navegador:
Este botão vai funcionar da mesma forma que um botão
submit normal.
O Atributo tabindex
Uma preocupação recorrente no desenvolvimento de sites e
sistemas web é a ergonomia e a
acessibilidade.
Esses dois temas lidam com a utilização de técnicas de
desenvolvimento que proporcionam ao usuário facilidades
de navegação nas páginas.
Um atributo que contribui para a ergonomia e acessibilidade
de páginas que utilizam formulários é o
tabindex.
Esse atributo permite que o usuário navegue nos campos
do formulário através da tecla TAB.
Uma sequência para a navegação é definida indicando numericamente
no valor do atributo a ordem.
Vejamos um exemplo da utilização desse atributo no formulário
anterior:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Formulário Ergonômico</title>
</head>
<body>
<form action="form_dados.php" method="get">
<p>Nome:<br>
<input type="text" name="nome" tabindex="1">
</p>
<p>Sobrenome:<br>
<input type="password" name="senha" tabindex="2">
</p>
<p>Sexo:<br>
<input type="radio" name="sexo" value="masculino" tabindex="3">Masculino
<input type="radio" name="sexo" value="feminino" tabindex="4">Feminino
</p>
<p>Interesses:<br>
<input type="checkbox" name="interesse" value="cinema" tabindex="5">Cinema
<input type="checkbox" name="interesse" value="teatro" tabindex="6">Teatro
<input type="checkbox" name="interesse" value="esportes" tabindex="7">Esportes
<input type="checkbox" name="interesse" value="tecnologia" tabindex="8">Tecnologia
</p>
<p>Mensagem:<br>
<textarea name="mensagem" rows="2" cols="20" tabindex="9"></textarea>
</p>
<p>Meio de Transporte:
<select name="veiculo" tabindex="10">
<option value="carro">Automóvel</option>
<option value="bicicleta">Bicicleta</option>
<option value="motocicleta">Motocicleta</option>
<option value="onibus">Ônibus</option>
</select>
</p>
<p>
<input type="submit" value="Enviar" tabindex="11">
</p>
</form>
</body>
</html>
Note no código acima que foram adicionados diversos atributos
tabindex com valores subsequentes.
Para utilizar essa facilidade basta que o usuário tecle em
TAB que o foco do formulário será iniciado
no primeiro campo, pois o mesmo foi definido com
tabindex de valor 1.
A cada vez que o usuário acionar a tecla TAB
o foco será alterado para o próximo valor inteiro definido
como valor para um atributo tabindex.
Nos campos de texto basta o usuário digitá-lo.
Para os campos radiobutton e
checkbox é necessário teclar a barra de
espaço para marcar o elemento.
No campo select, ao receber o foco, se o usuário utilizar as setas
direcionais para cima e para baixo o foco será alterado para
um item da lista.
Quando o foco chegar a um botão basta que o usuário tecle
ENTER.
Na próxima lição veremos alguns formatos de mídia muito utilizados
em HTML, incluindo MP3, MP4,
vários formatos de áudio e vídeo e mais adiante como hospedar
os vídeos na internet.
Fonte: ActiveInfo
Você Gostou deste artigo?
E-mail Atualizações gratuitas!
*Seu email não será compartilhado com ninguém.
0 comentários:
Postar um comentário