No desenvolvimento de um site ou uma página HTML nos deparamos com alguns recursos parecidos o que pode causar alguma confusão, especialmente para quem é iniciante no desenvolvimento web. ID e Class é um bom exemplo, assim como os métodos GET e POST. Quais as diferenças entre eles, quando podemos ou devemos usar um em detrimento do outro? Neste artigo pretendo oferecer algumas respostas para isso.
O atributo ID é um dos mais comuns em HTML, sua função é definir um identificador para a tag, tornando-a única dentro da página. Por padrão não poderá haver em uma mesma página duas tags com o mesmo valor para o atributo ID.
Na maioria dos casos o ID é um atributo opcional, mas quando usado geralmente é para fins de formatação no CSS ou para manipulação via Javascript ou linguagem de servidor.
Exemplo de uso:
<div id=”box”>... conteúdo ...
</div>
Com o código HTML acima é possível formatar este ID no CSS da seguinte forma:
#box{ Background-color: #ccc;
Padding: 10px;
}
Note que no CSS as regras para ID devem iniciar com o caracter #, indicado que é a formatação de um ID e não a redefinição de uma tag.
O atributo class é usado para aplicar uma classe de formatação do CSS em uma tag qualquer. Diferentemente do ID que tem a função de fazer uma identificação única, com o class podemos aplicar a mesma classe várias vezes na mesma página. Imagine um texto com dez parágrafos, sendo que três parágrafos deveram receber uma formatação diferenciada. Neste caso podemos criar uma classe no CSS com a tal formatação diferenciada e usando o atributo class aplicar esta formatação nas tags desejadas.
Exemplo de uso:
<p>Este é um parágrafo normal</p><p class=”centralizado”>Este é um parágrafo que deverá ter o texto centralizado</p>
<p>Este é um parágrafo normal</p>
<p>Este é um parágrafo normal</p>
<p class=”centralizado”>Este é um parágrafo que deverá ter o texto centralizado</p>
No CSS podemos criar a classe centralizado para criar a formatação desejada:
.centralizado{ Text-align: center
}
Note que as regras em CSS para classes devem iniciar com o (.) indicado que ela é uma classe e não um ID ou redefinição de tags.
Diferenças entre GET e POST
Outra particularidade das páginas HTML são os métodos GET e POST usados para transferir informações entre páginas. Há diferenças significativas entre eles, conforme podemos perceber abaixo:
O método GET é usado para passar informações de uma página para outra usando a URL como meio. Veja como exemplo a seguinte URL: https://www.site.com.br/produtos.php?tipo=carro&modelo=palio&cor=verde
Neste caso tipo que está depois do sinal de interrogação (?) são parâmetros que estão sendo passados para a página produtos.php. O caracter & é usado para separar os parâmetros e com isso teremos três parâmetros:
Para passar parâmetros pelo método GET podemos fazer via link ou via formulário.
Via link
<a href=” produtos.php?tipo=carro&modelo=palio&cor=verde”>Pálio Verde</a>
Via formulário
<form name="form1" id="form1" method="GET">Tipo: <input type="text" name="tipo" id="tipo" /><br/>
Modelo: <input type="text" name="modelo" id="modelo" /><br/>
Cor: <input type="text" name="cor" id="cor" /><br/>
<input name="gravar" type="submit" id="gravar" value="ENVIAR" />
</form>
Via programação é possível manipular ou receber o resultado dos dados passados pelo método GET. Veja os exemplos abaixo:
Em PHP usamos a superglobal $_GET da seguinte forma:
echo $_GET[“tipo”];echo $_GET[“modelo”];
echo $_GET[“cor”];
Em ASP.NET usamos o comando request.querystring para recuperar os dados, conforme exemplo a seguir:
response.write(request.querystring(“tipo”))response.write(request.querystring(“modelo”))
response.write(request.querystring(“cor”))
O método GET é muito eficiente e fácil de usá-lo, especialmente pela facilidade de manipulá-lo via programação, contudo é necessário ter alguns cuidados como o tipo de informação que está sendo passado pela URL. Dados confidenciais como nome de usuário, senha, número de cartão de crédito, número de documentos, entre outros devem ser evitados pois os parâmetros da URL são visíveis, editáveis e públicos.
O método POST é o mais usado para postar dados de formulários. Sua vantagem é que os dados são postados internamente e, portanto o usuário não tem acesso a eles. Diferentemente do GET, o POST só pode ser usado em formulários.
O mesmo exemplo anterior, agora com o método POST
<form name="form1" id="form1" method="POST">Tipo: <input type="text" name="tipo" id="tipo" /><br/>
Modelo: <input type="text" name="modelo" id="modelo" /><br/>
Cor: <input type="text" name="cor" id="cor" /><br/>
<input name="gravar" type="submit" id="gravar" value="ENVIAR" />
</form>
Via programação é possível manipular ou receber o resultado dos dados passados pelo método GET. Veja os exemplos abaixo:
Em PHP usamos a superglobal $_POST da seguinte forma
echo $_POST[“tipo”];echo $_POST[“modelo”];
echo $_POST[“cor”];
Em ASP.NET usamos o comando request.form para recuperar os dados, conforme exemplo a seguir:
response.write(request.form(“tipo”))response.write(request.form(“modelo”))
response.write(request.form(“cor”))
COMPARTILHE: Facebook Twitter WhatsApp