29
form HTML CSS JAVASCRIPT
I creat a fake form with code pen. I use Html Css and JavaScript.
When a user click on forgeten password a message appears. when the user click for write e-mail or password the title of the tag move. When the password of user is invalid a message appears, when the password is correct a message appears too.
When a user click on forgeten password a message appears. when the user click for write e-mail or password the title of the tag move. When the password of user is invalid a message appears, when the password is correct a message appears too.
1. Fake form
2. HTML Code
<div class="container">
<form >
<div class="input-form">
<input type="email" name="email" id="email"
placeholder=" " />
<label for="email">E-mail</label>
</div>
<div class="input-form">
<input type="password" name="password" id="password"
placeholder=" " />
<label for="password">Password</label>
</div>
<a href="#" onclick= "forget()">forgotten Password</a>
<div class="submit-form">
<button onclick= "validate()">Log in</button>
</div>
</form>
<span id= "msg"</span>
2.The Button style
when the user put the cursor on the button, the button change color.
Before the color his color is
The cursor change tank to
when the user put the cursor on the button, the button change color.
Before the color his color is
rgba(255, 0, 0, 0.5)
after : rgba(0, 0, 255, 0.575)
. The cursor change tank to
cursor: pointer; color: white;
button {
border: 0; padding: 10px 15px;
cursor: pointer; color: white;
background-color: rgba(255, 0, 0, 0.5);
margin-bottom: 5%;
}
button:focus, button:hover {
background-color: rgba(0, 0, 255, 0.575);
}
3. The style of the form
f::selection {
background-color: hsl(0, 100%, 77%);
color: white;
}
body {
background: linear-gradient(70deg, rgba(0, 247, 255, 0.575), rgba(255, 240, 192, 0.575));
height: 100vh;
font-family: arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.container {
position: relative;
}
form {
background-color: white;
padding: 3rem;
height: 170px;
width: 450px;
border-radius: 5px;
border-left: 1px solid rgba(255, 255, 255, .3);
border-top: 1px solid rgba(255, 255, 255, .3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
-moz-backdrop-filter: blur(10px);
box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, .2);
text-align: center;
display: flex;
flex-direction: column;
overflow: hidden;
}
p {
color: white;
font-weight: 500;
opacity: .7;
font-size: 1.4rem;
margin-bottom: 60px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
}
.input-form {
display: flex;
flex-direction: column-reverse;
margin: 1.2em 0;
font-family: 'Nunito', sans-serif;
}
.submit-form {
text-align: right;
}
input::placeholder {
opacity: 0;
}
input:focus,
input:not(:placeholder-shown) {
border-bottom: 2px solid rgba(0, 0, 255, 0.575);
}
input:not(:placeholder-shown) ~ label,
input:focus ~ label {
transform: translate(10px, -30px) scale(.8);
padding-left: 0;
color: black;
}
input, label, button {
transition: .3s;
}
label {
transform: translate(10px, -15px);
cursor: text;
transform-origin: left top;
position: absolute;
}
input {
padding: 10px;
border: none; outline: none;
border-bottom: 2px solid grey;
}
a {
text-decoration: none;
color: rgb(153, 123, 123);
font-size: 15px;
}
a:hover {
text-shadow: 2px 2px 6px #00000040;
}
a:active {
text-shadow: none;
}
4. Javascript and message
The function forget is easy, if the user click on (i forget my password) the tag
when the user click on the button, if is password have a capital letter and a number the function validate put the message (strong password) else the fonction put the message (weak password).
<span></span>
put the message (give e-mail). when the user click on the button, if is password have a capital letter and a number the function validate put the message (strong password) else the fonction put the message (weak password).
function validate() {
var msg;
var str = document.getElementById("password").value;
if (str.match( /[0-9]/g) &&
str.match( /[A-Z]/g) &&
str.match(/[a-z]/g) &&
str.match( /[^a-zA-Z\d]/g) &&
str.length >= 10)
msg = "<p style='color:green'>Strong password.</p>";
else
msg = "<p style='color:red'>Weak password.</p>";
document.getElementById("msg").innerHTML= msg;
}
function forget(){
var msg;
msg = "<p style= 'color:red'>give e-mail</p>";
document.getElementById("msg").innerHTML= msg;
}
29