Você está aqui: Cards de AutoCAD Civil 3D |
||
|
||
![]() |
||
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: 3011 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. |
Delphi ::: Dicas & Truques ::: Strings e Caracteres |
Como trabalhar com strings em Delphi - Como usar strings na linguagem DelphiQuantidade de visualizações: 28112 vezes |
Strings estão presentes em praticamente todos os programas que desenvolvemos, não importa a linguagem de programação usada. Sempre que queremos trabalhar com nomes de pessoas, nomes de cidades, palavras, frases e textos, as strings estão lá para nos auxiliar. Assim, para as linguagens de programação, as strings são apenas matrizes de caracteres (letras ou símbolos). Em Delphi podemos declarar e inicializar strings da seguinte forma: procedure TForm1.Button1Click(Sender: TObject); var nome: string; // declara uma variável do tipo string begin nome := 'Osmar J. Silva'; // inicializa a variável ShowMessage(nome); // exibe o conteúdo da string end; Quando declaramos uma string em Delphi usando a palavra-chave string, o compilador automaticamente assume o tipo UnicodeString, com uma capacidade de 2^30 caracteres (mais ou menos 1.073.741.824 caracteres) com uma capacidade variando de 4 bytes até 2GB. Além do tipo string, o Delphi suporta outros tipos que possibilitam também o trabalho com strings e caracteres. Entre eles podemos citar ShortString, AnsiString, WideString entre outros. Quando puder dê mais uma revisada nas minha dicas sobre strings e caracteres para aprender mais. É possível também usar o tipo string para criar strings com tamanhos pré-definidos. Veja: var nome: string[5]; // declara uma variável do tipo string // que guardará apenas 5 caracteres Aqui temos uma string que não suportará mais que cinco caracteres. Importante notar que, internamente, teremos agora uma string do tipo ShortString e não mais UnicodeString como anteriormente. Se tentarmos atribuir mais que cinco caracteres nesta variável, o restante será truncado: nome := 'Osmar J. Silva'; // inicializa a variável ShowMessage(nome); // mostrará apenas "Osmar" Para finalizar, veja como podemos solicitar ao usuário que informe seu nome e exibí-lo usando a função ShowMessage(): procedure TForm1.Button1Click(Sender: TObject); var nome: string; // declara uma variável do tipo string begin // vamos solicitar ao usuário que informe seu nome nome := Dialogs.InputBox('Nome', 'Informe seu nome:', ''); ShowMessage('Seu nome é: ' + nome); // mostrará apenas "Osmar" end; Para questões de compatibilidade, esta dica foi escrita usando Delphi 2009. |
PHP ::: Dicas & Truques ::: Data e Hora |
Datas e horas em PHP - Como saber se um determinado ano é bissexto usando PHPQuantidade de visualizações: 59 vezes |
Nesta dica veremos como é possível usar a função date() da linguagem PHP para verificar se um determinado ano é bissexto. Note como combinamos o parâmetro "L" da função date() e a função mktime() contendo o ano que queremos testar. Veja o código PHP completo para o exemplo: <html> <head> <title>Estudando PHP</title> </head> <body> <?php $ano = "2020"; $bissexto = date("L", mktime(0, 0, 0, 1, 1, $ano)); if($bissexto == 0){ echo "O ano informado não é bissexto"; } else{ echo "O ano informado é bissexto"; } ?> </body> </html> Ao executar este código PHP nós teremos o seguinte resultado: O ano informado é bissexto |
PHP ::: Dicas & Truques ::: Arquivos e Diretórios |
Como renomear um diretório em PHP usando a função rename()Quantidade de visualizações: 11585 vezes |
Diretórios podem ser renomeados usando a função rename() da linguagem PHP. Esta função recebe o nome atual do diretório e o novo nome e retorna um valor boolean (true ou false) informando o sucesso ou não da operação. Antes de usar esta função verifique se você possui as permissões adequadas para renomear o diretório. Veja um trecho de código no qual renomeamos um diretório no diretório public_html: <?php // renomeia o diretório "recentes" para "atuais" $diretorio_antigo = "/site/public_html/recentes"; $diretorio_novo = "/site/public_html/atuais"; if(rename($diretorio_antigo, $diretorio_novo)){ echo "Diretório renomeado com sucesso."; } else{ echo "Não foi possível renomear o diretório."; } ?> Ao executar este código nós teremos o seguinte resultado: Diretório renomeado com sucesso. Seja cuidadoso. Se você não tiver as permissões adequadas para renomear um diretório, a seguinte mensagem de erro será exibida: Warning: rename(imagens,imagens_novas) [function.rename]: Permission denied in /site/public_html/testes.php on line 9 Não foi possível renomear o diretório. |
React Native ::: React Native - Componentes Visuais ::: Button |
Como detectar um clique em um botão do React Native e exibir uma mensagem AlertQuantidade de visualizações: 1256 vezes |
Nesta dica mostrarei como detectar um evento onPress em um botão do React Native e exibir uma mensagem usando o método alert() do componente Alert. Note que o evento onPress é disparado quando o usuário pressiona o botão. Veja o código completo para o exemplo: import React, {Component} from 'react'; import {View, Button, Alert} from 'react-native'; type Props = {}; export default class App extends Component<Props> { render() { return ( <View style={{backgroundColor: '#eeeeee', padding: 30}}> <Button onPress = {() => Alert.alert("Bem-vindo(a) ao React Native")} title="Clique" /> </View> ); } } Veja que este exemplo define o código a ser chamado quando o botão for clicado diretamente em sua declaração. Em outras dicas dessa seção você verá como clicar no botão e chamar uma função JavaScript residente fora da declaração do botão. |
Veja mais Dicas e truques de React Native |
Dicas e truques de outras linguagens |
Códigos Fonte |
![]() Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
![]() Tenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
1º lugar: Java |