Kode HTML Tampilan Form Login

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.

Huntku Blog View

Cari Blog Ini

Kode HTML Tampilan Form Login

Label

Postingan populer dari blog ini

Cara Mengganti Gambar Pada Image Slider di Slims 9

Berbagi Jaringan Menggunakan Bluethoot dari Ponsel ke Laptop

Reservasi Buku Pada Bucket Slims 9 Bulian