SlideShare a Scribd company logo
Daftar.php
==========
<!DOCTYPE html>
<html>
<head>
<title>Membuat Form Validasi dengan Javascript -</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center><h2>Latihan Javascript</h2></center>
<div class="login">
<form action="#" method="POST" onSubmit="validasi()">
<div>
<label>Nama Lengkap:</label>
<input type="text" name="nama" id="nama" />
</div>
<div>
<label>Email:</label>
<input type="email" name="email" id="email" />
</div>
<div>
<label>Alamat:</label>
<textarea cols="40" rows="5" name="alamat"
id="alamat"></textarea>
</div>
<div>
<input type="submit" value="Daftar" class="tombol">
</div>
</form>
</div>
</body>
<script type="text/javascript">
function validasi() {
var nama = document.getElementById("nama").value;
var email = document.getElementById("email").value;
var alamat = document.getElementById("alamat").value;
if (nama != "" && email!="" && alamat !="") {
return true;
}else{
alert('Anda harus mengisi data dengan lengkap !');
}
}
</script>
</html>
Style.css
===============
body {
background: #3498db;
font-family: sans-serif;
}
h2 {
color: #fff;
}
.login {
padding: 1em;
margin: 2em auto;
width: 17em;
background: #fff;
border-radius: 3px;
}
label {
font-size: 10pt;
color: #555;
}
input[type="text"],
input[type="email"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
.tombol {
background: #3498db;
color: #fff;
border: 0;
padding: 5px 8px;
}

More Related Content

DOCX
PPTX
Concevoir un thème pour Wordpress
PDF
PPT
Jquerymobile ppt
TXT
Teks registrasi
TXT
Hello.html adeq........
TXT
Amp html blogger templates
PPTX
Pengembangan Basis Data untuk Web Application.pptx
Concevoir un thème pour Wordpress
Jquerymobile ppt
Teks registrasi
Hello.html adeq........
Amp html blogger templates
Pengembangan Basis Data untuk Web Application.pptx

More from Fajar Baskoro (20)

PPTX
Presentasi untuk video Pitch Deck Vlog Pervekt SMK 2025.pptx
PPTX
Sosialisasi Program Digital Skills Unicef 2025.pptx
PDF
DIGITAL SKILLS PROGRAMME 2025 - VERSI HZ.pdf
PDF
Digital Skills - 2025 - Dinas - Green Marketplace.pdf
PDF
Pemrograman Mobile menggunakan kotlin2.pdf
PPTX
Membangun Kewirausahan Sosial Program Double Track.pptx
PPTX
Membangun Kemandirian DTMandiri-2025.pptx
PDF
Panduan Entry Nilai Rapor untuk Operator SD_MI 2025.pptx (1).pdf
PDF
JADWAL SISTEM PENERIMAAN MURID BARU 2025.pdf
PPTX
Seleksi Penerimaan Murid Baru 2025.pptx
PPTX
Pengembangan Program Dual Track 2025-2.pptx
PPTX
Pengembangan Program Dual Track 2025-1.pptx
PDF
PETUNJUK PELAKSANAAN TEKNIS FESV RAMADHAN 2025.pdf
PPTX
Pengembangan Entrepreneur Vokasi Melalui PERFECT SMK-Society 50 .pptx
PPTX
PERFECT SMK 6 - Strategi Pelaksanaan.pptx
PPTX
Program Dual Track Kalimantan Timur 2025.pptx
PDF
Contoh Proposal konveksi untuk Program Magang Kewirausahaan.pdf
PPTX
Pengembangan Program Digital Skills - 2025.pptx
PPTX
PPT-Proyek Magang Kewirausahaan Double Track.pptx
PPTX
PPT-Pembinaan Karir Alumni DT melalui DTPLUSK.pptx
Presentasi untuk video Pitch Deck Vlog Pervekt SMK 2025.pptx
Sosialisasi Program Digital Skills Unicef 2025.pptx
DIGITAL SKILLS PROGRAMME 2025 - VERSI HZ.pdf
Digital Skills - 2025 - Dinas - Green Marketplace.pdf
Pemrograman Mobile menggunakan kotlin2.pdf
Membangun Kewirausahan Sosial Program Double Track.pptx
Membangun Kemandirian DTMandiri-2025.pptx
Panduan Entry Nilai Rapor untuk Operator SD_MI 2025.pptx (1).pdf
JADWAL SISTEM PENERIMAAN MURID BARU 2025.pdf
Seleksi Penerimaan Murid Baru 2025.pptx
Pengembangan Program Dual Track 2025-2.pptx
Pengembangan Program Dual Track 2025-1.pptx
PETUNJUK PELAKSANAAN TEKNIS FESV RAMADHAN 2025.pdf
Pengembangan Entrepreneur Vokasi Melalui PERFECT SMK-Society 50 .pptx
PERFECT SMK 6 - Strategi Pelaksanaan.pptx
Program Dual Track Kalimantan Timur 2025.pptx
Contoh Proposal konveksi untuk Program Magang Kewirausahaan.pdf
Pengembangan Program Digital Skills - 2025.pptx
PPT-Proyek Magang Kewirausahaan Double Track.pptx
PPT-Pembinaan Karir Alumni DT melalui DTPLUSK.pptx
Ad

Latihanjavascript

  • 1. Daftar.php ========== <!DOCTYPE html> <html> <head> <title>Membuat Form Validasi dengan Javascript -</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <center><h2>Latihan Javascript</h2></center> <div class="login"> <form action="#" method="POST" onSubmit="validasi()"> <div> <label>Nama Lengkap:</label> <input type="text" name="nama" id="nama" /> </div> <div> <label>Email:</label> <input type="email" name="email" id="email" /> </div> <div> <label>Alamat:</label> <textarea cols="40" rows="5" name="alamat" id="alamat"></textarea> </div> <div> <input type="submit" value="Daftar" class="tombol"> </div> </form> </div> </body> <script type="text/javascript"> function validasi() { var nama = document.getElementById("nama").value; var email = document.getElementById("email").value; var alamat = document.getElementById("alamat").value; if (nama != "" && email!="" && alamat !="") { return true; }else{ alert('Anda harus mengisi data dengan lengkap !'); } } </script> </html>
  • 2. Style.css =============== body { background: #3498db; font-family: sans-serif; } h2 { color: #fff; } .login { padding: 1em; margin: 2em auto; width: 17em; background: #fff; border-radius: 3px; } label { font-size: 10pt; color: #555; } input[type="text"], input[type="email"], textarea { padding: 8px; width: 95%; background: #efefef; border: 0; font-size: 10pt; margin: 6px 0px; } .tombol { background: #3498db; color: #fff; border: 0; padding: 5px 8px; }