尊敬的 微信汇率:1円 ≈ 0.046166 元 支付宝汇率:1円 ≈ 0.046257元 [退出登录]
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

More from Fajar Baskoro

Pemberdayaan Kelompok Usaha Siswa dengan Tools Wirausaha AI.pdf
Pemberdayaan Kelompok Usaha Siswa dengan Tools Wirausaha AI.pdfPemberdayaan Kelompok Usaha Siswa dengan Tools Wirausaha AI.pdf
Pemberdayaan Kelompok Usaha Siswa dengan Tools Wirausaha AI.pdf
Fajar Baskoro
 
Skills for The Future - Pemberdayaan Remaja Untuk Meningkatkan Keterampilan.pptx
Skills for The Future - Pemberdayaan Remaja Untuk Meningkatkan Keterampilan.pptxSkills for The Future - Pemberdayaan Remaja Untuk Meningkatkan Keterampilan.pptx
Skills for The Future - Pemberdayaan Remaja Untuk Meningkatkan Keterampilan.pptx
Fajar Baskoro
 
Slides OOSC - Program Penanganan ATS Unicef Bappeda Jawa Timur.pptx
Slides OOSC - Program Penanganan ATS Unicef Bappeda Jawa Timur.pptxSlides OOSC - Program Penanganan ATS Unicef Bappeda Jawa Timur.pptx
Slides OOSC - Program Penanganan ATS Unicef Bappeda Jawa Timur.pptx
Fajar Baskoro
 
PPT- Menyiapkan GenerasiTerampilDigitalSkill1.pptx
PPT- Menyiapkan GenerasiTerampilDigitalSkill1.pptxPPT- Menyiapkan GenerasiTerampilDigitalSkill1.pptx
PPT- Menyiapkan GenerasiTerampilDigitalSkill1.pptx
Fajar Baskoro
 
PPT-Menyiapkan Alumni GenerasiTerampil.pptx
PPT-Menyiapkan Alumni GenerasiTerampil.pptxPPT-Menyiapkan Alumni GenerasiTerampil.pptx
PPT-Menyiapkan Alumni GenerasiTerampil.pptx
Fajar Baskoro
 
RIngkasan Program - Markoding Innovation Challenge.pptx
RIngkasan Program - Markoding Innovation Challenge.pptxRIngkasan Program - Markoding Innovation Challenge.pptx
RIngkasan Program - Markoding Innovation Challenge.pptx
Fajar Baskoro
 
Pengembangan Program Pelatihan Double Track - DT PLUSK
Pengembangan Program Pelatihan Double Track - DT PLUSKPengembangan Program Pelatihan Double Track - DT PLUSK
Pengembangan Program Pelatihan Double Track - DT PLUSK
Fajar Baskoro
 
DT-PLUSK Pengembangan SMA Double Track Tahun ke 5
DT-PLUSK Pengembangan SMA Double Track Tahun ke 5DT-PLUSK Pengembangan SMA Double Track Tahun ke 5
DT-PLUSK Pengembangan SMA Double Track Tahun ke 5
Fajar Baskoro
 
Generasi Terampil Digital Skill-2023.pptx
Generasi Terampil Digital Skill-2023.pptxGenerasi Terampil Digital Skill-2023.pptx
Generasi Terampil Digital Skill-2023.pptx
Fajar Baskoro
 
Cara Membuat Kursus Online Wordpress-tutorstarter
Cara Membuat Kursus Online Wordpress-tutorstarterCara Membuat Kursus Online Wordpress-tutorstarter
Cara Membuat Kursus Online Wordpress-tutorstarter
Fajar Baskoro
 
PPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
PPT-Kick Off Double Track 2024 melaksanakan Festival RamadhanPPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
PPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
Fajar Baskoro
 
Buku Inovasi 2023 - 2024 konsep capaian KUS
Buku Inovasi 2023 - 2024 konsep capaian  KUSBuku Inovasi 2023 - 2024 konsep capaian  KUS
Buku Inovasi 2023 - 2024 konsep capaian KUS
Fajar Baskoro
 
