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: 9632 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.


VisuAlg ::: Desafios e Lista de Exercícios Resolvidos ::: VisuAlg Básico

Exercícios Resolvidos de VisuAlg - Escreva um programa VisuAlg para calcular e imprimir o número de lâmpadas necessárias

Quantidade de visualizações: 656 vezes
Pergunta/Tarefa:

Escreva um programa VisuAlg para calcular e imprimir o número de lâmpadas necessárias para iluminar um determinado cômodo de uma residência. Dados de entrada: a potência da lâmpada utilizada (em watts), as dimensões (largura e comprimento, em metros) do cômodo. Considere que a potência necessária é de 18 watts por metro quadrado.

Sua saída deverá ser parecida com:

Informe a potência da lâmpada (em watts): 100
Informe a largura do cômodo (em metros): 6
Informe o comprimento do cômodo (em metros): 4
Serão necessárias 4 lâmpadas.
Resposta/Solução:

Veja a resolução completa para o exercício em VisuAlg, comentada linha a linha:

algoritmo "Como calcular o número de lâmpadas necessárias"

var
  // variáveis usadas na resolução do problema
  potencia_lampada, largura_comodo, comprimento_comodo: real
  area_comodo, potencia_total: real
  quant_lampadas: inteiro

inicio
  // vamos ler a potência da lâmpada
  escreva("Informe a potência da lâmpada (em watts): ")
  leia(potencia_lampada)

  // vamos ler a largura do cômodo
  escreva("Informe a largura do cômodo (em metros): ")
  leia(largura_comodo)

  // agora vamos ler o comprimento do cômodo
  escreva("Informe o comprimento do cômodo (em metros): ")
  leia(comprimento_comodo)

  // agora vamos calcular a área do cômodo
  area_comodo <- largura_comodo * comprimento_comodo

  // calculamos a potência total necessária para iluminar
  // todo o cômodo
  potencia_total <- area_comodo * 18

  // e finalmente calculamos a quantidade de lâmpadas necessárias
  quant_lampadas <- Int(potencia_total / potencia_lampada)

  // será necessário no mínimo uma lâmpada
  se quant_lampadas = 0 entao
    quant_lampadas <- quant_lampadas + 1
  fimse

  // e mostramos o resultado
  escreva("Serão necessárias ", quant_lampadas, " lâmpadas.")

fimalgoritmo



PHP ::: Dicas & Truques ::: Variáveis e Constantes

Como testar se uma variável ou constante é do tipo integer - Como usar as funções is_int() e is_integer() do PHP

Quantidade de visualizações: 10177 vezes
Em algumas situações precisamos verificar se uma determinada ou constante é do tipo integer, ou seja, possui um valor inteiro, sem casas decimais. Isso pode ser feito por meio das funções is_int() e is_integer(). Elas retornam um valor true se o arguemento for um inteiro e false em caso contrário.

Veja um exemplo completo de como usá-las:

<?php
/*
  Em algumas situações podemos querer saber se
  o tipo de uma variável é integer, ou seja,
  contém um valor inteiro (sem casas decimais).
 
  Este teste pode ser feito com o auxílio da
  função is_int() ou is_integer(). Esta função 
  retorna um valor true ou false dependendendo do 
  tipo de variável sendo testada.    
  */ 
 
  $valor = 10;
 
  if(is_int($valor)){
    echo 'A variável $valor é do tipo integer';
  }
?>

Ao executarmos este código nós teremos o seguinte resultado:

A variável $valor é do tipo integer

Esta dica foi revisada, atualizada e testada com o PHP 8.


Ruby ::: Dicas & Truques ::: Data e Hora

Como construir uma data e hora em Ruby usando os métodos mktime() e local() da classe Time

Quantidade de visualizações: 8045 vezes
Há situações em que precisamos trabalhar com datas e horas no passado ou futuro em Ruby. Para estas situações nós precisamos construir a data ou a data e a hora. Nesta dica mostrarei como usar os métodos mktime() e local() para esta finalidade.

Os métodos mktime() e local() são sinônimos e ambos aceitam os seguintes argumentos:

# argumentos para mktime
Time.mktime(year [, month, day, hour, min, sec, 
  usec) => time

#argumentos para local
Time.local(year [, month, day, hour, min, sec, 
  usec]) => time


Estes métodos criam um novo objeto Time baseado nos parâmetros fornecidos. As unidades de tempo são fornecidas em ordem inversa do mais longo para o mais curto: ano, mês, dia, horas, minutos, segundos e microsegundos. Todos os parâmetros, exceto ano, são opcionais. Quando não fornecidos, estes parâmetros são automaticamente inicializados com seus menores valores possíveis. O parâmetro de microsegundos (usec) pode ser ignorado em muitas arquiteturas. O valor para as horas deve estar na faixa 0..23 (formato 24 horas).

Veja um trecho de código no qual usamos os métodos mktime() e local() para construir uma data e uma data e hora:

# constrói uma data usando o método mktime
# passando o ano, mês e dia
hoje = Time.mktime(2008, 11, 22)

# exibe o resultado
puts "A data é: " + hoje.to_s

# constrói uma data e hora usando o método mktime
# passando o ano, mês, dia, horas, minutos e segundos
hoje = Time.mktime(2008, 11, 22, 20, 25, 10)

# exibe o resultado
puts "A data e hora é: " + hoje.to_s

Ao executar este código Ruby nós teremos o seguinte resultado:

A data é: 2008-11-22 00:00:00 -0300
A data e hora é: 2008-11-22 20:25:10 -0300


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.


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