Langsung ke konten utama

Belajar Web Ceria 4

Belajar membuat form pada website

halo, kisanak. kali ini aku akan berbagi cara untuk membuat form pada website. kali ini akan menggunakan html, css, dan javascript. Referensi webnya bisa kalian lihat disini. Form yang akan dibuat adalah Form Validasi Pembelajaran Tatap Muka. form akan berisi tentang nama, nrp, domisili, email, jurusan, dan status vaksin. semua kolom tidak boleh kosong dan terdapat confirm sebelum mengirim data. source codenya ada di Githubku dan berikut ini tampilan webnya atau kalian bisa coba langsung di cobaform.com



Berikut ini untuk code pada HMTL, CSS, dan Javasricpt

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validasi Vaksinasi Mahasiswa</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<header>
<img src="logo.png" alt="gambar">
</header>
<div class="formContainer" style="margin-top: 80px; margin-bottom: 80px">
<h1 style="margin-bottom: 40px;">Form Validasi Pembelajaran Tatap Muka</h1>
<div class="container">
<form id="formMahasiswa" autocomplete="off">
<div class="form-group">
<label>Nama</label>
<input type="text" name="nama" placeholder="Nama Lengkap" class="form-control" minlength="3" maxlength="40">
</div>
<div class="form-group">
<label>NRP</label>
<input type="text" name="nrp" placeholder="NRP" class="form-control" minlength="10" maxlength="16">
</div>
<div class="form-group">
<label>Domisili</label>
<input type="text" name="domisili" placeholder="Domisili Saat Ini" class="form-control" minlength="1">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" placeholder="Email Aktif" class="form-control">
</div>
<div class="form-group">
<label>Jurusan</label>
<select name="jurusan" class="form-control">
<option value="0">Pilih Jurusan Mahasiswa</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>
</div>
<div class="form-group">
<label>Status Vaksinasi</label><br>
<input type="radio" name="vaksin" value="1"> Belum Vaksin<br>
<input type="radio" name="vaksin" value="2"> Dosis-1<br>
<input type="radio" name="vaksin" value="3"> Dosis-2<br>
</div>
<button type="button" class="btn btn-primary" onclick="submitForm()" style="margin-top: 20px;">Submit</button>
</form>
</div>
</div>
<footer>
<h6>&copy Thomas Dwi Awaka 2021.</h6>
</footer>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

style.css

body {
background-color:#b3b3b3;
font-family: sans-serif;
}
h2 {
color: #334d00;
}
.login {
padding: 5em;
margin: 2em auto;
width: 30em;
height: 25em;
background: #fff;
border-radius: 30px;
}
label {
font-size: 10pt;
color: #555;
}
input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
input[type="radio"] {
font-size: 10pt;
color: #555;
}
.tombol{
padding-top: 10px;
}
.formContainer {
margin-right: auto;
margin-left: auto;
width: 1000px;
background-color: #f2f5f5;
border-radius: 20px;
height: auto;
padding: 70px;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
h1 {
text-align: center;
font-family: Arial;
font-weight: bolder;
color: #013880;
}
header {
background-color: #013880;
}
header img {
margin-bottom: 20px;
margin-top: 20px;
margin-left: 60px;
}
footer {
background-color: #013880;
margin-top: auto;
display: flex;
flex-direction: column;
}
footer h6 {
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
color: whitesmoke;
font-family: Georgia;
font-weight: bold;
}
.btn-primary {
font-weight: 400;
color: whitesmoke;
background-color: #013880;
border-color: #013880;
}
.btn-primary:hover {
color: whitesmoke;
background-color: #f39c12;
border-color: #f39c12;
}
label {
font-weight: bolder;
}
.form-group {
margin: 5px 0px 15px 0px;
}
#prevLink {
text-align: center;
font-family: Arial;
font-weight: 400;
color: #013880;
}
view raw gistfile1.txt hosted with ❤ by GitHub

main.js

