VALIDASI FORM HTML

LAPORAN PRAKTIKUM
PEMOGRAMAN WEB
MODUL 3
VALIDASI HTML
Disusun oleh :
ADITYA NUGRAHA 3411191124
KELAS C
PROGRAM STUDI INFORMATIKA

FAKULTAS SAINS DAN INFORMATIKA
UNIVERSITAS JENDERAL ACHMAD YANI
2023
Daftar isi
Daftar isi
BAB I Materi Praktikum ......................................................................................................................... 4
Tujuan: ................................................................................................................................................ 4
Dasar Teori.......................................................................................................................................... 4
BAB II Hasil Praktikum .......................................................................................................................... 5
Latihan 1 ............................................................................................................................................. 5
Latihan 2 ............................................................................................................................................. 6
Latihan 3 ............................................................................................................................................. 8
BAB III KESIMPULAN ....................................................................................................................... 10
Daftar Gambar
1Gambar 1 .............................................................................................................................................. 6
2Gambar 2 .............................................................................................................................................. 7
3 Gambar 3.............................................................................................................................................. 9
BAB I Materi Praktikum
Tujuan:
1. Mahasiswa mengetahui dasar-dasar HTML 5

2. Mahasiswa mampu mengetahui tag-tag HTML 5 untuk validasi from
3. Mahasiswa mampu membuat validasi from dengan HTML 5
Dasar Teori
HTML5 dikembangkan oleh W3C (world wide web consortium) dan WHATWG
(web hypertext application tecknologi working group) sejak tahun 2009 setelah W3C
mengakhiri kelompok kerja pengembangan xHTML 2.0.
HTML5 merupakan bahasa markah yang digunakan untuk menstrukturkan dan
menampilkan isi dari world wide web yang merupakan sebuah teknologi inti dari
internet. HTML5 merupakan revisi ke-5 dari HTML dan hingga bulan juni 2011 masih
dalam pengembangan. HTML5 merupakan salah satu karya W3C untuk mendefinisikan
sebuah bahasa markah tunggal yang dapat di tulis dengan cara HTML ataupun xHTML.
HTML5
merupakan jawaban atas pengebangan HTML 4.10 dan xHTML 1.1 yang selama ini
berjalanterpisah dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak
web.
Meski HTML5 dikenal luas oleh para pengembang web sejak lama, namun HTML5
mulaipopuler pada april 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa
dengan pengembangan HTML5, “Adobe Flash sudah tidak dibutuhkan lagi untuk
menyaksikan video atau menyaksikan konten apapun di web.
Tujuan utama dari pengembangan HTML5 adalah untuk memperbaiki teknologi
HTML agar mendukung teknologi multimedia terbaru, mudah dibaca, dan mudah dimengerti
oleh engine. Selain itu tujuan dari HTML5, antara lain:
 Fitur baru didasarkan pada HTML, JavaScript, DOM, dan CSS.
 Mengurangi kebutuhan untuk plugin eksternal (seperti flash)
 Penangan kessalahan yang lebih baik.
BAB II Hasil Praktikum
Latihan 1
 Source code
<head>
<meta charset="UTF-8">
<title>Formulir Pendaftaran</title>
</head>
<body><center>
<i class="fas fa-laugh-wink"></i><table>

<form method="POST" action=""></form>
<tbody><tr>
<td>Nama Lengkap</td>
<td><input type="text" name="nama" placeholder="Nama
Lengkap" pattern="" required=""></td>
</tr>
<tr>
<td>Username</td>
<td><input type="text" name="user" placeholder="Username"
required=""></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" placeholder="Masukan
Email" required=""></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"
placeholder="Masukan Password" minlength="4" maxlength="12"
required=""></td>
</tr>
<tr>
<td>Telpon</td>
<td><input type="number" name="no_telpon"
placeholder="Masukan No. Telpon" minlength="12"
maxlength="13" pattern="[0-9]" required="">
</td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td><input type="date" name="tanggal_lahir"
required=""></td>
</tr>
<tr>
<td colspan="1"><input type="submit" value="Buat Akun
Saya">
</td></tr>
</tbody></table>
</center>
 Gambar
