"Signup Form"
Bootstrap 4.1.1 Snippet by hypocket

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div id="titile">
<h4><strong>SIGN up HERE</strong></h4>
</div>
<div id="form-container" action="#" method="post" onsubmit="return validation();">
<form>
<div>
<input type="text" id="firstname" name="firstname" placeholder="First Name" autocomplete="off"/>
<input type="text" id="lastname" name="lastname" placeholder="Last Name" autocomplete="off"/>
</div>
<div>
<input type="text" id="email" name="email" placeholder="Email example@vybzgh.com" autocomplete="off"/>
<span id="erro"></span>
</div>
<div>
<input type="password" id="password" name="password" placeholder="Password" autocomplete="off"/>
<input type="password" id="confirmpassword" name="confirmpassword" placeholder="Confirm password" autocomplete="off"/>
</div>
<div id="show-password"><label>Show password</label><input type="checkbox" name="checkbox" onclick="show()" /></div>
<p id="signup">By clicking on <strong>Signup</strong> you agree to our<a href="#"> <strong>Terms and Conditions</strong></a></p>
<div>
<p><strong>Yes,I Agree</strong><label class="checkbox"><input type="checkbox" name="checkbox"></label></p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
margin-top: 10%;
}
#form-container {
margin-left: 28%;
width: 600px;
height: 300px;
background-color: none;
border: 1px #ff5722 solid;
}
#titile {
margin-left: 28%;
width: 602px;
height: 30px;
background-color: #ff5722;
}
input[type="text"], input[type="password"] {
width: 250px;
height: 30px;
margin-top: 10px;
margin-left: 3.50%;
}
input[type="submit"] {
width: 500px;
height: 30px;
background-color: #ff5722;
color: white;
border: none;
margin-top: 10px;
margin-left: 50px;
cursor: pointer;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function show(){
var password = document.getElementById("password");
var confirmpassword = document.getElementById("confirmpassword");
if(password.type === "password"){
password.type = "text";
}else{
password.type = "password";
}
if(confirmpassword.type === "password"){
confirmpassword.type = "text";
}else{
confirmpassword.type = "password";
}
}
var password = document.getElementById("password");
password.onfocus = function() {
document.getElementById("password-message").style.display = "block";
}
password.onblur = function() {
document.getElementById("password-message").style.display = "none";
}
password.onkeyup = function(){
var uppercases = /[a-z]/g;
if (password.value.match(uppercases)){
uppercase.classList.remove("invalid");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: