Cara Membuat Form Edit PopUp Dengan HTML CSS JS

Cara membuat Form Edit PopUp Dengan HTML CSS JS - Pada artikel sebelumnya saya telah mengulas tentang cara membuat tampilan data user. Pada kesempatan kali ini saya akan membagikan bagaimana cara membuat form edit melayang, terbang (popup) tanpa berpindah ke halaman baru.

Karena ulasan ini kelanjutan dari beberapa artikel sebelumnya, bagi teman - teman yang ga punya kode keseluruhan teman - teman bisa mengumpulkan kodenya pada postingan sebelumnya. Hal pertama yang akan kita lakukan adalah memberikan tombol action pada tabel tampilan data user dengan nama kolom action . berikut kodenya :

<div class="post-content">
<h2>Data User</h2>
<table>
<tr>
<th>No</th>
<th>Username</th>
<th>Nama Lengkap</th>
<th>Alamat</th>
<th>Agama</th>
<th>Jenis Kelamin</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Violet</td>
<td>Violet Evergarden</td>
<td>Jl fatmawati no 5</td>
<td>Kristen</td>
<td>Perempuan</td>
<td>
<button id="form-user">Edit</button>
</td>
</tr>
<tr>
<td>2</td>
<td>AF</td>
<td>Alucard de franco</td>
<td>Jl Mawar no 10</td>
<td>Katholik</td>
<td>Laki-laki</td>
<td>
<button id="form-user">Edit</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Miya</td>
<td>Miya</td>
<td>Jl kebaikan no 7</td>
<td>Islam</td>
<td>Perempuan</td>
<td>
<button id="form-user">Edit</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Sun</td>
<td>Sun MK</td>
<td>Jl Sutra no 1</td>
<td>Budha</td>
<td>Laki-laki</td>
<td>
<button id="form-user">Edit</button>
</td>
</tr>
<tr>
<td>5</td>
<td>YSS</td>
<td>Yisun sin</td>
<td>Jl tujuh lima no 9</td>
<td>Hindu</td>
<td>Laki-laki</td>
<td>
<button id="form-user">Edit</button>
</td>
</tr>
</table>
</div>

pada kode di atas kita hanya perlu manambahkan kolo action dan kode button untuk menampilkan tombol edit yang akan kita tampilkan pada kolom action. Selanjutnya kita memerlukan kode untuk form edit user yang akan kita tampilkan melayang (popup). Berikut kodenya :

<div id="edit-form-user" class="userform">
  <div class="user-content">
    <div class="edit-content">
    <div class="user-header">
<span class="close">&times;</span>
<h2>Form Input Data</h2>
    </div>

<form action=" ">
<label>Username :</label><br>
<input type="text" name="username">
<br><br>
<label>Nama Lengkap:</label><br>
<input type="text" name="namalengkap">
<br><br>
<label>Password:</label><br>
<input type="text" name="password">
<br><br>
<label>Alamat:</label><br>
<textarea type="text" name="alamat" rows="4" cols="50"></textarea>
<br><br>
<label>Agama:</label>
<select name="agama">
    <option value="islam">Islam</option>
    <option value="kristen">Kristen</option>
    <option value="hindu">Hindu</option>
    <option value="budha">Budha</option>
    <option value="katholik">Katholik</option>
  </select>
  <br><br>
<label>Jenis Kelamin:</label>
<input type="checkbox" name="jk1" value="lakilaki"> Laki-Laki
  <input type="checkbox" name="jk2" value="perempuan"> Perempuan
  <br><br>
<input type="submit" value="Kirim">
</form>
</div>
  </div>
</div>

selanjutnya adalah menambahkan kode js. Berikut kodenya :

<script>
var userform = document.getElementById('edit-form-user');

var btn = document.getElementById("form-user");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    userform.style.display = "block";
}

span.onclick = function() {
    userform.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == user) {
        userform.style.display = "none";
    }
}
</script>

Kode js inilah yang berperan penting untuk kelangsungan tampilan form edit user secara norma, pada kode tampilan form edit user, ada id = userform dan class = edit-form-user. pada kode js ini id dan class berperan untuk mengidentifikasi (kunci untuk mendapatkan elemen kode form edit user), 

Selain itu ada id kode button, classname span, serta beberapa keterangan tentang ketika user klik close maka form edit user tidak ditampilkan dan ketika user klik pada halaman selain form edit user makan form edit user akan tertutup atau close. Letakan kode js ini diatas </body>

.edit-content {
    margin-left: 0px;
    border-left: 0px solid gray;
    overflow: hidden;
}
.edit-content form {
  margin-left: 0px;
  padding: 20px;
}.
userform {
    position: fixed;
    display: none;
    z-index: 1;
    padding-top: 100px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: auto;
    background-color: #000;
    background-color: rgba(0,0,0,0.4);
}
.user-content {
    background-color: #fefefe;
    margin: auto;
    padding: 0px;
    border: 1px solid #888;
    width: 50%;
}
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .user-header {
    padding: 5px;
    background-color: #cdccfe;
    color: white;
    text-align: center;
}
.user-header h2 {
  margin: 0px;
  padding: 10px;
}

Tambahkan kode css di atas pada fils style.css :

Ada tambahan tampilan kolom yaitu kolom action yang berisikan tombol edit data, jika tombol tersebut kita klik makan akan muncul tampilan form edit data.

Bagaimana Sob tidak terlalu sulit bukan untuk membuat tampilan form edit data user model popup, melayang. Jika ada yang kurang saya tunggu sarannya sob.

Demikian ulasan saya mengenai cara membuat form edit popup dengan html css js. Semoga dapat bermanfaat, terima kasih

Share this post