WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
5051
webleb
Publique Seu Código
Precisa de um site?
Recomendado
14 October 2024
Pagamento - Formulário
22 June 2025
Exemplo de formulário de login em HTML
index.html
Copy
<html lang="en-US"> <head> <meta charset="utf-8" /> <title>Webleb</title> <link rel="stylesheet" href="/css/styles.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" /> </head> <body style=" height:100%;display:flex ; justify-content: center; align-items: center;"> <div id="login"> <form name="form-login"> <input type="text" class="input" id="user" placeholder="Username" /> <input type="password" class="input" id="pass" placeholder="Password" /> <button type="submit" class="submitbtn">Login</button> </form> </div> </body> </html>
styles.css
Copy
body { background: #2c3338; color: #606468; font: 87.5%/1.5em 'Open Sans', sans-serif; margin: 0; height: 100vh; } input { border: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 1.5em; padding: 0; } p { line-height: 1.5em; } after { clear: both; } #login { margin: 50px auto; width: 320px; } #login form { margin: auto; padding: 30px; border-radius: 10px; background: #22272a; } .input{ background-color: #3b4148; border-radius:10px; color: #a9a9a9; margin-bottom: 1em; padding: 0 16px; width: 100%; outline: 0; height: 50px; } .submitbtn { background: #0c787d; border: 0; width: 100%; height: 40px; border-radius: 10px; color: white; cursor: pointer; transition: background 0.3s ease-in-out; } .submitbtn:hover { background: #076064; }
main.js
Copy
// Nothing to Copy
