Scribd
Upload
30 views

Web Javascript

The document contains HTML code for a form that collects user information including name, username, password, email, profile photo, and access level. The form includes validation for the password, file type and size of the uploaded photo.

Uploaded by

Muhammad Raihan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views

Web Javascript

The document contains HTML code for a form that collects user information including name, username, password, email, profile photo, and access level. The form includes validation for the password, file type and size of the uploaded photo.

Uploaded by

Muhammad Raihan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javacript Form Input</title>
<style type="text/css">
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#bungkus {

input[type=text], input[type=password], input[type=email],


input[type=file]{
width: 200px;
height: 25px;
padding-left: 10px;
border-radius: 3px;
border: 2px solid #ccc;
margin-bottom: 10px;
}

select {
width: 215px;
height: 30px;
padding-left: 10px;
border-radius: 3px;
border: 2px solid #ccc;
margin-bottom: 10px;
}

input[type=submit], input[type=reset] {
width: 100px;
margin: 0 auto;
}

#forminputuser {
width: 250px;
margin: 0 auto;
}

#preview {
width: 150px;
height: 120px;
border-radius: 5%;
object-fit: cover;
background: #dfdfdf;
}

.tombol{
width: 100px;
border: 1px solid grey;
border-radius: 10px;
color: white;
}

.kirim{
background-image: linear-gradient(rgb(121, 243, 121), rgb(16, 81,
16));
}

.batal {
background-image: linear-gradient(rgb(225, 138, 138), rgb(214, 16,
16));
}

.batal:active {
background-image: linear-gradient(rgb(60, 17, 17),rgb(239, 122,
122));
}

.kirim:active{
background-image: linear-gradient(rgb(20, 35, 20), rgb(187, 241,
187));
}

</style>

<script>
function cekpass(){
var pass1 = document.getElementById("m_password").value;
var pass2 = document.getElementById("confirm_pass").value;
if (pass1.length < 8 && pass1 != pass2) {
document.getElementById("msg_confirm").style="color:#ff0000";
document.getElementById("msg_confirm").innerHTML="Password length
must be 8 character or more.";
document.getElementById("m_password").focus();
return false;
} else if (pass1 >= 8 && pass2.length <= 0) {
document.getElementById("msg_confirm").style="color:#00ff00";
document.getElementById("msg_confirm").innerHTML="Password is
Good!";
} else if (pass1 >= 8 && pass1 != pass2) {
document.getElementById("msg_confirm").style="color:#ff0000";
document.getElementById("msg_confirm").innerHTML="Confirm Password
and Password not same !. Please try again.";
return false;
} else if (pass1 >= 8 && pass1 == pass2) {
document.getElementById("msg_confirm").style="color:#00ff00";
document.getElementById("msg_confirm").innerHTML="Password Match";
}
return true;
}

function cekfile(){
var output = document.getElementById('preview');
var filein = document.getElementById("photo");
var info = filein.files[0];
var size = info.size;
var pathFile= filein.value;
var ekstensiOK = /(\.jpg|\.jpeg|\.png|\.gif)$/i;

if (!ekstensiOK.exec(pathFile)){
document.getElementById("msg_file").style="color:#ff0000";
document.getElementById("msg_file").innerHTML = "Silahkan upload
file yang memiliki ekstensi .jpeg/.jpg/.png/.gif";
output.src = "images.png";
filein.value = "";
return false;
} else if (ekstensiOK.exec(pathFile) && size > 2097152) {
document.getElementById("msg_file").style="color:#ff0000";
document.getElementById("msg_file").innerHTML="Maximum file size :
2Mb, Size file now : " + (size/1048576).toFixed(2) + "Mb.";
document.getElementById("msg_file").focus;
output.src = "images.png";
return false;
} else if(ekstensiOK.exec(pathFile) && size <= 1048576) {
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function(){
URL.revokeObjectURL(output.src)
}

document.getElementById("msg_file").style="color:#00ff00";
document.getElementById("msg_file").innerHTML="File size accept : "
+ (size/1048576).toFixed(2) + "Mb.";
return true;
}
if (size > 1097152) {
document.getElementById("msg_file").style="color:#ff0000";
document.getElementById("msg_file").innerHTML = "maximum FileSize :
2MB. Size file now : " + (size/1048576) + "MB.";
document.getElementById("msg_file").focus;
} else {
document.getElementById("msg_file").style="color:#00ff00";
document.getElementById("msg_file").innerHTML = "File Size Accept :
" + (size/1048576).toFixed(2) + "MB.";
}
return true;
}

function del(){
document.getElementById("msg_file").innerHTML = "";
document.getElementById("msg_confirm").innerHTML = "";
document.getElementById("preview").src = "images.png";
}
</script>
</head>
<body>

<center>
<div id="bungkus">
<form id="forminputuser" name="forminputuser" action="#" method="post"
target="_self" enctype="multipart/form-data">
<b>FORM USER</b>
<hr width="215px"><br>

<label for="nama">Full Name : </label><br>


<input type="text" id="nama" placeholder="masukan nama"
required><br>

<label for="m_username">You Username : </label><br>


<input type="text" id="m_username" placeholder="masukan username"
required><br>

<label for="m_password">You Password Access : </label><br>


<input type="password" id="m_password" placeholder="masukan
password" required onblur="cekpass();"><br>

<label for="confirm_pass">Confirm Password : </label><br>


<input type="password" id="confirm_pass" placeholder="masukan ulang
password" required onblur="cekpass();" onfocus="cekpass();"><br>

<div id="msg_confirm"></div><br>

<label for="email">You E-mail : </label><br>


<input type="email" id="email" required onfocus="cekpass();"><br>

<label for="level">Level Access Web : </label><br>


<select id="level">
<option disabled>Pilih salah satu level</option>
<option value="admin">Admin</option>
<option value="user">User</option>
<option value="member">Member</option>

</select><br>
<label>Select You Photo Profile : </label><br>
<img id="preview" src="../foto/images.png"><br>
<input type="file" id="photo" onblur="cekfile();"
onchange="cekfile();"><br>
<div id="msg_file"></div>

<input type="submit" class="tombol kirim" id="submit" value="Simpan


data">
<input type="reset"class="tombol batal" id="reset" value="batalkan"
onclick="del();">
</form>
</div>
</center>

</body>
</html>

You might also like