Bagaimana Membuat: Borang Pendaftaran

Belajar bagaimana menggunakan CSS untuk membuat borang pendaftaran.

Daftar

Silahkan Isi Borang Ini Untuk Membuat Akun.



Dengan menciptakan akun, Anda menunjukkan persetujuan untukSyarat Layanan dan Kebijakan Privasi.

亲自试一试

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 表单