Di bawah ini kita akan mempelajari cara membuat formulir pendaftaran dengan CSS.
Register Form
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial, Helvetica, sans-serif; background-color: black; } * { box-sizing: border-box; } /* Tambahkan padding ke containers */ .container { padding: 16px; background-color: white; } /* Lebar maksimum pada field input */ input[type=text], input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; } input[type=text]:focus, input[type=password]:focus { background-color: #ddd; outline: none; } /* Overwrite default styles of hr */ hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } /* Atur style untuk submit button atau register */ .registerbtn { background-color: #4CAF50; color: white; padding: 16px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; } .registerbtn:hover { opacity: 1; } /* Tambahkan warna teks biru ke link */ a { color: dodgerblue; } /* Setel warna background abu-abu dan pusatkan teks di bagian "sign in" */ .signin { background-color: #f1f1f1; text-align: center; } </style> </head> <body> <form action="/action_page.php"> <div class="container"> <h1>Form Register</h1> <p>Silakan isi formulir di bawah ini untuk membuat akun.</p> <hr> <label for="email"><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" id="email" required> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" id="psw" required> <label for="psw-repeat"><b>Ulangi Password</b></label> <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required> <hr> <p>Dengan membuat akun, Anda menyetujui <a href="#">Persyaratan & Kebijakan </a>.</p> <button type="submit" class="registerbtn">Register</button> </div> <div class="container signin"> <p>Sudah punya akun? <a href="#">Sign in</a>.</p> </div> </form> </body> </html>
Cara Membuat Register Form
Langkah 1) Tambahkan HTML:
Gunakan elemen <form>
untuk memproses masukan. Kemudian tambahkan masukan (dengan label yang cocok) untuk setiap bidang:
Contoh
<form action="/action_page.php"> <div class="container"> <h1>Form Register</h1> <p>Silakan isi formulir ini untuk membuat akun.</p> <hr> <label for="email"><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" id="email" required> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" id="psw" required> <label for="psw-repeat"><b>Ulangi Password</b></label> <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required> <hr> <p>Dengan membuat akun, Anda menyetujui <a href="#">Persyaratan & Kebijakan </a>.</p> <button type="submit" class="registerbtn">Register</button> </div> <div class="container signin"> <p>Already have an account? <a href="#">Sign in</a>.</p> </div> </form>
Langkah 2) Tambahkan CSS:
Contoh
* { box-sizing: border-box; } /* Tambahkan padding ke containers */ .container { padding: 16px; background-color: white; } /* Lebar maksimum pada field input */ input[type=text], input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; } input[type=text]:focus, input[type=password]:focus { background-color: #ddd; outline: none; } /* Overwrite default styles of hr */ hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } /* Atur style untuk submit button atau register */ .registerbtn { background-color: #4CAF50; color: white; padding: 16px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; } .registerbtn:hover { opacity: 1; } /* Tambahkan warna teks biru ke link */ a { color: dodgerblue; } /* Setel warna background abu-abu dan pusatkan teks di bagian "sign in" */ .signin { background-color: #f1f1f1; text-align: center; }