1Gambar 1
Latihan 2
Source code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Tugas ke 2</title>
</head>
<body>
<h2 style="margin-bottom:0px;">Studi kasus : validasu input
HTML</h2>
<h5 style="margin-bottom:0px;">Merubah komentar Validasu</h5>
<table>
<form>
<tr>
<td width="100">Your Name</td>
</tr>
<tr>
<td width="300"><input type="text"
pattern="[A-Za-z ]+" size="30" name="nama" placeholder="Masukan Nama
Anda" maxlength="15" required oninvalid="this.setCustomValidity('data
tidak boleh kosong dan tidak boleh di input selain huruf dan
spaso')"oninput="setCustomValidity('')"></td>
</tr>
<tr>
<td>Your Email</td>
</tr>
<tr>
<td><input type="email" size="30"
name="email" placeholder="Nama@host.com" required
oninvalid="this.setCustomValidity('data tidak boleh kosong dan format
email harus sesuai ')" oninput=""setCustomValidity('')></td>
</tr>
<tr>
<td>Department</td>
</tr>
<tr>
<td colspan="3"><select
name="dropdown" style="width:243px;">
<option value="">Select
Department</option>
<option value="Jawa
Barat">Kemensos</option>
<option
value="Sumatra">Kemendikbud</option>
<option></option>
<option
value="Kalimantan">Kemenpora</option>
</select></td>
</tr>
<tr>
<td><input type="submit"
value="submit"></td>
</tr>
</form>
</table>
</body>
</html>
 Gambar
2Gambar 2
Latihan 3
 Souce code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>tugas 3</title>
<style type="text/css">
.labelfrm{
display: block;
font-size: small;
margin-top: 5px;
}
.error {
font-size: small;
color: red;
}
</style>
<script type="text/javascript"
src="jquery/jquery.min.js"></script>
<script type="text/javascript"
src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#frm-mhs').validate({
rules:{
nim : {
digits: true,
minlength:10,
maxlength:10
},
},
messages: {
nim: {
requared: "kolom nim
harus di isi",
minlength: "kolom nim
harus terdiri dari 10 digit",
maxlength: "kolom nim
harus terdiri dari 10 digit"
},
nama: {
requared: "Kolom nama
harus di isi",
},
}
});
});
</script>
</head>
<body>
<h1 style="margin-bottom: 0px;">input Data
Mahasiswa</h1>
<h4 style="margin-top: 0px;">Validasi langsung tampa
tekan submit</h4>
<form method="post" id="frm-mhs">
<label for="nim"
class="labelfrm">NIM</label><input type="text" name="nim"
id="nim" maxlength="10" class="required" size="15"/>
<td><label for="nama"
class="labelfrm">NAMA:</label><input type=" text"
name="nama" id="nama" size="30" class="required"/>
</form>
</body>
</html>
 Gambar
3 Gambar 3
BAB III KESIMPULAN
Pada praktikum kali ini membahasa mengenai :
1. Cara membuat form dengan tag <form> kita dapat membuat sebuah kolom yang bersifat text,radio
button, dropdown, submit, dll
2. Cara menyisipkan sebuah komentar (placeholder) kedalam kolom
3. Membuat form agar tertata rapih menggunakan tag <table>
4. Membuat validasi form wajid diisi menggunakan atribut required
5. Membuat validasi dengan ketentuan hanya Huruf dan angka menggunakan pattern
6. Membuat validasi dengan ketentuan hanya angka dan hanya dapat memasukkan angka antara17-30
7. Membatasu jumlah karakter yang kita inputkan menggunakan maxlength dan minimal yangharus
diinputkan menggunakan minlength
8. Mengubah komentar pada validasi form menggunakan oninvalid
9. Membuat validasi pengecekan secara langsung tanpa perlu mengklik submit terlebih dahulu

VALIDASI FORM HTML

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

VALIDASI FORM HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM

ADITYA NUGRAHA 3411191124

PROGRAM STUDI INFORMATIKA

1. Mahasiswa mengetahui dasar-dasar HTML 5

<i class="fas fa-laugh-wink"></i><table>

Pada praktikum kali ini membahasa mengenai :

2. Cara menyisipkan sebuah komentar (placeholder) kedalam kolom

3. Membuat form agar tertata rapih menggunakan tag <table>

4. Membuat validasi form wajid diisi menggunakan atribut required

8. Mengubah komentar pada validasi form menggunakan oninvalid

Anda mungkin juga menyukai