Tugas 3

Buatlah sebuah form registrasi yang terdiri dari nama mahasiswa, nim, mata kuliah, dan dosen. Form registrasi ini memiliki aturan sebagai berikut. Ketika pengguna sistem akan mengisikan data nama dengan memasukkan huruf tertentu maka akan muncul rekomendasi tertentu. Gunakan referensi di internet ataupun yang lainnya untuk memecahkan kasus tersebut. 

Form 

 

Jika Form Kosong 

 

index.html

Copy 
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
    <script src = "validation.js"> </script>
</head>
 
<body>
<div class="header">
    <h1>Input Mahasiswa</h1>
</div>
    <form name = "form" onsubmit="return validateForm()">
        <label for="nama">Nama</label>
        <input type="text" id="nama" name="nama" placeholder="Nama">
        <br>
        <label for="nrp">NRP</label>
        <input type="text" id="nrp" name="nrp" placeholder="NIM">
        <br>
        <label for="jurusan" class="form-label">Pilih Jurusan</label>
        <select class="form-select" id="jurusan">
            <option value="0" selected>Jurusan</option>
            <option value="1">Fisika</option>
            <option value="2">Matematika</option>
            <option value="3">Statistika</option>
            <option value="4">Kimia</option>
            <option value="5">Biologi</option>
            <option value="6">Aktuaria</option>
            <option value="7">Teknik Perkapalan</option>
            <option value="8">Teknik Sistem Perkapalan</option>
            <option value="9">Teknik Kelautan</option>
            <option value="10">Teknik Transportasi Laut</option>
            <option value="11">Teknik Mesin</option>
            <option value="12">Teknik Kimia</option>
            <option value="13">Teknik Fisika</option>
            <option value="14">Teknik Sistem dan Industri</option>
            <option value="15">Teknik Material</option>
            <option value="16">Teknik Elektro</option>
            <option value="17">Teknik Biomedik</option>
            <option value="18">Teknik Komputer</option>
            <option value="19">Teknik Informatika</option>
            <option value="20">Sistem Informasi</option>
            <option value="21">Teknologi Informasi</option>
            <option value="22">Teknik Sipil</option>
            <option value="23">Arsitektur</option>
            <option value="24">Teknik Lingkungan</option>
            <option value="25">Perencanaan Wilayah dan Kota</option>
            <option value="26">Teknik Geomatika</option>
            <option value="27">Teknik Geofisika</option>
            <option value="28">Desain Produk Industri</option>
            <option value="29">Desain Interior</option>
            <option value="30">Desain Komunikasi Visual</option>/
            <option value="31">Manajemen Bisnis</option>
            <option value="32">Studi Pembangunan</option>
            <option value="33">Manajemen Teknologi</option>
        </select>
        <br>
        <button type="submit" class="btn btn-success">Submit</button>
    </form>
</body>
 
</html>
view raw index.html delivered with ❤ by emgithub

style.css

Copy 
 
input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
}
select{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
}
button{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
}
.header {
    padding: 20px;
    text-align: center;
    background: #1abc9c;
    color: white;
    font-size: 20px;
}
view raw style.css delivered with ❤ by emgithub

Validation.js

Copy 
function validateForm() {
 
    //validate for nama
    if (document.forms["form"]["nama"].value == "") {
        alert("Error: Nama Masih Kosong");
        document.forms["form"]["nama"].focus();
        return false;
    }
    if (document.forms["form"]["nrp"].value == "") {
        alert("Error: NRP Masih Kosong");
        document.forms["form"]["nrp"].focus();
        return false;
    }
    if (document.forms["form"]["jurusan"].selectedIndex == 0) {
        alert("Error: jurusan Masih Kosong");
        document.forms["form"]["jurusan"].focus();
        return false;
    }
 
}
view raw validation.js delivered with ❤ by emgithub

Comments

Post a Comment

Popular posts from this blog

Tugas 1

Di tugas ini diminta untuk membuat CV atau resume menggunakan HTML dan CSS. Berikut merupakan hasil dari yang saya kerjakan   Disini terdapat ketidakakurasian ketika diibuat link github yang harusnya CV tersebut terlihat seperti ini
Read more

EAS Pweb

Image
 Nama : Muhammad Zufarrifqi Prakoso NRP : 5025201276 Kelas : Pweb C a. Deskripsi Aplikasi Disini kita membuat sebuah CRUD untuk pendaftaran tes CPNS berikut merupakan fitur yang akan kami buat Membuat page untuk Regis yang bisa  upload foto dan juga ktp Membuat page untuk admin untuk verifikasi pendaftar Untuk pendaftar terdapat page yang menunjukkan status pendaftaran Terdapat fitur untuk login supaya tahu apakah yang login itu panitia atau peserta   b. UI/UX Login   Registrasi     Home   Daftar Ujian   Verifikasi Admin     c. Database D. Algoritma cara kerja aplikasi adalah sebagai berikut - Peserta harus registrasi email username dan juga password supaya bisa masuk ke page. Lalu akan dikirimkan otp ke email yang telah diregis - Status pendaftaran sebelum mendaftar akan muncul status bahwa user tersebut belum mendaftar ujian - Jika telah mengisi pendaftaran ujian maka status user akan berubah menjadi menuggu verifikasi - di page adm...
Read more