Cara Membuat Sign Up Form

Di bawah ini kita akan mempelajari cara membuat sign up form responsif dengan CSS.

Klik pada tombol sign up untuk membuka formulir pendaftaran:

<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

/* Tambahkan warna background saat input mendapatkan fokus */
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Atur style untuk semua buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Gaya ekstra untuk cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Cancel button dan sign up akan melakukan float dan tambahkan lebar yang sama */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Tambahkan padding ke elemen container  */
.container {
  padding: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Sembunyikan secara default */
  position: fixed; /* Tetapkan tempatnya */
  z-index: 1; /* Tetapkan di atas*/
  left: 0;
  top: 0;
  width: 100%; /* Lebar maksimum */
  height: 100%; /*Tinggi maksimum */
  overflow: auto; /* Aktifkan scroll jika dibutuhkan */
  background-color: #474e5d;
  padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% dari atas, 15% dari bawah dan tengah */
  border: 1px solid #888;
  width: 80%; /* Bisa lebih atau kurang, tergantung ukuran layar */
}

/* Beri stryle  horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
 
/* The Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* bersihkan floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Ubah style untuk button cancel dan button sign up pada layar ekstra kecil */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 100%;
  }
}
</style>
<body>

<h2>Modal Signup Form</h2>

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Sign Up</button>

<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Sign Up</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" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

      <label for="psw-repeat"><b>Ulangi Password</b></label>
      <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
      
      <label>
        <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
      </label>

      <p> Dengan membuat akun, Anda menyetujui  <a href="#" style="color:dodgerblue">Persyaratan & Kebijakan</a> yang kami buat.</p>

      <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
        <button type="submit" class="signupbtn">Sign Up</button>
      </div>
    </div>
  </form>
</div>

<script>
// Dapatkan modal
var modal = document.getElementById('id01');

// Saat pengguna mengklik di mana saja di luar modal, tutuplah
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

Cara Membuat Sign Up Form

Langkah 1) Tambahkan HTML:
Gunakan elemen untuk memproses masukan. Anda dapat mempelajari lebih lanjut tentang ini di tutorial PHP kami. Kemudian tambahkan masukan (dengan label yang cocok) untuk setiap bidang:

Contoh

  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Sign Up</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" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

      <label for="psw-repeat"><b>Ulangi Password</b></label>
      <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
      
      <label>
        <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
      </label>

      <p> Dengan membuat akun, Anda menyetujui  <a href="#" style="color:dodgerblue">Persyaratan & Kebijakan</a> yang kami buat.</p>

      <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
        <button type="submit" class="signupbtn">Sign Up</button>
      </div>
    </div>
  </form>

Langkah 2) Tambahkan CSS:
Contoh

* {box-sizing: border-box}

/* Full-width input fields */
  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;
}

hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Atur style untuk semua buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Extra styles untuk cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* button cancel dan sign up akan float dan tambahkan lebar yang sama */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Tambahkan padding ke elemen container  */
.container {
  padding: 16px;
}

/* Bersihkan floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Ubah gaya untuk cancel button dan sign up button pada layar ekstra kecil */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}

Cara Membuat Modal Sign Up Form

Langkah 1) Tambahkan HTML:
Gunakan elemen <form> untuk memproses inputan. Kemudian tambahkan inputan(dengan label yang cocok) untuk setiap field:

Contoh

<!-- button untuk membuka modal -->
<button onclick="document.getElementById('id01').style.display='block'">Sign Up</button>

<!-- Modalnya (berisi Sign Up Form) -->
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">times;</span>
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Sign Up</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" required>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

      <label for="psw-repeat"><b>Ulangi Password</b></label>
      <input type="password" placeholder="Repeat Password" name="psw-repeat" required>

      <label>
        <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
      </label>

      <p> Dengan membuat akun, Anda menyetujui  <a href="#" style="color:dodgerblue">Persyaratan & Kebijakan</a> yang kami buat.</p>

      <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
        <button type="submit" class="signup">Sign Up</button>
      </div>
    </div>
  </form>
</div>

Langkah 2) Tambahkan CSS:
Contoh

* {box-sizing: border-box;}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

/* Tambahkan warna background saat input mendapatkan fokus */
input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Atur style untuk semua buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Gaya ekstra untuk cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Cancel button dan sign up akan melakukan float dan tambahkan lebar yang sama */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Tambahkan padding ke elemen container  */
.container {
  padding: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Sembunyikan secara default */
  position: fixed; /* Tetapkan tempatnya */
  z-index: 1; /* Tetapkan di atas*/
  left: 0;
  top: 0;
  width: 100%; /* Lebar maksimum */
  height: 100%; /*Tinggi maksimum */
  overflow: auto; /* Aktifkan scroll jika dibutuhkan */
  background-color: #474e5d;
  padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% dari atas, 15% dari bawah dan tengah */
  border: 1px solid #888;
  width: 80%; /* Bisa lebih atau kurang, tergantung ukuran layar */
}

/* Beri stryle  horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
 
/* The Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* bersihkan floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Ubah style untuk button cancel dan button sign up pada layar ekstra kecil */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 100%;
  }
}

Tip: Kita juga dapat menggunakan javascript berikut untuk menutup modal dengan mengklik di luar konten modal (dan tidak hanya dengan menggunakan tombol “x” atau “cancel” untuk menutupnya):

Contoh

<script>
// Dapatkan modal
var modal = document.getElementById('id01');

// Saat pengguna mengklik di mana saja di luar modal, tutuplah
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

forms How To html dan css

Cara Membuat Sign Up Form

Cara Membuat Sign Up Form

Cara Membuat Modal Sign Up Form

Cara Membuat Form Login

Cara Membuat Check Out Form

You may also like