Bagaimana Membuat: Borang Pendaftaran
Belajar bagaimana menggunakan CSS untuk membuat borang pendaftaran.
Bagaimana Membuat Borang Daftar
Langkah Pertama - Tambahkan HTML:
Gunakan elemen <form> untuk menangani input. Anda dapat mengetahui lebih banyak tentang informasi terkait di tutorial PHP kami.
Lalu tambahkan kontrol input untuk setiap field (dengan label yang sesuai):
<form action="action_page.php"> <div class="container"> <h1>Daftar</h1> <p>Silahkan Isi Borang Ini Untuk Membuat Akun.</p> <hr> <label for="email"><b>Emel</b></label> <input type="text" placeholder="Sertakan Emel" name="email" id="email" required> <label for="psw"><b>Katalaluan</b></label> <input type="password" placeholder="Sertakan Katalaluan" name="psw" id="psw" required> <label for="psw-repeat"><b>Sertakan Katalaluan</b></label> <input type="password" placeholder="Sertakan Katalaluan" name="psw-repeat" id="psw-repeat" required> <hr> <p>Dengan menciptakan akun, Anda setuju dengan <a href="#">Syarat & Privasi</a> kami.</p> <button type="submit" class="registerbtn">Daftar</button> </div> <div class="container signin"> <p>Sudah punya akun? <a href="#">Daftar masuk</a>.</p> </div> </form>
Kesempatan kedua - Tambahkan CSS:
* {box-sizing: border-box} /* Menambahkan margin dalam kontainer */ .container { padding: 16px; } /* Bidang input penuh lebar */ 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; } /* Menutup gaya default hr */ hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } /* Menetapkan gaya tombol pengiriman/pendaftaran */ .registerbtn { background-color: #04AA6D; color: white; padding: 16px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; } .registerbtn:hover { opacity:1; } /* Untuk menambahkan warna teks biru untuk tautan */ a { color: dodgerblue; } /* Untuk menetapkan warna latar belakang abu-abu untuk bagian 'login' dan menyentuh teks di tengah */ .signin { background-color: #f1f1f1; text-align: center; }
相关页面
教程:HTML 表单
教程:CSS 表单