function submitForm(){
if (validateForm()) {
if(confirm("Apakah anda sudah yakin?")){
window.location.href = "https://my.its.ac.id/";
}
}
}
function validateForm() {
if (document.forms["formMahasiswa"]["nama"].value == "") {
alert("Nama Tidak Boleh Kosong");
document.forms["formMahasiswa"]["nama"].focus();
return false;
}
if (document.forms["formMahasiswa"]["nrp"].value == "") {
alert("NRP Tidak Boleh Kosong");
document.forms["formMahasiswa"]["nrp"].focus();
return false;
}
else if (isNaN(document.forms["formMahasiswa"]["nrp"].value)) {
alert("NRP Harus Berupa Angka");
document.forms["formMahasiswa"]["nrp"].focus();
return false;
}
if (document.forms["formMahasiswa"]["domisili"].value == "") {
alert("Domisili Tidak Boleh Kosong");
document.forms["formMahasiswa"]["domisili"].focus();
return false;
}
if (document.forms["formMahasiswa"]["email"].value == "") {
alert("Email Tidak Boleh Kosong");
document.forms["formMahasiswa"]["email"].focus();
return false;
}
if(document.forms["formMahasiswa"]["email"].value.indexOf("@") == -1){
alert("Pastikan format email yang dimasukkan sudah benar.");
document.forms["formMahasiswa"]["email"].focus();
return false;
}
if(document.forms["formMahasiswa"]["email"].value.indexOf(".") == -1){
alert("Pastikan format email yang dimasukkan sudah benar.");
document.forms["formMahasiswa"]["email"].focus();
return false;
}
if (document.forms["formMahasiswa"]["jurusan"].selectedIndex < 1) {
alert("Anda Belum Memilih Jurusan.");
document.forms["formMahasiswa"]["jurusan"].focus();
return false;
}
if (document.forms["formMahasiswa"]["vaksin"].value < 1) {
alert("Anda Belum Memilih Status Vaksinasi.");
document.forms["formMahasiswa"]["vaksin"].focus();
return false;
}
return true;
}
view raw gistfile1.txt hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Java Ceria 5

Game The world-of-zuul      Halo kisnak, kali ini aku akan membuat sebuah project kecil yang dibuat berdasarkan buku Object First With Java. Game ini sebenarnya bertipe adventure, tapi ya biasa aja dan membosankan. Akan tetapi, ini bisa menjadi implementasi untuk Designing Classes. Terdapat 5 kelas pada project ini, yaitu: ■ CommandWords - Kelas CommandWords mendefinisikan semua Command yang valid dalam permainan (go, help, quit). Ini dilakukan dengan menyimpan array objek String yang mewakili kata-kata perintah. ■ Parser  - Parser membaca baris input dari terminal dan mencoba menafsirkannya sebagai Command. Ini membuat objek dari Class Command yang mewakili perintah itu masuk. ■ Command  - Sebuah objek perintah mewakili perintah yang dimasukkan oleh pengguna. Ini memiliki metode yang memudahkan kita untuk memeriksa apakah ini adalah perintah yang valid dan untuk mendapatkan kata pertama dan kedua dari perintah tersebut sebagai string terpisah. ■ Room - Objek ...
Posting Komentar
Read more »

Belajar Java Ceria 4

Technical Support System Sederhana     Sebuah Technical Support System yang sesungguhnya pasti memakai bot didalamnya, dan itu perlu ilmu yang lebih tinggi karena merupakan salah satu contoh aplikasi kognitif dan penerapan AI. Tapi kali ini aku akan buat yang versi sederhana saja berdasarkan buku Objects First With Java bab 5 bagian 5.2. Jadi dibuku sudah dibuat program dasarnya,  yang betul-betul simpel banget dan biasa aja. Nah disini aku sedikit modifikasi agar sistem ini terlihat lebih "hidup". Jadi berikut ini Class dari programnya, dan sudah kubuat dokumentasi singkat didalamnya InputReader Responder supportSystem mainSupportSystem Ini akan jadi main program yang akan menjalankan seluruh Class di atas Dan berikut ini salah satu output yang dapat diberikan Kalian bisa kok menggunakan kode diatas dan membuat variasi yang lebih menarik dari ini. Mantap, Rispek!!✌
Posting Komentar
Read more »

Belajar Java Ceria 3

 Grouping Object      Kali ini aku akan mencoba implementasi sederhana tentang grouping object dengan Collection serta membuat Sistem lelang sangat sederhana  Java Collection Java Collection secara sederhana merupakan sebuah objek. Collectionadalah framework yang menyediakan tempat untuk menyimpan dan memanipulasi sekumpulan objek. framework ini dapat melakukan pencarian, pengurutan, memasukan data dan menghapus. Collection menyediakan berbagai interface seperti Set, List, Queue, Dequeue dan untuk class-nya antara lain, ArrayList, Vector, Linked List, dll.  ArrayList Contoh ArrayList ini memakai iterasi while Contoh ArrayList dengan For-Each Loop ini memakai iterasi for Contoh ArrayList dan Class Data Disini perlu dibuat dulu Class Mahasiswa, bisa seperti ini Dan Seperti ini Class dari ArrayListnya Contoh Memakai addAll di ArrayList Contoh Memakai RemoveAll di ArrayList Contoh Memakai RetainAll di ArrayList Demikian berbagai contoh pengunaan Arraylist. Lal...
3 komentar
Read more »