Kode HTML Tampilan Form Login

Diterbitkan: Januari 01, 2024 | Penulis: DeBoyGo

Form Login merupakan halaman yang penting untuk masuk ke dalam halaman dasbor baik sebagai pengguna ataupun sebagai admin.

Berikut ini adalah contoh kode HTML untuk halaman login:

<html> <head> <title>Login Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial, Helvetica, sans-serif; background-color: #dddddd; } .container { background-color: #ffffff; padding: 20px; margin: 100px auto; max-width: 400px; border-radius: 5px; input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; border-radius: 4px; } button:hover { opacity: 0.8; background-color: #f44336; } .imgcontainer { text-align: center; margin: 24px 0 12px 0; } img.avatar { width: 40%; border-radius: 50%; } .container label{ font-size: 16px; } .container > div { margin: 10px 0; } .container > .clearfix { margin: 10px 0; float: right; } .textclr { color: #fff; } /* Change styles for cancel button and signup button on extra small screens */ @media screen and (max-width: 300px) { .cancelbtn, .signupbtn { width: 100%; } } .container > div:nth-child(5) { text-align: center; } a { text-decoration: none; } </style> </head> <body> <div class="container"> <h2>Login Form</h2> <form action="" method="post"> <div> <label for="username"> <b>Username</b> </label> <input type="text" placeholder="Enter Username" name="username" required/> </div> <div> <label for="password"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="password" required/> </div> <div> <button type="submit">Login</button> <label> <span style="white-space: normal;"><a href="#">Forgot password?</a> </span> </label> <label> <span style="white-space: normal;">New user? <a href="#">Sign up</a></span> </label> </div> </form> </div> </body> </html>

Untuk untuk gambarnya ada di bawah ini.

Sekian kode html form login ini semoga bermanfaat.

Bagikan Artikel Ini