Webleb - HTML UI Elements -

Abrir no Editor Publique Seu Código

Recomendado

11 March 2025

Formulário de login HTML avançado

6 June 2025

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> 
        <link rel="stylesheet" href="style.css">
        <title>Andev Web</title>
</head>

<body>
<div class="container">
  <div class="password-box">
     <h3 class="password">i3R&C=!Z(#BK</h3> 
     <div class="copy-btn">
        <i class="fa-regular fa-copy" id="copy-btn"></i>
        <span>Copied!</span>
     </div>
  </div>    
  <div class="checkboxes-box">
    <div class="uppercase">
      <input type="checkbox" name="" id="uppercase"> 
      <span>Uppercase</span>
    </div>  
    <div class="lowercase">
       <input type="checkbox" name="" id="" checked>
       <span>Lowercase</span>
    </div>  
    <div class="numbers">
            <input type="checkbox" name="" id="numbers">
            <span>Numbers</span>
    </div> 
    <div class="symbols">
            <input type="checkbox" name="" id="symbols">
            <span>Symbols</span>
    </div>    
  </div>
  <div class="password-length">
   <h3>Password Length</h3>  
   <input type="range" min="6" max="32" value="12" oninput="getPassLengthValue()">
   <div class="length-value">12</div>
  </div>
  <button class="generate-btn">Generate Password</button>
</div>
<script src="app.js"></script>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin:0;  
padding:0;
box-sizing:border-box;
}

body{
background:#7BDAF3;   
font-family: 'poppins', sans-serif;
}

.container{
padding:40px;   
width:380px;
background:#ffffff;
border-radius:7px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

.container .password-box{
height:45px;
width:100%;
border-radius:30px;
background:#FFFFFF;
border:1px solid grey;
padding:25px;
display:flex;
align-items:center;
}
.container .password-box h3{
font-size:14px;
color:grey;
font-weight:400;
}

.container .password-box .copy-btn{
position:absolute;  
right:63px;
color:grey;
font-size:17px;
cursor:pointer;
}

.container .checkboxes-box{
padding:1px; 
margin-top:15px;
}

.container .checkboxes-box .lowercase{
pointer-events:none;        
}

.container .checkboxes-box div{
height:35px;   
width:100%;
padding-left:35px;
display:flex;
align-items:center;
}

.container .checkboxes-box div span{
padding-left:20px;        
}

.container .checkboxes-box div input{
-webkit-appearance:none;   
height:18px;
width:18px;
border:1px solid grey;
border-radius:5px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.container .checkboxes-box div input::before{
content:"\f00c";  
position:absolute;
font-family:FontAwesome;
color:white;
font-size:11px;
display:none;
}

.container .checkboxes-box div input:checked{
background:#38b3eb; 
border-color:#38b3eb;
}

.container .checkboxes-box div input:checked::before{
display:block;        
}

.container .password-length{
padding:2px; 
padding-left:35px;
}

.container .password-length h3{
font-size:15px;
color:grey;
font-weight:500;
margin-top:12px;
}

.container .password-length input{
-webkit-appearance:none;
height:3px;
width:70%;
background:lightgrey;
position:relative;
top:-3px;
cursor:pointer;
border-radius:3px;
}

.container .password-length input::-webkit-slider-thumb{
-webkit-appearance:none;
height:13px;
width:13px;
border-radius:100%;
background:#38b3eb; 
cursor:pointer;
}

.container .password-length .length-value{
height:30px;  
width:55px;
background:white;
display:flex;
align-items:center;
justify-content:center;
border-radius:3px;
border:1px solid grey;
position:absolute;
right:55px;
margin-top:-25px;
}

.container .generate-btn{
all:unset;
height:50px;
width:260px;
background:#38b3eb;
color:white;
border-radius:30px;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-top:30px;
cursor:pointer;
}

.container .copy-btn span{
position:absolute;  
font-size:9px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:none;
margin-left:-8px;
}

::selection{
background:rgb(100, 149, 237,0.8); 
color:white;
}

JS

let passLength = document.querySelector('.password-length input');
let options = document.querySelectorAll('.checkboxes-box div input');
let generateBtn = document.querySelector('.generate-btn');
let password = document.querySelector('.password');
let copyBtn = document.querySelector('#copy-btn');
let copiedMsg = document.querySelector('.container .copy-btn span');
let copiedIcon = document.querySelector('.container .copy-btn i');

let getPassLengthValue = () => {
        document.querySelector('.length-value').innerHTML = passLength.value;
}

const characters = {
        uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
        lowercase: "abcdefghijklmnopqrstuvwxyz",
        numbers: "0123456789",
        symbols: "!@#$%^&*()_+~`|}{[]:;?><,./-="
};

let copyPassword = () => {
        navigator.clipboard.writeText(password.textContent);
        copiedIcon.style.display = 'none';
        copiedMsg.style.display = 'block';
        setTimeout(() => {
                copiedIcon.style.display = 'block';
                copiedMsg.style.display = 'none';
        }, 1000)
}

copyBtn.addEventListener('click', copyPassword);
generateBtn.addEventListener('click', getPassword);

Recomendado

Formulário de login HTML avançado

PLACA DE CONEXÃO

ícone de carregamento 4

HTML

CSS

JS

Recomendado

Formulário de login HTML avançado

PLACA DE CONEXÃO

ícone de carregamento 4

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS