CSS ::: Projetos HTML/CSS Completos - Códigos Fonte HTML/CSS/JavaScript ::: Formulários HTML/CSS/JavaScript |
Como criar uma tela de login usando HTML, CSS e JavaScript - Responsivo e com opção de exibir/ocultar senhaQuantidade de visualizações: 7611 vezes |
Nesta dica mostrarei uma combinação muito interessante de HTML5, CSS e JavaScript para a criação de um formulário de login contendo dois campos de texto, um para a inserção do nome de usuário e outro para a inserção da senha: Veja:![]() No final da dica deixei o link para download do arquivo index.html e as imagens usadas no exemplo. Neste código você aprenderá técnicas valiosas de CSS para a criação de formulários HTML, tais como a definição de cores de fundo, espaçamento interno e margens. Além disso, verá como exibir uma imagem ao lado (na verdade dentro) de um campo de senha, de forma que, ao clicar na imagem, a senha digitada pelo usuário seja exibida ou ocultada. Para isso foi usado código JavaScript puro, sem a necessidade de nenhum framework ou biblioteca. Outro detalhe interessante é a responsividade. Ao abrir o exemplo em uma tela reduzida, tal como a tela de um celular, o formulário é ajustado. Para isso você aprenderá a usar as media queries do CSS. Tudo bem simples e comentado. Aqui está a parte do CSS que formata a DIV de recuperação da senha, remove o sublinhado do link e define a sua cor, e a media query que ajusta a largura da DIV principal em telas reduzidas:
/* DIV para recuperar a senha */
.div_recuperar_senha{
margin-top: 12px;
padding: 10px;
background-color: #f1f1f1;
text-align: center;
}
/* retira o sublinhado do link */
.div_recuperar_senha a{
text-decoration: none;
color: black;
}
/* define as regras de responsividade para as
telas menores */
@media screen and (max-width: 600px) {
.div_principal{
width: 100%;
}
}
E aqui está o código JavaScript que permite exibir ou ocultar a senha do usuário:
<script type="text/javascript">
function exibir_ocultar_senha(){
// obtém uma referência ao campo senha
const txt_senha = document.getElementById("senha");
// obtém uma referência à imagem indicativa
const imagem = document.getElementById("
imagem_exibir_ocultar");
// mudamos o type do campo senha
const type = senha.getAttribute('type');
if(type === 'password'){
senha.setAttribute('type', 'text');
imagem.src = "imagens/olho_exibir.png";
}
else{
senha.setAttribute('type', 'password');
imagem.src = "imagens/olho_ocultar.png";
}
}
</script>
Gostou? Agora é só baixar o código completo e adicionar estes recursos às páginas web. Código fonte formulário de login em HTML, CSS e JavaScriptResponsivo 1) FLHCJEOS1 - Código fonte formulário de login em HTML, CSS e JavaScript Responsivo - Faça o download do Código fonte formulário de login em HTML, CSS e JavaScript Responsivo. Não se esqueça: Uma boa forma de estudar o código é fazendo pequenas alterações e rodando para ver os resultados. Outra opção é começar um projeto HTML do zero e ir adicionando trechos do código fonte para melhor entendimento de suas partes. |
Java ::: Dicas & Truques ::: Programação Orientada a Objetos |
Como usar o modificador final em classes, variáveis e métodos Java - Programação Orientada a Objetos em JavaQuantidade de visualizações: 13842 vezes |
O modificador final pode ser usado com classes, variáveis e métodos. É claro que o significado varia dependendo do uso. Por exemplo, ao marcarmos uma variável com o modificador final, estamos na verdade criando uma constante, ou seja, uma variável cujo conteúdo não pode ser alterado durante a execução do programa. Veja:
public class Estudos{
static final int VALOR = 45;
public static void main(String args[]){
// vamos tentar alterar o valor da
// constante
VALOR = 10;
}
}
Ao tentarmos compilar este programa teremos a seguinte mensagem de erro:
Estudos.java:7: cannot assign a value to
final variable VALOR
VALOR = 10;
^
1 error
Tenha em mente, porém, que quando uma variável marcada como final é uma referência a um objeto, é a referência que não poderá ser alterada. As propriedades do objeto para a qual ela aponta poderão sofrer alterações, exceto se estes também estiverem marcados como final. Quando aplicado a classes, o modificador final garante que a classe não poderá ser extendida, ou seja, não é possível criar uma classe derivada a partir de uma classe marcada como final. Veja:
// superclasse
final class Pessoa{
public String nome;
}
// subclasse
class Aluno extends Pessoa{
public String matricula;
}
public class Estudos{
public static void main(String args[]){
// Cria um objeto da classe Aluno
Aluno a = new Aluno();
}
}
Ao tentarmos compilar este código teremos a seguinte mensagem de erro:
Estudos.java:7: cannot inherit from
final Pessoa
class Aluno extends Pessoa{
^
1 error
Um método marcado como final não pode ser sobrescrito. Veja um exemplo:
// superclasse
class Pessoa{
protected String nome;
public final String getNome(){
return this.nome;
}
}
// subclasse
class Aluno extends Pessoa{
// estamos sobrescrevendo o método
// herdado da superclasse
public final String getNome(){
return "Aluno: " + this.nome;
}
}
public class Estudos{
public static void main(String args[]){
// Cria um objeto da classe Aluno
Aluno a = new Aluno();
}
}
Ao tentarmos compilar este código teremos a seguinte mensagem de erro:
Estudos.java:14: getNome() in Aluno cannot
override getNome() in Pessoa; overriden method is final
public final String getNome(){
^
1 error
Resumindo: variáveis marcadas com final não poder sofrer alterações. Classes marcadas como final não podem ter classes derivadas. Métodos marcados como final não podem ser sobrescritos. |
C# ::: Windows Forms ::: ListBox |
Como adicionar itens a uma ListBox do C# Windows Forms via código usando o método Add()Quantidade de visualizações: 26742 vezes |
|
Nesta dica eu mostrarei como podemos adicionar novos itens a um controle ListBox do C# Windows Forms em tempo de execução, ou seja, quando a aplicação já estiver sendo executada. Para isso nós podemos usar o método Add() do objeto ObjectCollection da classe ListBox. Veja um trecho de código no qual inserimos quatro nomes de cidades em uma ListBox. Os itens são adicionamos no evento Click de um botão:
private void button1_Click(object sender, EventArgs e) {
listBox1.Items.Add("Goiânia");
listBox1.Items.Add("São Paulo");
listBox1.Items.Add("Rio de Janeiro");
listBox1.Items.Add("Curitiba");
}
|
Java ::: Dicas & Truques ::: Threads |
Threads em Java - Como usar a interface Runnable da Java API em suas aplicaçõesQuantidade de visualizações: 18172 vezes |
|
A interface pública Runnable deve ser implementada em nossas classes quando queremos que instâncias destas possam ser executadas por uma thread. Esta interface está no pacote java.lang e entre as classes que a implementam podemos citar AsyncBoxView.ChildState, FutureTask, RenderableImageProducer, Thread e TimerTask. Esta interface apresenta apenas um método, a saber: public void run(); Este interface foi idealizada para fornecer um protocolo comum para objetos que têm como objetivo executar determinadas porções de código enquanto ativos. Por exemplo, Runnable é implementada pela classe Thread. Estar ativa significa que uma thread foi iniciada e ainda não finalizou sua tarefa. Além disso, a interface Runnable fornece meios para que uma classe esteja ativa sem fazer sub-classe de Thread. Uma classe que implementa Runnable pode ser executada sem fazer sub-classe de Thread criando-se uma instância de Thread e fornecendo tal classe como alvo. Na maioria dos casos, a interface Runnable deve ser usada se estivermos planejando apenas sobrescrever o método run() e nenhum outro método da classe Thread. Isso é importante, uma vez que não devemos extender classes a menos que tenhamos a intenção de modificar ou extender o comportamento fundamental da classe. Veja uma aplicação na qual temos uma classe que implementa Runnable. Note como criamos instâncias de Thread e fornecemos nossa classe como alvo:
// criamos uma classe que servirá como thread
class MinhaThread implements Runnable{
private String nome;
public MinhaThread(String nome){
this.nome = nome;
}
public void run(){
for(int i = 1; i <= 20; i++){
System.out.println(nome + ": " + i);
}
}
}
public class Estudos{
public static void main(String[] args){
// vamos criar duas threads
MinhaThread mt1 = new MinhaThread("Thread 1");
Thread t1 = new Thread(mt1);
t1.start();
MinhaThread mt2 = new MinhaThread("Thread 2");
Thread t2 = new Thread(mt2);
t2.start();
System.exit(0);
}
}
|
Você também poderá gostar das dicas e truques de programação abaixo |
|
MySQL - Como excluir a chave primária de uma tabela MySQL usando o comando ALTER TABLE DROP PRIMARY KEY VB.NET - Como usar o laço While em VB.NET |
Nossas 20 dicas & truques de programação mais recentes |
Últimos Projetos e Códigos Fonte Liberados Para Apoiadores do Site |
|
Python - Como criar o jogo Pedra, Papel, Tesoura em Python - Jogo completo em Python com código comentado |
Últimos Exercícios Resolvidos |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |






