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.

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 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 <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; 

}