Membuat Form Registrasi

 Membuat Form Registrasi

Identitas Diri

Nama: Muhammad Rifqi Ma'ruf
NRP: 5025221060
Kelas: Pemrograman Web A
Tahun: 2023

Deskripsi Tugas


Source Code

*HTML*

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Registrasi Mahasiswa</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <form id="registrationForm">
      <label for="nama">Nama Mahasiswa<span class="required">*</span>:</label>
      <input
        type="text"
        id="nama"
        name="nama"
        oninput="suggestCourse()"
        required
        placeholder="Masukkan nama"
      />

      <label for="nim">NIM<span class="required">*</span>:</label>
      <input
        type="text"
        id="nim"
        name="nim"
        required
        placeholder="Masukkan NIM"
      />

      <label for="mataKuliah"
        >Mata Kuliah<span class="required">*</span>:</label
      >
      <input
        type="text"
        id="mataKuliah"
        name="mataKuliah"
        required
        placeholder="Masukkan mata kuliah"
      />

      <label for="dosen">Dosen<span class="required">*</span>:</label>
      <input
        type="text"
        id="dosen"
        name="dosen"
        required
        placeholder="Masukkan nama dosen"
      />

      <button type="submit">Submit</button>
    </form>

    <div id="suggestions"></div>

    <script src="script.js"></script>
  </body>
</html>

*CSS*

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

form {
  max-width: 1000px;
  margin: auto;
  text-align: left;
}

label,
input {
  display: block;
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
}

#suggestions {
  margin-top: 20px;
}



*JS*
function suggestCourse() {
  const input = document.getElementById("nama").value.toLowerCase();
  const suggestionsDiv = document.getElementById("suggestions");
  suggestionsDiv.innerHTML = "";

  if (input.includes("john")) {
    suggestionsDiv.innerHTML = "Rekomendasi: Matematika Dasar";
  } else if (input.includes("jane")) {
    suggestionsDiv.innerHTML = "Rekomendasi: Bahasa Inggris";
  }
}

document
  .getElementById("registrationForm")
  .addEventListener("submit", function (event) {
    event.preventDefault();

    const nama = document.getElementById("nama").value;
    const nim = document.getElementById("nim").value;
    const mataKuliah = document.getElementById("mataKuliah").value;
    const dosen = document.getElementById("dosen").value;

    if (nama === "" || nim === "" || mataKuliah === "" || dosen === "") {
      alert("Mohon isi semua form.");
      return;
    }


  });




Hasil




Komentar

Posting Komentar

Postingan populer dari blog ini

KUIS 2 PWEB A

Gambar
 KUIS 2 PWEB A #Identitas Diri Nama: Muhammad Rifqi Ma'ruf NRP: 5025221060 Kelas: Pemrograman Web A Tahun: 2023 #Deskripsi Tugas Tuliskan spesifikasi kebutuhan perangkat lunak dan struktur menu yang cocok untuk aplikasi yang akan dibuat (individu - jam kuliah) Buatlah desain database dan struktur tabel yang akan menampung data yang dikelola (individu  - jam kuliah) Desan Frond End dan page yang akan dibuat untuk aplikasi (individu - jam kuliah) Sebutkan daftar action untuk backend yang akan dibutuhkan. Jelaskan digunakan apa saja (individu - jam kuliah) Implementasikan dan buat domumentasinya. Presentasikan jawabanmu ke dalam bentuk video dan embedded ke blog jawaban. (Boleh kelompok maks3 - paling lambat 12 Des 2023 Jam 08:00) #Jawaban #1.  Spesifikasi Kebutuhan Perangkat Lunak Manajemen Siswa Manajemen Siswa Pendaftaran siswa baru dan pembaruan informasi Penyimpanan data siswa termasuk nama, usia, alamat, data kontak, dan riwayat belajar Manajemen Jadwal Bimbi...
Baca selengkapnya

Belajar Membuat CV Pribadi Menggunakan HTML

Gambar
Tugas 1 CV Pribadi (HTML) Identitas Diri Nama: Muhammad Rifqi Ma'ruf NRP: 5025221060 Kelas: Pemrograman Web A Tahun: 2023 Deskripsi Tugas Tugas pertama adalah membuat Curriculum Vitae (CV) pribadi dalam format HTML. Di dalamnya terdapat identitas diri, deskripsi tugas, mindset belajar, alat dan software yang dikuasai, serta kemampuan-kemampuan. Semua informasi ini diatur dengan markup HTML untuk menciptakan halaman web yang terstruktur dan informatif. Source Code <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > Curriculum Vitae </ title >   </ head >   < body >     < h1 > Curriculum Vitae </ h1 >     < h2 > Personal Information </ h2 >     < ul >       < li > Nama: Muhammad Ri...
Baca selengkapnya

Belajar membuat CV pribadi mengunakan HTML dan CSS

Gambar
  Tugas 2 CV Pribadi (CSS) Identitas Diri Nama: Muhammad Rifqi Ma'ruf NRP: 5025221060 Kelas: Pemrograman Web A Tahun: 2023 Deskripsi Tugas Saya telah membuat sebuah Curriculum Vitae (CV) pribadi menggunakan HTML dan CSS. CV ini mencakup identitas diri, profil pribadi, mindset, alat atau tool-sets yang saya kuasai, dan keterampilan atau skill-sets yang saya miliki. CV ini dirancang untuk memperlihatkan informasi penting tentang diri saya kepada orang lain, termasuk nama, NRP, kelas, dan deskripsi mengenai diri saya, minat, keahlian, serta pengalaman. Dengan ini, saya berharap CV ini dapat memberikan gambaran yang jelas tentang siapa saya dan apa yang saya tawarkan. Source Code: <! DOCTYPE html > < html lang = "id" >   < head >     < meta charset = "UTF-8" />     < meta       name = "viewport"       content = "width=device-width, initial-scale=1.0"     />     < title > C...
Baca selengkapnya