Tugas 5 - JQuery

pada tanggal
Nama: Aaliyah Farah Adibah 
NRP: 5025201070 

Pada pertemuan kali ini, membahas mengenai JQuery. Berikut hasil dokumentasi pada web yang saya buat:








Berikut source code-nya:
Pada head dipanggil bootstrap, jquery, dan font yang akan digunakan
<head>
    <title>
        FORM
    </title>
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Inter:300,300i,400,400i,600,600i,700,700i|Berkshire+Swash|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
</head>

Pada body dibuat isian form yang akan digunakan serta menambahkan background juga
<body class="pic-bg">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <form class="col-12" id="validateForm" method="get" action="">
                <fieldset>
                  <legend>Validation Form With JQuery</legend>
                  </br>
                  <div class="form-group">
                    <label for="cname">Nama *</label>
                    <input class="form-control" id="cname" name="name" minlength="5" type="text" required>
                  </div>
                  <div class="form-group">
                    <label for="cnrp">NRP *</label>
                    <input class="form-control" id="cnrp" type="text" name="nrp" required>
                  </div>
                  <div class="form-group">
                    <label for="calamat">Alamat *</label>
                    <textarea class="form-control" id="calamat" name="alamat" required></textarea>
                  </div>
                  <div class="form-group">
                    <label for="cttl">Tanggal Lahir *</label>
                    <input class="form-control" id="cttl" type="date" name="ttl" required>
                  </div>
                  <div class="form-group">
                    <label for="cemail">Email *</label>
                    <input class="form-control" id="cemail" type="email" name="email" required>
                  </div>
                  <div class="form-group">
                    <label for="curl">URL (optional)</label>
                    <input class="form-control" id="curl" type="url" name="url">
                  </div>
                  <input class="btn btn-success btn-block" type="submit" value="Submit">
                </fieldset>
              </form>
            <script>
            $("#validateForm").validate();
            </script>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

Repo: https://aaliyahfarah.github.io/pweb-jquery/

Komentar

Posting Komentar