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: 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áriasQuantidade 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. 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 PHPQuantidade 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 TimeQuantidade 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 |
|
Delphi - Delphi para iniciantes - Como criar uma data e hora em Delphi usando a função EncodeDateTime() |
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 |
|
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 |






