Form HTML
Tugas Pemrograman Web
Membuat Form Pendaftaran
Kali ini saya akan membahas tentang pembuatan form pendaftaran dan validasinya. Source code untuk beritanya bisa dilihat pada postingan saya sebelumnya.
Berikut source code untuk form-nya dan tampilan akhirnya :
Berikut source code untuk form-nya dan tampilan akhirnya :
1. Source Code login.html (Untuk Form Pendaftaran)
<!DOCTYPE html>
<html>
<head>
<title>LOGIN</title>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style type="text/css">
body {
background: #7A0000;
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: #7A0000;
color: #fff;
border: 0;
padding: 5px 8px;
}
</head>
</style>
<body>
<script type="text/javascript">
function validasi_input(form){
var mincar = 50;
var mincar1 = 10;
var mincar2 = 12;
pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
pola_tanggal=/^d{1,2}\/\d{1,2}\/\d{4}$/;
if (form.nama.value.length > mincar && form.nama.value.length !=0){
alert("Panjang nama maksimal 50 Karater!");
form.nama.focus();
return (false);
}
else if (form.nama.value == ""){
alert("Name masih kosong!");
form.nama.focus();
return (false);
}
else if (!pola_email.test(form.email.value)){
alert ("Penulisan Email tidak benar");
form.email.focus();
return (false);
}
else if (form.nohp.value.length < mincar1 || form.nohp.value.length > mincar2){
alert("Panjang No.handphone Minimal 10 Karater dan Maksimal 12 Karater!");
form.nohp.focus();
return (false);
}
else if (!pola_tanggal.test(form.tgllahir.value)){
alert ("Penulisan Tanggal Lahir harus sesuai format dd/mm/yyyy");
form.tgllahir.focus();
return (false);
}
return (true);
}
</script>
<div class="login">
<form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
<div>
<label>Nama: <input type="text" name="nama" id="nama" placeholder="Yuki Yanuar Ratna" /></label>
</div>
<div>
<label>Alamat:</label>
<textarea cols="40" rows="5" name="alamat" id="alamat" placeholder="Jalan Letda Suradji No.432 Bojonegoro"></textarea>
</div>
<div>
<label>Email:</label>
<input type="email" name="email" id="email" placeholder="yukiyanuar11@gmail.com" />
</div>
<div>
<label>Password:</label>
<input type="password" name="password" id="password" />
</div>
<div>
<label>No.HP:</label>
<input type="text" name="nohp" id="nohp" placeholder="08xxxxxxxxxx" />
</div>
<div>
<label>Jenis Kelamin: <select name="jeniskelamin"></label>
<option value="pilih" selected>--Pilih--</option>
<option value="lakilaki">Laki-Laki</option>
<option value="perempuan">Perempuan</option>
</select>
<div>
<label>Tanggal Lahir:</label>
<input type="text" name="tgllahir" id="tgllahir" placeholder="dd/mm/yyyy" />
</div>
<div>
<label>Rubik Yang Disukai: <select name="rubik"></label>
<option value="pilih" selected>--Pilih--</option>
<option value="opini">Opini</option>
<option value="olahraga">Olahraga</option>
<option value="ekonomi">Ekonomi</option>
<option value="politik">Politik</option>
<option value="sosial">Sosial</option>
<option value="bisnis">Bisnis</option>
<option value="kesehatan">Kesehatan</option>
<option value="pendidikan">Pendidikan</option>
<option value="teknologi">Teknologi</option>
<option value="seni">Entertain dan Seni</option>
</select>
</div>
<div>
<input type="submit" value="Daftar" class="tombol">
</div>
</form>
</div>
</body>
</html>
2. Source code login2.html (Untuk Form Masuk)
<!DOCTYPE html>
<html>
<head>
<title>LOGIN</title>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style type="text/css">
body {
background: #7A0000;
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: #7A0000;
color: #fff;
border: 0;
padding: 5px 8px;
}
</head>
</style>
<body>
<script type="text/javascript">
function validasi_input(form){
pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
pola_password="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"
if (!pola_email.test(form.email.value)){
alert ("Penulisan Email tidak benar");
form.email.focus();
return (false);
}
else if (!pola_password.test(form.password.value)){
form.password.focus();
return (false);
}
else {
return true;
}
}
</script>
<div class="login">
<form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
<div>
<label>Email:</label>
<input type="email" name="email" id="email" />
</div>
<div>
<label>Password:</label>
<input type="password" name="password" id="password" />
</div>
<div>
<input type="submit" value="Masuk" class="tombol">
</div>
</form>
</div>
</body>
</html>
3. Hasil Akhir
Sekian, semoga bermanfaat.
Komentar
Posting Komentar