Pemaparan Sosialisasi Program Dual Track 2024.pptx
Pemaparan Sosialisasi Program Dual Track 2024.pptxPemaparan Sosialisasi Program Dual Track 2024.pptx
Pemaparan Sosialisasi Program Dual Track 2024.pptx
Fajar Baskoro
 
Executive Millennial Entrepreneur Award 2023-1a-1.pdf
Executive Millennial Entrepreneur Award  2023-1a-1.pdfExecutive Millennial Entrepreneur Award  2023-1a-1.pdf
Executive Millennial Entrepreneur Award 2023-1a-1.pdf
Fajar Baskoro
 
1-Executive Millennial Entrepreneur Award 2023-1-cetak.pptx
1-Executive Millennial Entrepreneur Award  2023-1-cetak.pptx1-Executive Millennial Entrepreneur Award  2023-1-cetak.pptx
1-Executive Millennial Entrepreneur Award 2023-1-cetak.pptx
Fajar Baskoro
 
Executive Millennial Entrepreneur Award 2023-1.pptx
Executive Millennial Entrepreneur Award  2023-1.pptxExecutive Millennial Entrepreneur Award  2023-1.pptx
Executive Millennial Entrepreneur Award 2023-1.pptx
Fajar Baskoro
 
Pemrograman Mobile - JetPack Compose1.pptx
Pemrograman Mobile - JetPack Compose1.pptxPemrograman Mobile - JetPack Compose1.pptx
Pemrograman Mobile - JetPack Compose1.pptx
Fajar Baskoro
 
Evaluasi KPP Program Dual Track Provinsi Kaltim
Evaluasi KPP Program Dual Track Provinsi KaltimEvaluasi KPP Program Dual Track Provinsi Kaltim
Evaluasi KPP Program Dual Track Provinsi Kaltim
Fajar Baskoro
 
foto tenda digital skill program dari sekolah
foto tenda digital skill program dari sekolahfoto tenda digital skill program dari sekolah
foto tenda digital skill program dari sekolah
Fajar Baskoro
 
Meraih Peluang di Gig Economy yang cocok bagi remaja
Meraih Peluang di Gig Economy yang cocok bagi remajaMeraih Peluang di Gig Economy yang cocok bagi remaja
Meraih Peluang di Gig Economy yang cocok bagi remaja
Fajar Baskoro
 

More from Fajar Baskoro (20)

Pemberdayaan Kelompok Usaha Siswa dengan Tools Wirausaha AI.pdf
Pemberdayaan Kelompok Usaha Siswa dengan Tools Wirausaha AI.pdfPemberdayaan Kelompok Usaha Siswa dengan Tools Wirausaha AI.pdf
Pemberdayaan Kelompok Usaha Siswa dengan Tools Wirausaha AI.pdf
 
Skills for The Future - Pemberdayaan Remaja Untuk Meningkatkan Keterampilan.pptx
Skills for The Future - Pemberdayaan Remaja Untuk Meningkatkan Keterampilan.pptxSkills for The Future - Pemberdayaan Remaja Untuk Meningkatkan Keterampilan.pptx
Skills for The Future - Pemberdayaan Remaja Untuk Meningkatkan Keterampilan.pptx
 
Slides OOSC - Program Penanganan ATS Unicef Bappeda Jawa Timur.pptx
Slides OOSC - Program Penanganan ATS Unicef Bappeda Jawa Timur.pptxSlides OOSC - Program Penanganan ATS Unicef Bappeda Jawa Timur.pptx
Slides OOSC - Program Penanganan ATS Unicef Bappeda Jawa Timur.pptx
 
PPT- Menyiapkan GenerasiTerampilDigitalSkill1.pptx
PPT- Menyiapkan GenerasiTerampilDigitalSkill1.pptxPPT- Menyiapkan GenerasiTerampilDigitalSkill1.pptx
PPT- Menyiapkan GenerasiTerampilDigitalSkill1.pptx
 
