Java, C/C++, Python, C#, LISP, AutoLisp, AutoCAD e VBA
PHP, Python, C#, JavaScript, Laravel, Google Ads e SEO

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 senha

Quantidade 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 Java

Quantidade 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ções

Quantidade 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();
Assim, uma classe que implementa Runnable deverá redefinir este método, sem argumentos, e fornecer a funcionalidade desejada.

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);
  }
}



Nossas 20 dicas & truques de programação mais populares

Você também poderá gostar das dicas e truques de programação abaixo

Nossas 20 dicas & truques de programação mais recentes

Últimos Projetos e Códigos Fonte Liberados Para Apoiadores do Site

Últimos Exercícios Resolvidos

E-Books em PDF

E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book
E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas
Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby


E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser. Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book Apenas R$ 32,90

Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica.


© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 87 usuários muito felizes estudando em nosso site.