Halaman Form

Sekarang kita buat contoh halaman form untuk input data pegawai.
Nantinya file ini bisa digandakan untuk membuat form input data jabatan.
Buka file form.html dan ketikkan kode berikut di dalamnya.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>APG | Tambah Pegawai</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        Aplikasi Manajemen Pegawai
    </header>
    <div class="container">
        <aside>
            <ul class="menu">
                <li><a href="dashboard.html">Dashboard</a></li>
                <li><a href="tabel.html">Data Pegawai</a></li>
                <li><a href="tabel.html">Data Jabatan</a></li>
                <li><a href="login.html">Keluar</a></li>
            </ul>
        </aside>
        <section class="main">
            <h2 class="judul">Tambah Pegawai</h2>
            <form action="proses.php" method="post">
                <div class="form-group">
                    <label for="foto">Foto</label>
                    <div class="input"><input type="file" id="foto"></div>
                </div>
                <div class="form-group">
                    <label for="nama">Nama</label>
                    <div class="input"><input type="text" id="nama"></div>
                </div>
                <div class="form-group">
                    <label for="jk">Jenis Kelamin</label>
                    <input type="radio" id="jk" name="jk" value="L"> Laki-laki
                    <input type="radio" id="jk" name="jk" value="P"> Perempuan
                </div>
                <div class="form-group">
                    <label for="tanggal">Tanggal</label>
                    <div class="input">
                        <input type="date" id="tanggal">
                    </div>
                </div>
                <div class="form-group">
                    <label for="jabatan">Jabatan</label>
                    <div class="input">
                        <select id="jabatan">
                            <option value="direktur">Direktur</option>
                            <option value="manajer">Manajer</option>
                            <option value="marketing">Marketing</option>
                            <option value="sekretaris">Sekretaris</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <input type="submit" value="Simpan" class="tombol simpan">
                    <input type="reset" value="Batal" class="tombol reset">
                </div>
            </form>
        </section>
    </div>
    <footer>
        Copyright &copy; <b>Masipnu</b> Official
    </footer>
</body>
</html>

Seperti sebelumnya, agar tampilannya terlihat lebih rapi, tambahkan kode berikut ke dalam file css/style.css

/* ================== */
/* Style Halaman Form */
/* ================== */

/* Mengatur form-group agar tidak terpengaruh float */
.form-group{
    clear: both;
}

/* Mengatur lebar label 30% dengan teks bold */
.form-group label{
    display: block;
    padding: 15px 0;
    float: left;
    width: 30%;
    font-weight: bold;
}

/* Mengatur lebar .input 50% dan sejajar dengan label */
.form-group .input{
    display: block;
    width: 50%;
    float: left;
}

/* Mengatur input radio, tombol submit dan tombol reset */
input[type=radio]{
    width: 50px;
}
.tombol.simpan{
    background: #038ade;
}
.tombol.reset{
    background: #fb8307;
}

/* Membuat tampilan form menumpuk pada layar kecil */
@media (max-width: 700px){
    .form-group label, .form-group .input{
        width: 100%
    }
}

Uji Coba

Simpan file tersebut dan coba akses via browser.