PPT-Menyiapkan Alumni GenerasiTerampil.pptx
PPT-Menyiapkan Alumni GenerasiTerampil.pptxPPT-Menyiapkan Alumni GenerasiTerampil.pptx
PPT-Menyiapkan Alumni GenerasiTerampil.pptx
 
RIngkasan Program - Markoding Innovation Challenge.pptx
RIngkasan Program - Markoding Innovation Challenge.pptxRIngkasan Program - Markoding Innovation Challenge.pptx
RIngkasan Program - Markoding Innovation Challenge.pptx
 
Pengembangan Program Pelatihan Double Track - DT PLUSK
Pengembangan Program Pelatihan Double Track - DT PLUSKPengembangan Program Pelatihan Double Track - DT PLUSK
Pengembangan Program Pelatihan Double Track - DT PLUSK
 
DT-PLUSK Pengembangan SMA Double Track Tahun ke 5
DT-PLUSK Pengembangan SMA Double Track Tahun ke 5DT-PLUSK Pengembangan SMA Double Track Tahun ke 5
DT-PLUSK Pengembangan SMA Double Track Tahun ke 5
 
Generasi Terampil Digital Skill-2023.pptx
Generasi Terampil Digital Skill-2023.pptxGenerasi Terampil Digital Skill-2023.pptx
Generasi Terampil Digital Skill-2023.pptx
 
Cara Membuat Kursus Online Wordpress-tutorstarter
Cara Membuat Kursus Online Wordpress-tutorstarterCara Membuat Kursus Online Wordpress-tutorstarter
Cara Membuat Kursus Online Wordpress-tutorstarter
 
PPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
PPT-Kick Off Double Track 2024 melaksanakan Festival RamadhanPPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
PPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
 
Buku Inovasi 2023 - 2024 konsep capaian KUS
Buku Inovasi 2023 - 2024 konsep capaian  KUSBuku Inovasi 2023 - 2024 konsep capaian  KUS
Buku Inovasi 2023 - 2024 konsep capaian KUS
 
Pemaparan Sosialisasi Program Dual Track 2024.pptx
Pemaparan Sosialisasi Program Dual Track 2024.pptxPemaparan Sosialisasi Program Dual Track 2024.pptx
Pemaparan Sosialisasi Program Dual Track 2024.pptx
 
Executive Millennial Entrepreneur Award 2023-1a-1.pdf
Executive Millennial Entrepreneur Award  2023-1a-1.pdfExecutive Millennial Entrepreneur Award  2023-1a-1.pdf
Executive Millennial Entrepreneur Award 2023-1a-1.pdf
 
1-Executive Millennial Entrepreneur Award 2023-1-cetak.pptx
1-Executive Millennial Entrepreneur Award  2023-1-cetak.pptx1-Executive Millennial Entrepreneur Award  2023-1-cetak.pptx
1-Executive Millennial Entrepreneur Award 2023-1-cetak.pptx
 
Executive Millennial Entrepreneur Award 2023-1.pptx
Executive Millennial Entrepreneur Award  2023-1.pptxExecutive Millennial Entrepreneur Award  2023-1.pptx
Executive Millennial Entrepreneur Award 2023-1.pptx
 
Pemrograman Mobile - JetPack Compose1.pptx
Pemrograman Mobile - JetPack Compose1.pptxPemrograman Mobile - JetPack Compose1.pptx
Pemrograman Mobile - JetPack Compose1.pptx
 
Evaluasi KPP Program Dual Track Provinsi Kaltim
Evaluasi KPP Program Dual Track Provinsi KaltimEvaluasi KPP Program Dual Track Provinsi Kaltim
Evaluasi KPP Program Dual Track Provinsi Kaltim
 
foto tenda digital skill program dari sekolah
foto tenda digital skill program dari sekolahfoto tenda digital skill program dari sekolah
foto tenda digital skill program dari sekolah
 
Meraih Peluang di Gig Economy yang cocok bagi remaja
Meraih Peluang di Gig Economy yang cocok bagi remajaMeraih Peluang di Gig Economy yang cocok bagi remaja
Meraih Peluang di Gig Economy yang cocok bagi remaja
 

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; }
  翻译: